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.
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.
BEST BLOGS:
BEST BLOGS:
USE TYPE-O-MATIC
This a Firefox plugin for generating
typography reports on webpages.
USE TYPE-O-MATIC
This will run a report of all the fonts
on the page.
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:
ONLINE
COURSE
IMPLEMENTING FONTS
Direct styling
body{font-family:
Georgia,
Verdana, Arial;}
@font-face
External Links
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?