Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Typography for Designers!
You have completed Typography for Designers!
Preview
Properly choosing and setting up our font family’s weights and styles will make all the difference when displaying them on our site. Remember, faux is no way to go.
Further Reading
- Elements of Typographic Style, Robert Bringhurst
Resources
- Type Scale - Type scale builder
- Modular Scale - Another type scale builder
- Pix to Em
- Layout Grids in 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
[MUSIC]
0:00
Now that we've looked at some principles
and have a background in typography,
0:04
we'll get into how to practically
achieve good typography on
0:08
the web in the next few stages.
0:12
In the previous stage,
we learnt how to choose fonts.
0:15
In this session, we'll start with the
basics of a font family's, weights, and
0:19
styles, like bold and italics.
0:22
First, it'll be good to mention
here that faux bold and
0:26
faux italic are faux pas,
which simply translates to don't do them.
0:29
Faux bold or faux italic means it
is a false bold or fake metallic.
0:35
These can occur when you only have
one weight and style of a typeface.
0:41
Design programs in CSS have
the ability to fake the bold or
0:46
italic style of that web font.
0:50
But believe me, it ain't pretty and
it can hinder legibility.
0:53
A faux Bold is created by
thickening up the original font.
0:58
This can create issues with
legibility as counters close up,
1:01
dark patches of color can appear,
and letters get distorted.
1:05
Type designers carefully craft their
bold ways to correct these issues.
1:10
Faux italic texts created by obliging or
1:15
slanting the original
font to a certain degree.
1:18
At first glance, you might think this
looks okay, but let's take a closer look.
1:21
Italic versions of Serif type bases are
actually created in a more cursive style.
1:27
They're not just slanted versions of
the regular or Roman counterparts.
1:33
There can then some, and
1:38
often their letter forms
are entirely different all together.
1:39
Notice the changes here such as how the
cross bar on the e becomes more fluid or
1:43
how the f elegantly descends
below the baseline.
1:49
Because italics are often use for
emphasis on the web,
1:53
true italics can better emphasize words or
phrases than faux italics because of this.
1:57
For San Serifs,
this cursive nature is less accentuated.
2:03
So you might think that you can get
away with the faux, but you can't.
2:08
Any time you oblique the font,
the weight of the letter forms gets
2:12
unevenly distributed,
which creates uneven color.
2:16
Also, certain letters can change
entirely in a true italic,
2:21
such as a two story Roman A changing
to a one story italic A.
2:26
Again, type designers meticulously
2:31
build italic versions of their
fonts correcting these issues.
2:34
So be sure to utilize fonts that have bold
and italics instead of trying to fake it.
2:38
This not only gives the user
a better experience, but
2:44
it also improves the legibility and
readability.
2:48
Be aware too that some typefaces
online are sold as having italics, but
2:51
really they're just uncorrected,
oblique versions of their fonts.
2:56
This is why when we
discussed using a typeface,
3:01
you'll want to make sure it's well built
with all the necessary weights and styles.
3:04
Let's unpack that.
3:09
Sometimes typefaces have a basic array
of weights like normal and bold.
3:12
But other times a family of fonts
can range from thin, to light,
3:17
to normal, to semi-bold to bold to black.
3:22
Let's look at the different
weights of Open Sans using Figma.
3:26
As you can see, there's light,
light italic, regular, italic, and so on.
3:31
Some fonts have additional styles such as
hairline, which is even thinner than thin,
3:37
an ultra which is even thicker
than extra bold or black.
3:43
For this entire text block,
the family name is set as Open Sans,
3:48
but the text within is
a different weight and/or style.
3:53
Click into the text to
see what it's set to.
3:58
If you see a message about missing fonts,
4:01
download all the styles of
Open Sans from Google Fonts.
4:03
Figma just has a few styles pre-installed.
4:08
In addition to those settings,
we can also make the text underlined
4:12
We can format it in all caps.
4:20
This is preferable to typing
it in all uppercase letters.
4:23
It's much easier to switch back to title
case if you decide to change it later.
4:27
We can also format it in small caps,
but only if the font supports it.
4:34
We see here that Open Sans
doesn't support small caps.
4:41
Let's see it in Play Fair,
a Google Font that support small caps.
4:45
Be careful to not choose false small
caps as we want the true small caps
4:58
designed by the type designer.
5:02
Great, now you've gotten a handle
on the basic formatting options.
5:07
Next I'll introduce you to the design
project we'll work on in this course.
5:11
As I introduced concepts, I'll demo it and
a design program called Figma.
5:16
To follow along,
download their project files.
5:21
Here we see copy from the science
fiction book, The War of the Worlds.
5:25
I've also added some headings.
5:30
The text is set an Alegreya
from Google fonts.
5:33
I chose this typeface
because of its roots and
5:36
literature due to the continent
hand being a book.
5:39
Is diverse weights, italics, and
the inclusion of small caps and
5:42
other features.
5:46
We'll use this file to
play around with type.
5:48
As you can see, all the text is the same
size, which really flattens the hierarchy.
5:51
I can make the heading bold to stand out,
but there's even more we can do.
5:58
Let's talk about text size.
6:04
When designing for screens and a design
program, you'll specify text in pixels.
6:06
A pixel is a fixed unit of measure that
pertains to media with display screens,
6:12
such as a computer.
6:17
A good rule of thumb is
to set your body text
6:19
anywhere relative to 16
pixels to 24 pixels.
6:21
Readers eyes are usually a few
feet away from the screen.
6:26
So these larger sizes are necessary for
comfortable reading,
6:30
whereas smaller text can strain and
tire their eyes.
6:33
This range is diverse too as
every typeface is different.
6:38
As we've seen before,
6:43
the x height of a typeface can
greatly affect its perceived size.
6:44
So, use what you've learned and
make a judgment call on what works best.
6:49
When in doubt,
lean towards the larger size to be safe.
6:53
As the design gets implemented with code,
6:58
the text size will likely
translate to a non-fixed unit.
7:01
While pixels make it easy to create
exact designs with a fixed unit,
7:05
designs are viewed on a broad
range of devices out in the wild.
7:09
But because this is a fixed
unit of measure it can create
7:14
more work with responsive typography,
which scales text size up or
7:18
down depending on the screen size.
7:23
So, pixel should be swapped out
with responsive units like and
7:26
rems, which are relative units for
font sizing.
7:31
This is incredibly helpful, scalable,
and powerful for responsive typography.
7:34
But no need to act on that now,
we'll work in pixels as we design.
7:41
And if you decide to develop with code,
you can do so
7:46
with relative units in minds.
7:49
Once you've set your body text size,
it's time to adjust the rest of the text.
7:52
Sizing your headings, paragraphs, and
other text elements may seem a little
7:57
tricky, and it's not a great idea to
just guess by shooting in the dark.
8:01
This can lead to inconsistent headings and
paragraphs sizes,
8:07
which is why following a typographic
scale can help immensely.
8:11
A scale gradually increases at a certain
rate to ensure consistent proportions for
8:16
your font sizes.
8:21
The classic typographic scale increases
in intervals of 1, 2, 3, and then 12.
8:24
It's been used for centuries and
is reliable to adhere to,
8:30
especially if you're using
16 pixels as your base size.
8:35
16 pixels is great, but I'd like to
enlarge the body copy to 20 pixels.
8:40
That size is not in the classic scale,
but don't fret.
8:46
I'll look at typescale.com
to build a type scale.
8:50
This site is incredibly helpful
because you can set your base size,
8:54
test different scales, and
even import Google web fonts.
8:58
Our base size is 20 pixels,
let's choose the major third as I like it
9:03
sizing and
we can change the font family to Alegreya.
9:08
Feel free to test out the different
scales to see what they look like.
9:13
They're perfect fourth and
fifth are also commonly used.
9:17
We're now given some sizes in ems and
pixels.
9:21
Focus on pixels for now, ems are important
when it comes to implementing it code.
9:24
Now, let's set the font size for
the headings.
9:30
Here's the order of the headings by text
size, title, paragraph headings, and
9:34
author name.
9:39
For simplicity,
all around down to the nearest pixel.
9:41
Also, note that you don't need to use
the largest text size, you can start and
9:44
stop anywhere within the scale so
long as you choose adjacent sizes.
9:49
The largest heading will be our h1 or
heading 1 at 48 pixels.
9:56
The next will be our h2 at 39 pixels, and
the third will be our h3 at 31 pixels.
10:01
Then I'll set the body text to 20 pixels.
10:10
I'll go ahead and
create a text style for each heading.
10:16
This sets us up for quick edits later on,
and it keeps the text sizes consistent.
10:20
Great, now that setup,
we still have a ways to go but
10:44
getting a proper body size and
scale is a great place to start.
10:48
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