Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Walk through one approach to creating greater design clarity through improvements in typography.
Definitions
- 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 that 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 lowercase letter x, hence the name.
Resources
Finding Fonts:
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.
- My Fonts - Large selection of fonts for sale
Pairing Fonts
- FontPair - A collection of sortable and searchable font pairings
- Typewolf - Examples of fonts in use, including pairings
Typography guide
Figma
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up