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
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.
This video doesn't have any notes.
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
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 arranged 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up