Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Ask HN: Typography—How?
30 points by lukeqsee on May 13, 2011 | hide | past | favorite | 18 comments
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.

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?

What do you HNers recommend to learn typography?



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


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


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


I don't think an alphabetical sort is appropriate in this context, since it wouldn't make sense to consider reading them in that order. I personally would put Bringhurst's book at the very top.


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.


Go read Thinking with Type by Ellen Lupton http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/...

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.


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.


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.


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...

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/...

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...


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.


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


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...

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.


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.


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


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

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


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


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".


http://www.webtypography.net/

check out this ebook




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: