Fonts & Typography (v1)
Introduction
Something like 95% of the web is text and yet most web developers don’t pay any heed whatsoever to typography — it’s this mysterious esoteric subject reserved for designer geeks and their lattes. You are not "most web developers".
Typography is important stuff! It can have a major effect on how your page feels when the user is reading through it and can also influence how easy the page is to digest, both major factors in your user deciding to continue or turn back. You got introduced to it in the section on Design and UX, and here you’ll see it implemented.
Do what you can to get at least a familiarity with the high level decisions involved with choosing a typeface and font sizes. You don’t need to dive into kerning and what ligatures are, but you should understand when it’s appropriate to use serif vs sans-serif fonts and how font weights and line heights impact readability (recall how to build a good visual hierarchy).
Learning Objectives
- Why do fonts matter?
- What’s the difference between a serif and sans-serif font?
- What are
font-familyattributes used for? - How is the active font determined in a
font-family? - Where does the browser actually get its fonts from?
- Where can you get additional fonts from and how do you get them onto your page?
- What are the disadvantages of using web fonts? Of loading your own?
- What are the important properties of fonts that you can specify using CSS?
Study
Browse through A Beginner’s Guide to Using Google Web Fonts by DesignShack, but don’t get too lost in the details.
Browse the Google Web Fonts and see if any of them seem interesting to you.
8 Typography Tips To Ensure Web Accessibility: