1 / 17

Web Typography: Choosing Serif and Sans Serif Fonts

Learn about the differences between serif and sans serif fonts, factors that influence font choice, restrictions on font choices, and setting web fonts for optimal readability and legibility.

witcher
Download Presentation

Web Typography: Choosing Serif and Sans Serif Fonts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Typography

  2. Serif and sans serif fonts • Serifs are the tails on the letters • Serif leads the eye from letter to letter • At large font sizes, the serifs get too big

  3. Sans serif fonts Note varying line weights on Optima

  4. Serif fonts

  5. Display fonts

  6. Factors on font choice • Low monitor resolution makes serifs too big and interfere with letter form

  7. Image on designer PC

  8. Restrictions on font choices • Must be resident on the client PCFonts always come from the machine with the browser. • The fonts on the designer’s PC only display on that PC (or others with the fonts installed) • What would this mean in a corporate environment with centralized PC control?

  9. Setting web fonts • Fonts are in groups • font-family: Times New Roman", Georgia, Times, serif • font-family: Arial, Helvetica, sans-serif • What does putting fonts into groups mean?

  10. Readability and legibility • Readability = reading passagesLegibility = distinguishing individual letters • x-height is major factor • Georgia and Verdana were designed for the screen

  11. Georgia & Verdana

  12. Font size and monitor • Fonts changes based on monitor settings • You have no control over either monitor resolution or window size

  13. CNN at 800x 600.jpg

  14. CNN at 1024 x 768

  15. CNN at 1280 x 1024

  16. End

More Related