Fonts and Typography

by Yorgo Nestoridis

Fonts deter­mine how your text looks. We need to look at fonts on a micro level (glyphs, font fam­ily and so on) as well as on a macro level (text blocks, posi­tion­ing of text, text size, indent and so on).

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

CSS rec­og­nizes 5 font families:

1. Serif

2. Sans-serif

3. Script

4. Mono­space

5. Fan­tasy

These 5 generic cat­e­gory or fam­ily names are rec­og­nized by the browser and the browser will dis­play default fonts for each of the generic fam­i­lies. Each fam­ily has many dif­fer­ent type­faces allow­ing us to define exactly the font we want to display.

A serif is the tiny stroke at the end of the main strokes of a font char­ac­ter. Serif fonts are used mainly in print­ing as char­ac­ters are eas­ier to read there. In Web Design, this is not true, namely for small font sizes as most mon­i­tors don’t have the res­o­lu­tion needed for clear dis­play of the serifs.

Serif

Typ­i­cal Serif fonts are Times, Geor­gia, Times new Roman.

Sans-serif fonts are fonts with­out ser­ifs (the lit­tle strokes at the end of the font strokes). “Sans” is French for “with­out”. Sans-serif fonts are ideal for the web as they are gen­er­ally ren­dered bet­ter by our browsers and mon­i­tors, namely in small sizes.

Sans-serif

Typ­i­cal sans-serif fonts are Ver­dana, Arial, Hel­vetica, Tahoma.

Script fonts remind of cur­sive or hand­writ­ing. They are mainly used for dec­o­ra­tion. Like all fonts they can only be read by com­put­ers on which these fonts are installed, which is less the case with script fonts. To make sure that they are dis­played as intended by the web designer, they are often rep­re­sented by images. Use with cau­tion these fonts.

Dali

Typ­i­cal script fonts: Cor­siva, Lucida Handwriting.

Mono­space fonts look like type­writer fonts. All fonts have the same width even the i and the w. Mono­space isoften used for codes and pre-formated text.

Mono­space

Typ­i­cal mono­space fonts: Courier, typewriter.

Fan­tasy fonts are “dec­o­ra­tive” fonts like script fonts, how­ever they are rarely found on com­put­ers and there­fore best used in images. Typ­i­cally found in Head­ings, Logos and artis­tic creations.

Typ­i­cal fan­tasy fonts: Dali, Chopin Script, Hancock.

Fonts

• Fonts and Typog­ra­phy in CSS
• Web Design by Bill Gates
• Web Design Workshop
• Web Design
• Web Design Finan­cial Times Style

This page is wiki editable click here to edit this page.

• serif
• snap­back script font
• serif typog­ra­phy
• serif fonts
• san serif
• TYPOGRAPHY serif
• sans serif
• times new roman
• mitchell and ness script font
• geor­gia font

Related posts:

1. Web Design
2. Web Design Basics
3. Web Design Workshop
4. Web Design Work­shop 3 – Site Title
5. Web Design Work­shop 4 – Navigation

Tags: Fantasy, Fonts, Monospace, Sans-serif, Script, Serif, Typography, Web Design CSS, Web Design Fonts and Typography, Web Design Style, Website Design, Yorgo Nestoridis

This entry was posted on September 8, 2009 at 4:18 am and is filed under Web Design, Web Design Basics. You can follow any responses to this entry through the RSS 2.0 feed.