Design For Hackers: Why You Don't Use Garamond on The Web | Hacker News Reader

Design For Hackers: Why You Don't Use Garamond on The Web

kadavy.net

224 pointskadavy65 comments

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

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

Thanks for translating. I learned more from your comment than the post itself!

If you know your target's DPI, that doesn't sound to me like "the web."

What does Garamond look like on an iphone 4?

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

I'd like to also add that with the advent of resolution independent displays (such as seen in the current generation of mobile devices) such limitations like this will slowly fade away; although this most likely won't happen for a while in the desktop world (there's more of a demand for size of display than resolution of a display currently, and most operating systems don't have great support for resolution independence as it is [somewhat untrue for fonts oddly, as the kerning algorithms make use of subpixel resolution, but most UI's are pixel/raster based at only one resolution]).

If 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

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

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

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

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

Don't worry. The culture here has clearly upvoted you more! Please don't get turned off by the few negative people. Keep sharing.

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

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

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

Hmm 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?

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

The 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/)

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.

Another site with open source fonts is The League of Moveable Type: http://www.theleagueofmoveabletype.com/

They only have a handful, but they're pretty much all high-quality.

Thanks - these are beautiful!

The best place for free fonts I have found is (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.

FontSquirrel 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 [screenshot of the fonts not working in Chrome]

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

HN is 12px font for me, I think that's the Chrome default. Looks fine to me.

Actually 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?

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

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

I may be reading it wrong, but it sounds like a px is a pixel—until you zoom in. If you define a web page’s default font size as 12px, and it stayed at that no matter how much you zoomed in, it wouldn’t be much of a zoom feature, would it?

That would be reasonable, but the CSS standard says:

"If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values."

It then goes on to define a "reference pixel" in terms of arclength subtended within the user's field of vision. On reflection, I suppose this is sufficiently different from pt/in/cm (which measure absolute length) to merit its own separate measure; I just wish they hadn't used the term "pixel" for it. Because "pixel" already means something else and the arclength subtended by a pixel in a "typical computer display" has changed considerably over the last twenty years.

Actually, rescaling pixels is part of the CSS specification:

     If the pixel density of the output device is very 
     different from that of a typical computer display, the 
     user agent should rescale pixel values. [...]
     It is recommended that the reference pixel be [...] one 
     pixel on a device with a pixel density of 96dpi

http://www.w3.org/TR/CSS21/syndata.html#length-units

Agreed. There's a reason Safari's "Reader" feature displays body text as 18px.

I find myself using Reader and/or hitting Cmd+Plus on far too many sites these days.

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

I 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?

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.

I'd love to see this once you're done. My email is my username @ gmail.com

I'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!

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.

I'm would also be interested in this email, if it's not too much trouble. My email is on my profile page.

Since there's so many of us interested, can you just submit it to HN and email us the link? I'm sure the resulting discussion would also be helpful.

There are lots of links, and a lot of them are crap (for example, most suggest garamond and helvetica).

Here are my suggestions:

    sans: "font-family: Arial, Verdana, Tahoma, sans-serif;"
    serif: "font-family: Georgia, 'Times New Roman', Times, serif;"
    mono: "font-family: 'Courier New', Monaco, monospace;"

Always remember to put the generic font type ('sans-serif', 'serif', 'monospace') at the end so browsers have something default to fall back on in all cases. For example, most linux distributions have a good monospace font defaulted, so you don't even need to try to guess a font (though 'Bitstream Vera Sans Mono' and 'DejaVu Sans Mono' are not bad guesses) there.

Personally I try to avoid putting Verdana or Georgia as backup fonts (In practice, the stacks you've listed are fine because almost no one will not have Arial installed, but by that logic you could leave out Verdana altogether). In principle, if we're imagining a situation where Arial isn't an option, falling back to Verdana will usually look pretty crazy, because Verdana is designed to appear so much larger. 12px Verdana just looks a lot bigger than 12px Arial. All this (including the part about it not mattering in practice) goes for Georgia (vs Times etc) as well.

Anyone that doesn't have Arial installed almost certainly won't have Verdana installed anyway. Helvetica would be a more logical fallback for those people who hate Arial so much they won't have it on their system...

Ye gods, please no more Courier New! Maybe, just maybe if you're trying to reproduce 1950s police reports or something, but there's so many much nicer monspaced fonts available these days. I'd start with:

    "Consolas", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace

...but you might want to include Andale Mono, Droid Sans Mono, Inconsolata, Lucida Console or Monaco as well.

I love Consolas, but really if your visitors are not on Vista/Windows 7 it's unlikely they will have it.

EDIT: I believe there is a large population of folks that don't like ClearType hinted fonts. Consolas looks absolutely horrible unless you have ClearType on and tuned. I can't speak to Consolas on any Linux-based OS as I've never tried it.

I don't like it either, but people are used to it and it serves its purpose. You can put it after 'mono' if you like.

I've found this useful: http://www.slideshare.net/jeff_croft/beautiful-layouts-throu... as well as this: http://www.alistapart.com/articles/settingtypeontheweb/

13pt font at 72dpi is actually a pretty decent body font size, and helvetica renders not altogether horribly with these settings, so it's a reasonable choice for designers testing only on macs.

That said, yes world, please don't use Helvetica for body font, most people don't even have a good version of the font, and plenty of renderers butcher its kerning, anti-aliasing (especially with versions of the font without good hints, or with renderers that ignore them), and even its baseline.

I have a question on this Helvetica issue actually.

It's common knowledge that Helvetica is a better font than Arial, plain and simple. The issue is just that Arial is somehow optimized for screen display (hinting or whatever), whereas most or many Helvetica versions aren't. At least, that's my understanding, correct me if I'm wrong.

I've always suspected you could get around this handicap this way:

font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;

That is, only use Helvetica if they've got the updated version Adobe has put out, otherwise prefer Arial. I know Helvetica Neue technically was created before the rise of the web, but for some reason I expect it would render better. I've never had a PC that had the font installed though, so I've been unable to test this.

Helvetica is a better font, only when it comes to print/signage or Heading H1/H2/H3 on the screen.

Otherwise it becomes unbearable to read at standard body font size 11-13pt. See here http://trevordavis.net/play/helvetica/

Unfortunately for windows users, they don't get the pre-loaded collection and because the font isn't free, most people settle for downloading either one version/style as demo-copy or modified version of it. This is problematic because the CSS still recognizes that you have Helvetica and doesn't fall back to Arial.

Right, this is what I was acknowledging. The question was whether Helvetica Neue might render better than ordinary Helvetica.

I would think so. But you'd have to import the font remotely and not depend on the local hierarchy for everyone to take advantage of that. Otherwise we're back to square one with the windows users left out.

Typekit is the solution to that if you're willing to pay. I doubt open libraries will ever carry Helvetica. It costs too much. :P

Or worse - you get Helvetica bundled with HP print drivers, that is unsuitable for any kind of screen reading.

My experience has been that the Helvetica Neue shipped with OS X is better-adapted to on-screen rendering than the version available for print and graphic design from Adobe.

Helvetica Neue isn't that much better than Helvetica for the screen at small sizes. It is fantastic at larger sizes in lighter weights (I swoon for Helvetica Neue Light)

Was anybody else bothered by how every other sentance was in bold?

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

The 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

Does this problem still occur when you use even higher-resolution screens, like the "Retina" display?

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

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

I think 300 DPI is for full-color prints. Black-and-white text is more like 1000-2000 DPI.

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

tldr: Screen resolution isn't fine enough to properly render Garamond.

Reply on news.ycombinator.com