

Design For Hackers: Why You Don't Use Garamond on The Web - kadavy
http://www.kadavy.net/blog/posts/design-for-hackers-why-you-dont-use-garamond-on-the-web/

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

~~~
bigfudge
What does Garamond look like on an iphone 4?

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

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

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

~~~
kadavy
Thanks - these are beautiful!

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

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

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

~~~
Nwallins
> _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
"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
Don't worry. The culture here has clearly upvoted you more! Please don't get
turned off by the few negative people. Keep sharing.

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

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

~~~
zokier
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?

~~~
wmf
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/>

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

~~~
imd
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?

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

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

~~~
Sukotto
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?

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

~~~
cfdrake
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!

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

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

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

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

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

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

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

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

