Ask HN: Typography—How?
15 comments
+1 for Bringhurst, definitely. Plus, when you meet a cute designer somewhere, he or she will be impressed when you drop that name.
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.
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.
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:
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
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 BlanksThe 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 TypographyFixed 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.
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.
Or, just use Helvetica with big sizes and good contrast.
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.
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
http://www-cs-faculty.stanford.edu/~uno/abcde.html
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.
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.
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.
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.
Anatomy of a Typeface: http://typedia.com/learn/only/anatomy-of-a-typeface/
Typeface Classifications: http://typedia.com/learn/only/typeface-classifications/
Typeface Classifications: http://typedia.com/learn/only/typeface-classifications/
http://www.webtypography.net/
check out this ebook
check out this ebook
You may check this presentation from MIX11 "Fonts, Form and Function: A Primer on Digital Typography" http://channel9.msdn.com/Events/MIX/MIX11/EXT02
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.
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.
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".
But start with this one: "The Non-Designer's Design Book" -- it'll teach you how much of "great design" is "great typography".
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.
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...
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...
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?