1. Typography (Fonts)

2. Type 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

3. serif m m Terminology descender ascender baseline midline height

4. 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

5. CSS 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 )

6. 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 Units

7. Sizing 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

8. Relative 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

9. Web 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

10. Web 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

11. Formatting 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

12. 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