
Ask HN: Typography—How? - lukeqsee
Beautiful websites nearly all share one common characteristic: amazing typography. I want to make beautiful sites, so I set out to learn typography, only to find it difficult to find quality resources.<p>If I wanted to learn a new programming language, I'd find a project and start hacking—is that a good method for typography? Should I look for classes/books/paid sites to teach me?<p>What do you HNers recommend to learn typography?
======
arkitaip
IMHO you first need to understand design, its various sub fields (i.e.
typography, colors, layout), user experience design/interaction
design/usability, and finally how all of this applies to the web. You can
learn the basics by reading books but the only way to truly understand and
master is by study this things in the world and by practicing them. Start
thinking about design, analyze it in your daily life, do your own makeovers of
sites you use, design a blog theme, etc, etc.

As for web typography, you want to check of the latest generation of font
embedding because that's where the real magic's at. The most known web font
solutions are: CSS3 (font-face), typeface.js, cufon, flir, sifr, Google Font
API, Typekit.

 _Here's a list of quality books on design and typography:_

    
    
        A History of Graphic Design
        Before & After Page Design
        Designing Brand Identity
        Emotional Design: Why We Love (or Hate) Everyday Things
        Graphic Design Solutions
        How Designers Think
        Information Dashboard Design: The Effective Visual Communication of Data
        Making and Breaking the Grid: A Graphic Design Layout Workshop 
        The Complete Manual of Typography
        The Designer's Guide to Color Combinations
        The Elements of Graphic Design: Space, Unity, Page Architecture, and Type
        The Elements of Typographic Style
        The New Typography
        The Visual Display of Quantitative Information
        Thinking with Type: A Primer for Designers
        Typography Workbook: A Real-World Guide to Using Type in Graphic Design 
    	

_Books on web design:_

    
    
        About Face 3: The Essentials of Interaction Design
        Ambient Findability: What We Find Changes Who We Become  
        Bulletproof Web Design
        Cascading Style Sheets: The Definitive Guide
        Designing Web Usability
        Designing With Web Standards
        Designing the Obvious: A Common Sense Approach to Web Application Design
        Designing the User Interface: Strategies for Effective Human-Computer Interaction
        Don't Make Me Think: A Common Sense Approach to Web Usability
        Homepage Usability: 50 Websites Deconstructed
        Information Architecture for the World Wide Web: Designing Large-Scale Web Sites
        Information Architecture: Blueprints for the Web  
        Interaction Design: Beyond Human-Computer Interaction
        Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems
        The Essential Guide to User Interface Design
        The Inmates Are Running the Asylum
        Thoughtful Interaction Design: A Design Perspective on Information Technology
        Web Form Design: Filling in the Blanks

~~~
lukeqsee
The book list in readable format:

    
    
        Before & After Page Design
        Typography Workbook: A Real-World Guide to Using Type in Graphic Design
        Thinking with Type: A Primer for Designers
        How Designers Think
        Information Dashboard Design: The Effective Visual Communication of Data
        Making and Breaking the Grid: A Graphic Design Layout Workshop
        The Designer's Guide to Color Combinations
        Emotional Design: Why We Love (or Hate) Everyday Things
        The New Typography

~~~
arkitaip
Fixed the original list. Had to look up HN's markdown syntax.

------
mezdef
The most immediate difference I noticed in design school was a Typography
assignment. We were tasked with going out and looking at all kinds of signs
and identifying what fonts the signs used. We had to collect 10 examples of
each style of font (Sans, Serif, Slab, Transitional, Display, etc) and then
identify the font and give critical analysis on each. How readable was the
sign, did it convey the right message, was it appropriate for the brand /
message, who was the target audience etc. etc.

This was a great exercise as it's something you can do as you walk about, or
in your case, you can apply it to websites in much the same way. It gets you
in the right frame of mind. By constantly being on the lookout, it starts to
become ingrained, and you can start to identify fonts automatically. You judge
what you like and dislike and what you would change to achieve a desired
effect.

As with many things, critical constructive thinking is the key. And
perseverance.

------
brianwillis
Go read _Thinking with Type_ by Ellen Lupton [http://www.amazon.com/Thinking-
Type-2nd-revised-expanded/dp/...](http://www.amazon.com/Thinking-Type-2nd-
revised-expanded/dp/1568989695/)

Then go and get a Typekit account <http://typekit.com/> and start
experimenting.

