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
How did you do? 0:01 Were you able to rework the typography? 0:02 Let me show you what I did. 0:05 First, I notice the text was set in a single font, Arial. 0:06 This is a generic font, so it isn't giving the design much character. 0:10 It's also more dynamic to choose a pair of fonts that work together. 0:15 So I knew I wanted a bold display text for 0:20 the header and an easy to read font for the body text. 0:23 I landed on Patua One for the headline and Merriweather for the body text, 0:28 which are both available for free via Google fonts. 0:33 As a reminder, to find an appropriate font for body text, look for a font family 0:36 that contains a range of weights including regular, italic, and bold. 0:41 Also look for low to moderate stroke contrast, 0:46 meaning the text looks balanced and even with little variation and stroke width. 0:49 To further optimize for readability, look for large counters and a tall x height. 0:54 For resources to find fonts and font pairings, check out the teacher's notes. 1:00 By the way, let's briefly chat about type scales. 1:05 When I change the headline to Patua One, 1:09 I increased the text size because I noticed the design had a low type ratio. 1:11 The type ratio is the difference between the largest and smallest font size. 1:16 So in this case, the largest was 30 pixels and the smallest was 12 pixels. 1:21 News sites are designed to grab attention. 1:28 Therefore, it's good to aim for high type ratio. 1:31 So I made the headline 60 pixels. 1:34 Next I wanted to make the body text even more readable by increasing the space 1:40 between wrapped lines. 1:44 The 18 pixel body text was previously set to auto line height, 1:50 and I increased it to 30 pixels. 1:55 Generally, you want to set line height 130% to 150% of text size. 1:58 Although, you can play around with it as it's not a hard rule. 2:03 I also softened the body text color. 2:08 It was all solid black which reads a bit harsh on the white background. 2:10 I knocked it down to a dark grey to retain the contrast 2:15 while giving it a softer edge. 2:19 Next, I noticed the wide width of the paragraphs. 2:21 My eyes are working hard to scan back and forth over such a wide distance. 2:25 I shortened the paragraphs to a more comfortable width. 2:30 Then I rearranged the images and 2:33 related stories to fit in the white spaces created by the text columns. 2:35 At this point, it was looking much better. 2:43 Although I wanted to add more visual treatment to really spice it up. 2:46 I added a drop-cap, which is a classy, old-timey print technique 2:50 where the first letter of a paragraph is an enlarged capital letter. 2:55 The size typically spans two or three lines of text. 2:59 To ease the transition between the drop-cap and the following text, 3:03 I capitalized the first significant series of words. 3:08 It's best to use small caps for this since they're specifically designed to be 3:11 uppercase letters which scale down to lowercase height. 3:16 The Merriweather font doesn't support small caps, so I use regular capitals. 3:19 Regular capitals make the text stand out a bit more than small caps, 3:25 but I like the charm this technique is adding to the design and 3:30 is better than trying to do a faux small caps. 3:34 The last bit of flourish I added to the body text was the pull quote. 3:38 A pull quote is a statement that's emphasized in an article. 3:42 This breaks up long bodies of text making it more scannable and 3:46 entertaining to read. 3:50 Finally the last section I improved was the intro text. 3:52 The hierarchy of this text was unclear, making it feel out of balance and 3:56 difficult to decipher. 4:01 I de-emphasized the date and time by making the text smaller and 4:05 lightening the text color. 4:10 I chose a grey which is greater than the primary text color, yet 4:12 still dark enough to provide contrast. 4:16 I also moved it above the headline since I wanted to create a pattern which allows 4:19 for a longer title to wrap. 4:24 I didn't want to this text to get in the way. 4:25 As for the author's name, I typed it below the subheader, 4:28 to create a balanced layout and an appropriate hierarchy. 4:31 I also softened it by applying the secondary text color. 4:35 That's it for the changes. 4:39 By the way, I recommend using styles in Figma. 4:41 By defining text and color styles, you can define styles once and 4:45 allow them to trickle through the elements across multiple artboards. 4:49 This makes it much easier if you decide to switch fonts or tweak a color later on. 4:54 Instead of changing it for each individual element, 5:00 you can adjust the style in one spot. 5:04 For more info on this, check out the teacher's notes. 5:06 If my design looks really different from yours, don't worry. 5:09 Remember, there are lots of different solutions to this and 5:14 the important thing is just keep practicing. 5:17
You need to sign up for Treehouse in order to download course files.Sign up