Y

H
P

A
R

O
P
Y

B
AL
D
I
EISY V

WY: LE
B

IMPORTANCE OF
TYPOGRAPHY
Sometimes youll get a client that
just doesnt give you any
photographic assets.
It then becomes very hard to build
an aesthetic multi-page site
without any visuals.
This is where typography becomes
the art on the web.

IMPORTANCE OF
TYPOGRAPHY
Having the right typography helps
set the mood of your site, and
when done correctly, improves
readability.
It has become a great asset for
websites, but also a headache for
viewers that deal with horribly
used type.

EXAMPLES OF
GOOD TYPOGRAPHY

WAYS TO FAKE IT
UNTIL YOU MAKE IT
1.
2.
3.
4.
5.

Research.
See how its done in the field.
Use Type-o-matic.
Ask the pros.
Play with them in direct implementation.

RESEARCH:
WHERE TO FIND FONTS
Theres tons of websites with listings of
fonts for use.
Font Squirrel, MyFonts, daFont, and
fonts.com all have great fonts.
But if youre using the font for
commercial use, its better to check the
licensing to ensure you can use it for
commercial purposes without being
charged, or even sued.

RESEARCH:
TYPOGRAPHIC PAIRINGS
This is all about finding two fonts,
and making them look aesthetically
pleasing together.
Theres a lot of websites that already
list really great font combinations for
you to use.
This is an image from bonfx.com,
which has a great listing and preview
of combinations to practice with.
They host a free PDF download of
their list on their site.

RESEARCH:
TYPOGRAPHIC PAIRINGS
Bonfx has had such good success
with their pairings, they published
an e-book with 370 pages of
combinations for you to use.
Once you found a font you like, you
could do a search in the e-book for
it, to find what looks good.
And if all else fails, you can google
font combinations for your new
font if its a new and obscure one.

SEE HOW ITS DONE IN THE FIELD: BLOGS

Learn about current trends with

blogs.

Most of them are organized by

most recent date so its easy to
distinguish old trends from new
ones.

They also tend to compose the

best of the best resources from
many different sources, so they
become a one-stop-shop.

Many link you to resources you didn

t know existed before, so you get
more exposure to resources.
Theres also many that are targeted
to specific aspects of typography. So
if you like modern, vintage, or handwritten fonts, youll find something
that suits your likes.

BEST BLOGS:

BEST BLOGS:

USE TYPE-O-MATIC
This a Firefox plugin for generating
typography reports on webpages.
Its an extension of their Firebug
plugin, so both are used in
conjunction.
Just run firebug, and after installing
Type-o-matic, use firebugs new
typography tab.

USE TYPE-O-MATIC
This will run a report of all the fonts
on the page.
It lists font families, styles, weights,
sizes, colors, both letter and word
spacing, transformations, and even
shadows used on that site.
Theres even a feature to copy
everything as JSON data if you want
to manipulate it further.

 This tab generates a report that lists

font families, styles, weights, colors,
and sizes.
It also indicates if the text has any
decorations or shadows, and even if
any letter or word spacing applied.
All the data is generated in JSON.
Theres a copy to clipboard function
to view the data in a text editor.

TYPE-O-MATIC
This tab generates a report that lists
font families, styles, weights, colors,
and sizes.
It also indicates if the text has any
decorations or shadows, and even if
any letter or word spacing applied.
All the data is generated in JSON.
Theres a copy to clipboard function
to view the data in a text editor.

TYPE-O-MATIC
The extension is free and open
source. There is a link directly from
the download page to github, where
developers can expand its uses and
features.
The developers are currently
working on a chrome version.

ASK THE PROS:

CONVENTIONS
TypeCon is a yearly
convention for typography
aficionados.
Theres speakers,
workshops, presentations,
and products on sale.
The next one is in August
2014 in Washington, DC.

ASK THE
PROS:
ONLINE
COURSE

Skillshare has some of the best in

depth typography courses Ive found
for web typography. Theres even
courses for creating your own fonts.

The courses are only $20, and this one

has 11 lessons, is all online and selfpaced, and is available for as long as you
need. You can even ask the instructor for
help and guidance.

IMPLEMENTING FONTS
Direct styling

Used for the main

fonts on most
computers.

body{font-family:
Georgia,
Verdana, Arial;}

(Fonts are all styled with CSS.)

@font-face

External Links

Best for fonts you

know others wont
have on their
computer.

Best for importing a

font from an external
webpage, like Google.

@font-face{
font-family: name;
src:url(name.woff);}

<link href='http:
//fonts.googleapis.
com/css?
family=Gafata'
rel='stylesheet'
type='text/css'>

SOURCES

http://24ways.org/2013/untangling-web-typography/

http://www.smashingmagazine.com/2013/08/06/beautiful-typography-webdesign/

http://typographica.org/

http://welovetypography.com/

http://type-o-matic.net/

http://bonfx.com/19-top-fonts-in-19-top-combinations/

http://www.typecon.com/

http://www.skillshare.com/classes/design/The-First-Steps-of-HandLettering-Concept-to-Sketch-Lettering-I/389616295?via=search

https://www.google.com/fonts

REVIEW QUESTIONS
1. Why is it important to use typographical pairings? How do I find
the right pairings?
2. What browser extension uses to run typography reports? What
kind of data does the plugin export?
3. What resource do you think is the best way to get started with
typography? Explain why.
4. How is typography implemented on a web page? List two ways of
doing this.
5. Why is typography important? How can it help you content-wise
with clients?