Preview
Video Player
00:00
00:00
Print vs. The Web
4:19Type 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.
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