5 ms·

Ask HN: Typography—How?

• brianwillis 15y ago
  Go read Thinking with Type by Ellen Lupton http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695/ http://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/... Then go and get a Typekit account http://typekit.com/ 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.
• arkitaip 15y ago
  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 15y ago
    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 15y ago
      Fixed the original list. Had to look up HN's markdown syntax.
  • cemregr 15y ago
    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.
• aba_sababa 15y ago
  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.
• westiseast 15y ago
  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 15y ago
  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
• mezdef 15y ago
  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.
• garrickvanburen 15y ago
  I recommend 1 book on typography: Stop Stealing Sheep & Find out How Type Works http://www.amazon.com/Stop-Stealing-Sheep-Find-Works/dp/0201703394 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.
• chr15 15y ago
  Anatomy of a Typeface: http://typedia.com/learn/only/anatomy-of-a-typeface/ http://typedia.com/learn/only/anatomy-of-a-typeface/ Typeface Classifications: http://typedia.com/learn/only/typeface-classifications/ http://typedia.com/learn/only/typeface-classifications/
• karanbhangui 15y ago
  http://www.webtypography.net/ http://www.webtypography.net/ check out this ebook
• gspyrou 15y ago
  You may check this presentation from MIX11 "Fonts, Form and Function: A Primer on Digital Typography" http://channel9.msdn.com/Events/MIX/MIX11/EXT02 http://channel9.msdn.com/Events/MIX/MIX11/EXT02
• makeramen 15y ago
  for a great quick and dirty: http://www.typographyforlawyers.com/ 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.
• tastefulwords 15y ago
  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".
• GiraffeNecktie 15y ago
  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.
• uzish 15y ago
  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-Bringhurst/dp/0881791326 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/dp/2940373450 http://www.amazon.com/Fundamentals-Typography-Gavin-Ambrose/... At Future Simple (http://www.futuresimple.com 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...
• Ben_Dean 15y ago
  +1 for Bringhurst, definitely. Plus, when you meet a cute designer somewhere, he or she will be impressed when you drop that name.