TypographyTypography

(Fonts)(Fonts)

TypeType

• type = any set of printed characters

• font = a set of printable or displayable characters with a specific style and size

• typeface = design for a set of tons

• typeface family / font family = all sizes and variations

• type = any set of printed characters

• font = a set of printable or displayable characters with a specific style and size

• typeface = design for a set of tons

• typeface family / font family = all sizes and variations

serifserifserifserifmmTerminologyTerminology

descenderdescender

ascenderascender

baselinebaseline

midlinemidlineheightheight

• Body type = body text type, readability is key

• Display type = Sticks out (headlines, chapters…)

•Serif font = a font with serifs (the fancy extras)

•decorative = symbol fonts ✯ ♥♔ ☂☇⚑ ♴♼♬

• Sans-Serif font = a font without serifs (ex: Arial)

• Mono-Spaced font= same width characters

• Body type = body text type, readability is key

• Display type = Sticks out (headlines, chapters…)

•Serif font = a font with serifs (the fancy extras)

•decorative = symbol fonts ✯ ♥♔ ☂☇⚑ ♴♼♬

• Sans-Serif font = a font without serifs (ex: Arial)

• Mono-Spaced font= same width characters

General Font Categories

General Font Categories

CSS Font FamiliesCSS Font Families

• Basic categories (could be more)

• serif

• sans-serif

• monospaced

• script

• cursive or similar (script)

• Basic categories (could be more)

• serif

• sans-serif

• monospaced

• script

• cursive or similar (script)

• Based on British system:

• Point = 1/72 of an inch

• Pica = 1/6 of an inch

• Pica = 12 points

• Font Size is in Points

• 1/72 is typically in decimal and rounded

• Based on British system:

• Point = 1/72 of an inch

• Pica = 1/6 of an inch

• Pica = 12 points

• Font Size is in Points

• 1/72 is typically in decimal and rounded

UnitsUnits

SizingSizing

• Font size (in points) is height: highest to lowest

• Extra white space varies by font!

• line spacing is can often be altered

• Leading = the line height (font + white space)

• EX: 28pt font + 44pt leading

• Font size (in points) is height: highest to lowest

• Extra white space varies by font!

• line spacing is can often be altered

• Leading = the line height (font + white space)

• EX: 28pt font + 44pt leading

Relative SizingRelative Sizing

• em = the font size

• given a 12 pt font:

• 1 em = 12 pt , 0.25 em = 3 pt

• en = 1/2 em, half the font size

• Really useful in CSS

• em = the font size

• given a 12 pt font:

• 1 em = 12 pt , 0.25 em = 3 pt

• en = 1/2 em, half the font size

• Really useful in CSS

Web PagesWeb Pages

• Browsers are not strictly adhering for type

• Printing control is limited, not consistently reproducible

• Browser window size changes text flow

• Thanks to MS, the default browser dpi larger than the typical 72dpi of application software

• Browsers are not strictly adhering for type

• Printing control is limited, not consistently reproducible

• Browser window size changes text flow

• Thanks to MS, the default browser dpi larger than the typical 72dpi of application software

Web IssuesWeb Issues

• Not everybody has your fonts

• List multiple fonts to allow for other systems

• End the font list with a generic font family (sans-serif, serif, script...)

• Create a graphic of the text for complete control

• downside: larger file, more work

• Not everybody has your fonts

• List multiple fonts to allow for other systems

• End the font list with a generic font family (sans-serif, serif, script...)

• Create a graphic of the text for complete control

• downside: larger file, more work

FormattingFormatting

• UPPERCASE IS HARD TO READ

• On the net its considered shouting

• Body text should be all 1 font (general guideline)

• Don’t go overboard with fonts

• Don’t require the user to install fonts

• CSS allows a lot of fine-tuning

• UPPERCASE IS HARD TO READ

• On the net its considered shouting

• Body text should be all 1 font (general guideline)

• Don’t go overboard with fonts

• Don’t require the user to install fonts

• CSS allows a lot of fine-tuning

Kerning & Spacing Kerning & Spacing

• The space between letters = Kerning

• limited browser support

• Typically means letter tracking

• Word tracking also is possible

• Line height = means FULL height including ascenders and descenders. Also called the LEADING space

• The space between letters = Kerning

• limited browser support

• Typically means letter tracking

• Word tracking also is possible

• Line height = means FULL height including ascenders and descenders. Also called the LEADING space