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