Typography: After5:21 with Hope Armstrong
Walk through one approach to creating greater design clarity through improvements in typography.
- Counter: An area of a letter that is entirely or partially enclosed, such as the hole in an "O" or a "P" character.
- Drop cap: where the first letter of a paragraph is an enlarged capital letter.
- Font pairing: A combination of fonts that work well together in a design.
- Line height: Also called leading, this is the distance between two lines of type. It's calculated by measuring between the two baselines.
- Pull quote: A quotation which is taken from the body text and styled differently in order to make it stand out.
- Type ratio: The difference between the largest and smallest font size.
- Type scales: A method for creating balanced and harmonious font sizing.
- x-height: The distance between the baseline and the mean line of the lower-case letters. A tip is to look at the height of a lower-case letter x, hence the name.
Note: Be mindful of font licenses; some fonts require payment for commercial use. If you want to use the font on a website, look for typefaces with web fonts.
- Google Fonts - Free for commercial or personal use. If you're a Figma user, the fonts are already preloaded for use in Figma projects.
- Lost Type - High quality, curated fonts. Several are "pay what you want" for personal use
- Font Squirrel - Free for commercial or personal use. Mixed quality.
- Dafont - Assorted licenses available. Mixed quality.
- Adobe Fonts - A large library of fonts is included with all Creative Cloud subscription plans.
- My Fonts - Large selection of fonts for sale
- FontPair - A collection of sortable and searchable font pairings
- Typewolf - Examples of fonts in use, including pairings
- For every Google Font, you can see popular pairings, ex: https://fonts.google.com/specimen/Merriweather
You need to sign up for Treehouse in order to download course files.Sign up