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
Type has progressed a long way since the days of the printing press. We’ll look at what’s changed when it comes to web typography.
Further Reading
- Type Rendering on the Web, Tim Brown
- Type Rendering Mix, Testing Different Web Browser Rendering
When laying out or setting type for print,
the process yields a tangible document,
0:01
such as a piece of paper which
has the text as ink on a page.
0:06
This final medium is quite different than
a lighted screen displaying a certain
0:10
amount of pixels to
render type on a website.
0:15
Now let's look at two main ways
web typography differs from print,
0:18
and how we can smartly
design with that in mind.
0:23
[SOUND] First, let's talk about
desktop fonts versus webfonts.
0:26
Desktop fonts are used for
print layouts and design.
0:32
They're fonts you install on
your computer, which gives you
0:35
the ability to use them in word
processing programs or design programs.
0:38
The final mediums they can
end up on are pages of paper,
0:43
posters, billboards, JPEGs,
PNGs, the list goes on.
0:48
Desktop fonts were made
those mediums in mind.
0:53
Webfonts are font files that
are not intended to be used in
0:57
the same way that desktop fonts are.
1:01
Webfonts are created for the purpose
of serving up a font on a website or
1:04
app that might not be installed
on a person's computer.
1:07
This is crucial when designing for
the web.
1:11
We'll get into where to
find webfonts in a bit.
1:14
But for now, just know there are several
websites that let you download webfonts
1:17
for free or for purchase.
1:22
In the distant past, when creating a
website you could only use fonts that were
1:25
already native to the person's computer,
also known as system fonts.
1:30
The upside of using system fonts
is there's no loading time,
1:35
the fonts are designed for
legibility on the devices, and
1:39
users have a familiarity with the font.
1:43
However, it limits your
choices because you have to
1:46
use fonts that are native to multiple
operating systems on Windows and Mac.
1:49
Now that webfonts are common and
well-supported,
1:55
you have more control and
customization over what your users see.
1:58
When designing for a mobile app, the
easiest option is to use a system font.
2:03
But if you prefer a custom font,
look for fonts with an app license.
2:08
This makes it easy to use
the font across iOS, Android,
2:13
and other digital publishing platforms.
2:17
When shopping for a webfont, be sure to
inform the client about the ongoing cost.
2:21
Some webfont licenses are charged based
on the number of monthly active users.
2:27
Sometimes you'll have a larger budget for
webfonts,
2:33
which provides you with some
flexibility and options to choose from.
2:36
Other times there might not be room
in the budget for webfont licenses or
2:41
subscription models.
2:45
If that's the case, try to help the client
understand the benefits of good
2:47
typography and why there is
a cost associated with webfonts.
2:51
For example, I might tell a client
free typefaces are fine to use and
2:57
I will happily go down
that route if needed.
3:02
But be aware there's
a relatively small number of
3:05
really good versatile free fonts,
which limits our options.
3:08
Because of that, the good ones
are often used on many sites,
3:12
which won't do us any favors
in distinguishing your site.
3:17
To set your site and brand apart,
3:21
I would recommend going with
a subscription webfont model.
3:23
Although there is some cost, I think your
brand and users will get much more mileage
3:28
out of paid webfonts than
if we went with free fonts.
3:32
After that sometimes a client makes room
in the budget and sometimes they don't.
3:37
In the latter case, we'll want to have
all these principles we discussed in
3:42
the back of our minds as we browse
free webfont sites to find good ones.
3:46
Another thing to note
about webfonts is this.
3:52
Some popular typefaces have
desktop licenses but may not yet
3:55
be available as webfonts.
4:00
In this case, you should reach out to
the type designer or foundry to see
4:02
if you can purchase a webfont license or
find out when one will be released.
4:06
Do not try to use a desktop licensed
font and convert it to a webfont, or
4:11
serve up desktop font files on your site.
4:16
Not only is this not smart, but
4:19
it's also breaking the license
agreement for most typefaces.
4:21
Lastly, let's discuss another difference,
4:27
which is fixed layouts
versus fluid layouts.
4:30
In print or graphic design,
you're designing for a fixed layout.
4:33
Meaning the type and
4:38
elements are ranged in a specific
way that's locked into the medium.
4:39
For example, if I was laying out
a magazine article, the type is set in
4:44
a specific place with an exact width,
and linked to the block of text.
4:49
Once that magazine is finalized and
printed, the type and
4:54
layout remain that way, so you know
exactly how the reader is going to see it.
4:58
With the web, it's much different.
5:04
Users might be viewing your
site on a phone, tablet, or
5:06
desktop, which all have
different screen sizes.
5:10
Typography that might work
great when viewing the site
5:14
on a desktop computer could take a turn
for the worse on a mobile phone.
5:17
With responsive design, we can create
fluid layouts so that our type and
5:22
layouts can respond to
a user's screen size.
5:26
This gives us a ton of control,
such as changing font sizes,
5:30
layouts, widths, and
more at certain breakpoints.
5:34
We'll discuss this more later.
5:39
That's it for now, and
good work finishing this stage.
5:41
I'll see you in the next stage,
where we'll look at how to chose and
5:44
use typefaces.
5:47
You need to sign up for Treehouse in order to download course files.
Sign up