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.
Type Rendering on the Web, Tim Brown
Type Rendering Mix, Testing Different Web Browser Rendering
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
0:00
print, the process yields a tangible
document, piece of paper, poster, etc.,
0:02
which has the text as ink on a page.
0:07
The final medium is quite different than a
lighted screen displaying a certain amount
0:10
of pixels to render type on a website.
0:14
Now, let's look at two main ways web
typography differs from print, and
0:17
how we can smartly design with that in
mind.
0:22
First, let's talk about desktop [SOUND]
fonts versus webfonts.
0:25
[SOUND] Desktop fonts [SOUND] are used for
print layouts and design.
0:29
They are fonts you install on your
computer which give you
0:33
the [SOUND] ability to use them in word
processing programs or design programs.
0:36
The final mediums they can end up on are
pages of paper,
0:40
[SOUND] posters, billboards, JPEGs, PNGs,
the list goes on.
0:44
Desktop fonts were created with those
mediums in mind.
0:48
Webfonts are a fairly recent phenomenon.
0:52
These are font files that are not intended
to be used in
0:55
the way desktop fonts are used.
0:58
Webfonts are created for the purpose of
serving up a font on a website that
1:00
might not be installed on a person's
computer.
1:04
Before recent years, you could only call
display fonts that were
1:07
already native to a person's computer also
known as system fonts.
1:10
This drastically limited your choices
because you had to
1:14
find ones that were native to multiple
operating systems like Windows or Mac OSX.
1:17
Now, webfonts have showed up and recently
became popular,
1:24
because you have more control and
customization over what your users see.
1:27
Many type foundries, and designers have
quickly jumped on
1:31
board with converting their desktop fonts
in to web fonts.
1:34
Some, simply plug their desktop fonts in
to a web font
1:37
converter without making any adjustments,
and license them for the web as is.
1:40
This might work well for fonts intended
for large sizes.
1:46
But great web fonts have been
re-engineered to work for the web.
1:49
That means that desktop licence file, and
web licence file are designed in
1:53
different ways to fit the medium they are
intended for.
1:58
To add another variable into the mix
different browsers like Safari,
2:01
Internet Explorer, Chrome, and Firefox
handle and render web fonts differently.
2:06
They sometimes require different web font
files and
2:11
sometimes type may appear bolder in one
browser than the other.
2:14
This means, it'll be a good idea to test
how your type is rendering
2:18
across different browsers.
2:21
Some type designers meticulously apply
font hinting to their typefaces.
2:22
This is where they're setting up manual
mathematical hints at different sizes to
2:27
make sure the type is rendering how they
like it at each size on the screen.
2:32
Some browsers ignore this and some
browsers take this into account.
2:37
Some popular type faces have desktop
licenses, but may not yet
2:41
be available as web fonts.
2:45
In this case, you should reach out the the
type designer or foundry to see if you can
2:47
purchase a web font license, or find out
when one will be released.
2:51
Do not try to use a desktop licensed font
and convert it to webfonts, or
2:56
serve up desktop font files on your site.
3:00
Not only is this not smart, but it's also
breaking that license agreement for
3:03
most typefaces.
3:08
Lastly, let's discuss the second main
difference,
3:09
which is fixed layouts versus fluid
layouts.
3:12
In print or graphic design, you're
designing for
3:15
a fixed layout, meaning the type and
3:18
elements are arranged in a specific way
that's locked into the medium.
3:20
For example, if I was laying out type for
a magazine article, the type is
3:25
set in a specific place with an exact
width and length to the block of text.
3:28
Once that magazine is finalized and
printed, the type and
3:34
layout remain that way so you know exactly
how the reader is going to see it.
3:36
With the web, it's much different.
3:40
Users might be viewing your site on a
phone, tablet, or
3:43
desktop, which all have different screen
sizes.
3:46
Typography that might work great when
viewing the site on a desktop computer
3:49
can take a turn for the worst on a mobile
phone.
3:53
With responsive design, we can create
fluid layouts, so that our type and
3:56
layouts can respond to a user's screen
size.
4:00
This gives us a ton of control such as
changing fonts sizes, layout, widths and
4:03
more at certain breakpoints.
4:08
We'll get into this more later.
4:10
That's it for now and good work finishing
this stage.
4:12
I'll see you in the next stage.
4:14
We'll look at how to choose and use type
faces for the web.
4:16
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