Good design (any kind of design, not just web design) requires time and
iteration. It's a skill, you have to practise it.

------
makeramen
for a great quick and dirty: <http://www.typographyforlawyers.com/>

for long term understanding, it's just like any other skill/trade/art: keep
researching, learning, searching, finding inspiration, figuring out what you
don't know, so you know what you want to learn next, and if it's worth
learning.

you can "start hacking" by mimicking (copying) certain styles, seeing how they
work, analyzing their advantages and disadvantages in different situations
(just like different programming languages)... etc.

I think you're already way ahead of the crowd just by knowing how important
typography is to the successful design of site, best of luck.

------
aba_sababa
These kinds of things can't be taught with the kind of discreteness that I
think you'd like. You need that design sense first and foremost; once you have
that, you can sniff out the fonts that suit your design. The best way to get
that "sense" is just to copy what you love - go find the most beautiful site
you can and gratuitously steal design ideas. Do this until you can create by
yourself.

Or, just use Helvetica with big sizes and good contrast.

------
uzish
Great question. The web being text oriented - I believe that typography is one
of the most important aspects of a great website (visualization being the
other).

If there's one seminal book - that would be The Elements of Typographic Style:
[http://www.amazon.com/Elements-Typographic-Style-Robert-
Brin...](http://www.amazon.com/Elements-Typographic-Style-Robert-
Bringhurst/dp/0881791326)

That's a deep dive into it though. If you're looking for a shortcut you can
get a quick hold of them here: [http://www.amazon.com/Fundamentals-Typography-
Gavin-Ambrose/...](http://www.amazon.com/Fundamentals-Typography-Gavin-
Ambrose/dp/2940373450)

At Future Simple (<http://www.futuresimple.com>) we think about that a lot,
sometimes agonizing over it. We still have a lot of work to do :) - as any
designer will tell you - we are never satisfied with our work...

------
westiseast
It's a bit flaky, but I think that most fonts have a 'sweet spot' when
presented on the web. For example, personally I think Georgia is great @13px
or larger @60px but in between, it sucks. So try to pay attention to finding
the right size for each font.

But I agree with aba_sababa - you can learn specific technical details about
fonts and typography in books, but an overall sense for good design has to be
assimilated over time. So, when you see sites that you like, use Firebug and
copy their font settings. Or if you see a site that has crappy typography (eg.
Hackernews) then use firebug and try to fix it.

------
pasbesoin
Maybe this isn't practical for you, and it's been a couple of decades since I
read it, but I still have a fondness for Knuth's "The TeX Book". It's about
TeX, but along the way, Knuth gives you a lot of background on publishing
including typography. I also recall it as being one of those technical books
that is fun to read -- truly engaging and interesting.

<http://www-cs-faculty.stanford.edu/~uno/abcde.html>

------
garrickvanburen
I recommend 1 book on typography: Stop Stealing Sheep & Find out How Type
Works [http://www.amazon.com/Stop-Stealing-Sheep-Find-
Works/dp/0201...](http://www.amazon.com/Stop-Stealing-Sheep-Find-
Works/dp/0201703394)

I'd recommend checking out OpenFontLibrary.org & Kernest.com (shameless plug)
for you can download the fonts, use them, and understand how they work in all
the work you do - not just web browsers.

------
GiraffeNecktie
By all means learn typography, but always remember that not everyone is going
to experience your site the same way. People with less than perfect
vision(there's more of them than you might think!) will often change their
browser defaults to enlarge the text. Some people use screen readers. And a
few people will alter your design with their own custom CSS.

------
Ben_Dean
+1 for Bringhurst, definitely. Plus, when you meet a cute designer somewhere,
he or she will be impressed when you drop that name.

------
chr15
Anatomy of a Typeface: <http://typedia.com/learn/only/anatomy-of-a-typeface/>

Typeface Classifications: <http://typedia.com/learn/only/typeface-
classifications/>

------
gspyrou
You may check this presentation from MIX11 "Fonts, Form and Function: A Primer
on Digital Typography" <http://channel9.msdn.com/Events/MIX/MIX11/EXT02>

------
tastefulwords
Some great books in arkitaip's comment.

But start with this one: "The Non-Designer's Design Book" -- it'll teach you
how much of "great design" is "great typography".

------
karanbhangui
<http://www.webtypography.net/>

check out this ebook

