Fonts and Typography

September 8, 2009

Fonts and Typography Basics

Fonts determine how your text looks. We need to look at fonts on a micro level (glyphs, font family and so on) as well as on a macro level (text blocks, positioning of text, text size, indent and so on).

Fonts and CSS

Cascading Style Sheets (CSS) is most often used to define fonts on a website. In order to make the best use of your style-sheet, we need to know a bit more about fonts.

Font Families

CSS recognizes 5 font families:

1. Serif

2. Sans-serif

3. Script

4. Monospace

5. Fantasy

These 5 generic category or family names are recognized by the browser and the browser will display default fonts for each of the generic families. Each family has many different typefaces allowing us to define exactly the font we want to display.

Serif

A serif is the tiny stroke at the end of the main strokes of a font character. Serif fonts are used mainly in printing as characters are easier to read there. In Web Design, this is not true, namely for small font sizes as most monitors don’t have the resolution needed for clear display of the serifs.

Serif

Typical Serif fonts are Times, Georgia, Times new Roman.

Sans Serif

Sans-serif fonts are fonts without serifs (the little strokes at the end of the font strokes). “Sans” is French for “without”. Sans-serif fonts are ideal for the web as they are generally rendered better by our browsers and monitors, namely in small sizes.

Sans-serif

Typical sans-serif fonts are Verdana, Arial, Helvetica, Tahoma.

Script

Script fonts remind of cursive or handwriting. They are mainly used for decoration. Like all fonts they can only be read by computers on which these fonts are installed, which is less the case with script fonts. To make sure that they are displayed as intended by the web designer, they are often represented by images. Use with caution these fonts.

Dali

Typical script fonts: Corsiva, Lucida Handwriting.

Monospace

Monospace fonts look like typewriter fonts. All fonts have the same width even the i and the w. Monospace isoften used for codes and pre-formated text.

Monospace

Typical monospace fonts: Courier, typewriter.

Fantasy

Fantasy fonts are “decorative” fonts like script fonts, however they are rarely found on computers and therefore best used in images. Typically found in Headings, Logos and artistic creations.

Typical fantasy fonts: Dali, Chopin Script, Hancock.

Fonts

3 Responses to Fonts and Typography

Typografi som uttrykk « jonathan aglen on October 26, 2011 at 2:37 am

[...] Bilde er hentet fra: Yorgonestoridis [...]
Which Fonts should I use with CSS | Design on September 15, 2009 at 4:48 pm

[...] Web Design Workshop More in-depth information is to be found HERE. [...]
Which Fonts should I use with CSS | FAQs on September 15, 2009 at 1:52 pm

[...] More in-depth information is to be found HERE. [...]

Fonts and Typography

Contents