9 ms·
Design For Hackers: Why You Don't Use Garamond on The Web
- kadavy 16y agoIf you like what you see here, please consider voting for my SXSW panel. I'll be covering this and more, including proportion and color: http://panelpicker.sxsw.com/ideas/view/6261 http://panelpicker.sxsw.com/ideas/view/6261
- malbiniak 16y agoAlthough it might be a creative way to promote your panel, it earned a downvote. Just don't think it's the appropriate place to promote it.
- kadavy 16y agoCan you explain that further? Here's my logic: if you're in the comments on this thread, you're presumably interested in this topic, and would like to learn more about it -> Many HNers go to SXSW, and would get a chance to learn more, should my panel be accepted -> I'm not famous, so getting help from interested people is my only chance at getting a panel accepted.
- Nwallins 16y ago> Can you explain that further? Here's a stab: The culture here is such that comments are for the sake of the readers and not the writer. Some amount of self-promotion is fine, but too much is not appreciated.
- kadavy 16y ago"Too much" seems subjective to me. Additonally, I've spent thousands of hours over the course of a decade obsessing over design details and historical context. Then, I spend a week crafting a blog post to condense a piece of my knowledge for sharing. I then ask for an opportunity to spend hundreds of hours preparing a presentation to share more of my knowledge. Somehow this is self-serving? I don't need more (or more prestigious) clients. A SXSW badge is (relatively) inexpensive. I do all of this because I love to share knowledge. I understand what it's like to be turned off by shameless self-promotion, but sometimes a little perspective is called for.
- chrischen 16y agoDon't worry. The culture here has clearly upvoted you more! Please don't get turned off by the few negative people. Keep sharing.
- m_eiman 16y agoIt'd be hard to be more subtle when informing the readers that a) you've written the submitted article and b) you've got an upcoming event that might also be of interest to the readers.
- deleted 16y ago[deleted]
- malbiniak 16y agoHere's my logic: if you read the post, you already saw the plug (on the post). Edit: that sounds snarky. It's not intended to be, but just an explanation of why I downvoted. I can appreciate your later comment, but when I made my reply to your original comment, yours was the only other comment in the submission. It seemed tacky.
- crystalis 16y agoI read the post and completely missed the plug on the post. The color and offset put it squarely in my internet blind spot after years of untargeted annoying internet ads. I was surprised when I looked again to verify and saw that I had looked past it twice.
- deleted 16y ago[deleted]
- wwortiz 16y agoHmm that link doesn't work for me (get something about the website being offline) but I am curious about what your panel will be about, is it readability and how these things affect it or just design in general?
- kadavy 16y agoIt seems that the PanelPicker is down. Thanks for your interest. I plan to talk less about the technical aspects of design, but talk more about the classical principles that guide good design. This post is about the relationship between medium and form, but I also plan to talk about use of proportion, and color theory. However, I plan to have an open dialogue with those interested (through the Facebook Page), so I can tailor the presentation leading up to the event.
- edd 16y agoWhat this is actually saying is don't use Garamond for copy text as its not designed for current DPI's that are currently used on monitors. It doesn't mean you can't use it for titles or headings or devices with a high DPI.
- kadavy 16y agoCorrect. The poor display of Garamond for copy text is used as a vehicle to discuss the relationship between medium and form. Garamond will look just fine in very large type.
- zaidf 16y agoThanks for translating. I learned more from your comment than the post itself!
- sprout 16y agoIf you know your target's DPI, that doesn't sound to me like "the web."
- deleted 16y ago[deleted]
- sesqu 16y agoYou mean like this thing in CSS3? http://www.w3.org/TR/css3-mediaqueries/#resolution http://www.w3.org/TR/css3-mediaqueries/#resolution For an example of viewport CSS, take a look at http://news.ycombinator.com/item?id=1377241 http://news.ycombinator.com/item?id=1377241
- bigfudge 16y agoWhat does Garamond look like on an iphone 4?
- gchpaco 16y agoExceedingly legible on mine even at 7-8pt sizes, but I should note that I'm very accustomed to reading Garamond and may be inferring more. I know my first impression from the iPhone 4 was that it was blurry; I think this is because I could no longer see the pixels, which I had apparently been subtly keying off. It is definitely not blurry, but still sometimes disorients me.
- ybot 16y agoThe article mentions Google Font API and Typekit as sources of fonts online, but there's another option that's worth looking at: The Open Font Library (http://openfontlibrary.org/ http://openfontlibrary.org/) The fonts hosted there are free (both as in beer and as in freedom). It's interesting to see how they apply the concepts around free software to another medium, like fonts.
- stevelosh 16y agoAnother site with open source fonts is The League of Moveable Type: http://www.theleagueofmoveabletype.com/ http://www.theleagueofmoveabletype.com/ They only have a handful, but they're pretty much all high-quality.
- kadavy 16y agoThanks - these are beautiful!
- fredpeters 16y agoThe best place for free fonts I have found is (http://www.fontsquirrel.com/ http://www.fontsquirrel.com/). They also package them up as @font-face with all the variations needed. I would be warned though, font rendering varies so greatly, that unless you test extensively, most will not be good enough for anything but headings.
- jm3 16y agoFontSquirrel and The League both have some great faces that display very well in modern browsers. The Open Font Library guys appear to be struggling, however: http://skitch.com/jm3net/dt3cr/broken-font-library http://skitch.com/jm3net/dt3cr/broken-font-library [screenshot of the fonts not working in Chrome]
- faramarz 16y agoWhile we're on subject, I wanted to note that Helvetica makes a terrible body font. Please use Arial instead for your body, as it renders more clearly and reserve Helvetica for text above 13pt. KISSmetric uses Helvetica and a matching bg shadow blur for all of their body text, which makes my eyes bleed. Horrible practice. Avoid text-shadow for body.
- Sukotto 16y agoI would very much like a simple cheat-sheet of "standard" fonts and what range of sizes each looks best at with regards to webpages. Something that I can blindly follow when making the first draft of a site. Anyone want to share a link to such a thing?
- faramarz 16y agohttp://www.typetester.org http://www.typetester.org is a great resource for making comparisons. But I will try to put together a simple list of standard fonts and how to optimize them for the best results. Will shoot you an email when it's done.
- elbenshira 16y agoI'd love to see this once you're done. My email is my username @ gmail.com
- cfdrake 16y agoI'm also interested in this, and in case you don't mind sending it to me too: colin.f.drake -at- gmail Maybe you should also consider posting it? It seems like many people would appreciate it here!
- nhebb 16y agohttp://www.typetester.org http://www.typetester.org is a great resource for making comparisons. That's a great resource. It also highlights the futility of specifying alternate font families. I couldn't find any font family combination that looked good side by side using the same size, leading, tracking, etc.
- cheesey 16y agoDoes this problem still occur when you use even higher-resolution screens, like the "Retina" display?
- kadavy 16y agoI haven't had much experience viewing a Retina display, but since it displays at about 3x the resolution of a normal display (as mentioned in the post), fonts like Garamond should render much better on it.
- powrtoch 16y agoMore explicitly: most professional print documents are done at 300 dpi. Since retina is 326 ppi, it's safe to assume that if it looks alright on paper, it will look fine on retina. It's worth noting that it doesn't really matter though. Most iPhones are pre-retina, and this will be the case for at least several years. So I can't think of a medium where it's okay to assume this level of screen resolution. The author's point still holds.
- sp332 16y agoI think 300 DPI is for full-color prints. Black-and-white text is more like 1000-2000 DPI.
- kadavy 16y ago300 DPI is the resolution recommended for images that will be printed on offset printers (like, for a magazine). The text - if black - in these applications will be turned into crisp vectors, so the DPI is in effect limitless. I believe laser printers do print at something like 1200 DPI, like you're saying.
- zokier 16y agoAnyone who is using 12 px font in body text should be butchered imho. For reference 12 pt is approx 17 pixels in 100 PPI, and I think that even it is bit small for body text in web. Also, desktop display tech needs to advance. But meanwhile, yes, please test your font selections with different software and preferably hardware, and ensure that it stays readable. I think all these new tech allowing fancy typefaces has produced at least twice as many horribly unreadable sites than those it has improved.
- jonknee 16y agoHN is 12px font for me, I think that's the Chrome default. Looks fine to me.
- zokier 16y agoActually its 10 points (at least so it's defined in the CSS). But I wouldn't like to read any longer passages in this font size, and sometimes I zoom in even here to read more comfortably. But 12pt seems actually quite comfortable now that I tried it, so the part about it being too small can be redacted. But the main point was that I strongly disagree defining font sizes in pixels. What happens when somebody with 250 PPI display comes along and that 12 px font suddenly is 3.5 points?
- wmf 16y agoNote that a px is not the same thing as a pixel. On a 250 PPI display 1 px probably equals 2 pixels. http://webkit.org/blog/55/high-dpi-web-sites/ http://webkit.org/blog/55/high-dpi-web-sites/
- deleted 16y ago[deleted]
- blahedo 16y agoThis just makes me angry. The whole point of being able to specify in px was to have something that is actually specific to the device's pixels---otherwise you'd use points or inches or cm---for those rare instances where the pixel count is actually relevant. Of course, it got overused, but the answer should not be to just redefine "pixel" as "something a bit smaller than a point" (except in a bit more detail)! Argh.
- fuzz579 16y agoWas anybody else bothered by how every other sentance was in bold?
- mcantelon 16y agotldr: Screen resolution isn't fine enough to properly render Garamond.
- xanados 16y agoThe irony is that the font used in this article actually renders to be really unattractive on my Windows machine at work. I've always noticed that they use this font at BusinessWeek online, and it's always bugged me, personally. It looks like someone took a notch out of each of the letters or something. It looks a lot better on my Mac. Screenshot on Windows: http://imgur.com/hWzXN.png http://imgur.com/hWzXN.png
- yason 16y agoThe first line in my userContent.css is: * { font-family: helvetica !important; font-size: 18px !important; text-decoration: none !important; line-height: 105% !important; } This has really kept me from bothering which fonts look bad on the screen and why. For years. I would love to have a few basic, classic fonts used on my display but currently a carefully selected sans-serif font such as Helvetica is required for pleasurable web experience. Times and Garamond come to mind, I love them on print. The Helvetica I have is actually a real Helvetica that I grabbed from some odd place several odd years ago and stashed for my personal use.