TYL

B
DA
I
E I SY V

WY: LE
B

R
G
O
P

H
P

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 multipage 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. Research.
2. See how its done in the field.
3. Use Type-o-matic.
4. Ask the pros.
5. 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 didnt 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-OMATIC
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-OMATIC

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 self-paced, and is
available for as long as you need.
You can even ask the instructor
for help and guidance.

IMPLEMENTING FONTS

(Fonts are all styled with

CSS.)

Direct
styling

Used for the

main fonts on
most
computers.
body{fontfamily:
Georgia,
Verdana,
Arial;}

@font-face

Best for fonts

you know others
wont have on
their computer.
@font-face{
font-family:
name;
src:url(name.wo
ff);}

External Links

Best for importing

a font from an
external webpage,
like Google.
<link
href='http://fonts.
googleapis.com/cs
s?family=Gafata'
rel='stylesheet'
type='text/css'>

SOURCES

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

http://www.smashingmagazine.com/2013/08/06/beautiful-ty
pography-web-design/
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-o
f-Hand-Lettering-Concept-to-Sketch-Lettering-I/389616295?v
ia=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?