Typography (Fonts). Type type = any set of printed characters font = a set of printable or...
-
Upload
alan-walters -
Category
Documents
-
view
218 -
download
0
Transcript of Typography (Fonts). Type type = any set of printed characters font = a set of printable or...
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