[HN Gopher] Garamond is not a good font to use in web copy (2010)
___________________________________________________________________
Garamond is not a good font to use in web copy (2010)
Author : susam
Score : 68 points
Date : 2021-05-25 11:37 UTC (1 days ago)
(HTM) web link (designforhackers.com)
(TXT) w3m dump (designforhackers.com)
| hnbad wrote:
| (2011)
|
| While the archive.org snapshots only go back to 2019, this is
| basically word-for-word from his 2011 book, which had a chapter
| with the same title. As others have commented, the advice doesn't
| necessarily hold true with high DPI displays anymore.
| twobitshifter wrote:
| * The author mentions higher dpi displays, so maybe this is null
| and void now. Is 96 dpi still what we should use for the average
| user?
|
| * I liked the idea of pixel fonts (developed for the material of
| pixels), are these set for 96 dpi or always lower for aesthetics?
|
| * I found a repository with 3 pixel optimized fonts, including
| Garamond, open sans, and special elite.
| https://github.com/teryror/pixel-fonts
| arp242 wrote:
| > The author mentions higher dpi displays, so maybe this is
| null and void now. Is 96 dpi still what we should use for the
| average user?
|
| My 15" laptop I'm typing this now at 1920x1080 is ~150 DPI. The
| same resolution at 22" (a normal screen size) is 100 DPI. The
| author talks about 100 DPI for "the cheap Dell monitor I'm
| typing this" and 115 DPI for their laptop. So DPI hasn't
| improved all that much it seems, at least for computer screens.
|
| Looking at the stats for my weblog, about 40% use a low-DPI
| (<150 DPI) screen. The rest are >HD or mobile. This is heavily
| skewed towards programmer/IT people, who probably have better
| screens than average.
|
| So personally, I'd say that designing for 96 DPI is still a
| good default.
| [deleted]
| jmull wrote:
| It looks like this article is from about 10 years ago (if there's
| a date, I missed it), and the author's point is that displays
| generally can't render Garamond very well.
|
| Interestingly, the author notes the high ppi of the iPhone 4 and
| wonders if Garamond might be a good choice in the future...
| which, more or less, is now.
| WA wrote:
| You're on to something here "primaryImageOfPa
| ge":{"@id":"https://designforhackers.com/blog/garamond/#primary
| image"},"datePublished":"2010-08-12T18:54:48+00:00","dateModifi
| ed":"2017-11-13T03:20:03+00:00"
| sebmellen wrote:
| For me, it was the "Adobe Flash Player is no longer
| supported" message that gave it away.
| flobosg wrote:
| Also: <meta property="article:published_time"
| content="2010-08-12T18:54:48+00:00" /> <meta
| property="article:modified_time"
| content="2017-11-13T03:20:03+00:00" />
| patorjk wrote:
| "(2010)" should probably be added to this post's title. It's
| a shame SEO optimization has led to publishers removing dates
| from blog posts. It's a real detriment to readers.
| Eric_WVGG wrote:
| Curiously, it is still nearly impossible to buy an external
| display with "retina grade" resolution. (The only one on the
| market is the LG Ultrafine and I'm looking at one right now...
| don't get me started on this fucking dog.) And while laptops
| are certainly much more popular than desktops, retina grade
| displays are still an option for most non-Apple computers.
|
| So yeah, we haven't dug ourselves out of this hole yet.
| shantanujoshi wrote:
| Underrated comment this is the bane of my existence. I can
| definitely see pixels on 4k 27". 4k @ 27 inches is a measly
| 163ppi. Lg 5k is closer at 217ppi. Meanwhile the iphone 12
| pro is at 460ppi. Higher PPI means more distinguishable
| smaller screen items allowing you to move the screen closer
| (imagine 10-12inch viewing distance instead of 24...) all of
| which leads to way more effective screen real-estate imo
| TwoBit wrote:
| What is your definition of "retina grade"?
| mixmastamyk wrote:
| 200+ dpi at arm's length.
| q-big wrote:
| In other words: defined in a way so that Apple's displays
| are retina grade, but others are not.
| Spivak wrote:
| I mean this is just saying a normal laptop screen that's
| 200+dpi. Nothing else fancy here because the further away
| you are from the screen the easier it gets to achieve the
| "can't see the dots" effect."
| mixmastamyk wrote:
| I have two Dell 4k monitors which are about that dpi.
| HPsquared wrote:
| What's the definition of "Retina grade"? Surely the eyes
| ability to distinguish pixels depends on how far the screen
| is.
|
| An average 4K TV at a typical viewing distance is going to be
| impossible to distinguish the pixels. Same with a typical 4K
| monitor, depending on the size and viewing distance.
|
| EDIT: A 27" 4K display at 60 cm viewing distance (53deg
| horizontal FoV) has 73 pixels per degree (ppd).
|
| A Retina equivalent display is anything above 60 ppd (i.e. 1
| arcminute per pixel) as far as I can tell.
|
| Calculator here: https://qasimk.io/screen-ppd/
| antris wrote:
| When the pixels are so dense, that using the monitor at its
| typical viewing distance makes pixels indistinguishable.
| But not just in the sense that you cannot see that your
| view is pixelated, rather in the sense that packing the
| pixels any denser wouldn't make a difference.
|
| Quality desktop monitors viewed at their typical distance
| do not look pixelated, e.g. you rarely are able to see
| individual pixels especially if proper antialiasing is
| used, but they do still almost always have a lack of
| sharpness that could be corrected with a denser display.
|
| On retina smartphones, making the pixels denser wouldn't
| make the image look any sharper from a typical viewing
| distance. Once you achieve that, I'd say it's "retina-
| grade".
| def_true_false wrote:
| _> On retina smartphones, making the pixels denser wouldn
| 't make the image look any sharper from a typical viewing
| distance._
|
| If that were true, there would be no reason for Apple to
| switch from 326ppi to whatever they use now for new
| phones. The real point where this stops making a
| difference is likely somewhere much higher, just like
| with framerates. That doesn't mesh well with their luxury
| electronics marketing narrative, though.
| antris wrote:
| Yeah, and digital camera manufacturers aren't adding
| megapixels for nothing and processor makers don't chase
| higher clock speeds for nothing, right? Because why would
| they keep adding pixels and increasing the clock
| frequency just to make the tech numbers look more
| impressive in order to sell more electronics? Yes, sounds
| pretty ridiculous.
|
| Now of course, maybe the new retina screens appear
| slightly sharper if you have exceptionally good eyesight,
| but I have long ago stopped seeing any improvement in
| sharpness of smart phone displays. The screens _do_ look
| better in terms of better colours, contrast etc, but at a
| typical distance with an individual with normal eyesight,
| adding more pixels does pretty much nothing at this
| point.
| jjeaff wrote:
| Ya, why would Tesla make a car that can go 0-60 in 2
| seconds if that wasn't a noticeable improvement in
| usefulness?
| deergomoo wrote:
| The issue mainly stems from the way macOS does UI scaling.
|
| To get UI elements the right physical size for a 27" 4K
| screen it would render to a 5120x2880 (i.e. 2560x1440@2x)
| framebuffer then do a non-integer scale back down to 4K.
| Sharper than 2560x1440 to be sure, but you can notice the
| blurring it introduces.
|
| Basically all large hi-DPI monitors for Macs are a
| compromise except the Pro Display, which is like $5000.
| tshaddox wrote:
| The problem with a 4K display is that if you run it at a
| pixel ratio of 2, you're only getting effectively the
| screen real estate of a 1080p display. For me, the
| difference between the real estate of 1080p vs. 1440p is
| significant, but to get 1440p of real estate at a pixel
| ratio of 2 you need a 5K display.
|
| For programming work I'm currently using one of those
| ultrawide 3440x1440 monitors, which is just a wider version
| of 1440p (which is 2560x1440). My ideal monitor at the
| moment would be this 3440x1440 monitor but with a pixel
| ratio of 2. This should be relatively feasible for
| reasonably-spec'd machines to drive and to manufacture (it
| would still be significantly fewer pixels than an 8K
| display), but AFAIK nothing like this exists on the market.
| jjeaff wrote:
| On my windows 10 systems, I set scaling to 150%. Is that
| not an option with other OSs?
| mywittyname wrote:
| OSX does this too, but instead of a % scale, scaling
| slider has detents for "look like" a different, standard
| resolution. I.e., native is 3072x1920 but it is scaled to
| look like 2048x1280
| samatman wrote:
| I've got something that's most of the way there and imho
| quite adequate: a 5k2k, at 5120x2160.
|
| So that's a 1080p widescreen at a pixel ratio of 2, and
| maybe it's because my eyes aren't as young as they were,
| but that's perfect for me. Certainly renders any font I
| throw at it as crisp as you please.
|
| It's the MSI Prestige, if you're curious.
| formerly_proven wrote:
| Unfortunately, 5K 27" displays went nowhere. Around 5-6
| years ago I was hoping for that to become the standard
| resolution for 27", instead of UHD (billo 4K), but alas.
| I believe that one LG display is literally the only 5K
| 27" display on the market now. And that's of course a 60
| Hz panel, like all other 5K 27" have been, and it's an LG
| IPS on top, so not exactly the best image quality you can
| imagine.
| mywittyname wrote:
| Most laptops are not capable of pushing 5K for external
| displays. Even my '18 MBP can't handle a 4k monitor at
| 60Hz (at least, I couldn't get it to work).
|
| So the market for these is limited to people with desktop
| workstations or pretty high-end laptops. Which is
| probably why they aren't going anywhere.
| tshaddox wrote:
| That was my hope as well. I thought Apple's manufacturing
| scale would make the displays common. I still have one of
| the early 27" 5K iMacs and I'm sad that I can't just use
| it as an external monitor. I've heard nothing but bad
| things about the LG 5K display, and it's pretty nutty
| that it costs like 75% what a new 27" iMac costs.
| kayodelycaon wrote:
| I have an LG Ultrafine and an LG 24UD58-B.
| https://www.lg.com/us/monitors/lg-24UD58-B-4k-uhd-led-
| monito...
|
| The 24UD58-B isn't quite as good, but for $300, it's a lot
| cheaper than $700.
| def_true_false wrote:
| There is a number of 28, 27 and 24 inch 3840x2160 panels, so
| the LG is certainly not the only one.
| Eric_WVGG wrote:
| That's nowhere close to retina grade for a 27" display. The
| LG I cited is 5120x2880.
|
| http://tools.rodrigopolo.com/display_calc/
| andrewingram wrote:
| 3840x2160 really needs to be no larger than 24 inch if you
| want to be able to argue that it's retina grade; that's why
| the LG ones sold by Apple were 4k@24" and 5k@27", the same
| as their iMac displays.
|
| I have 4k monitors at 27 inch because I prefer the
| magnification faction, but I can see the individual pixels.
| def_true_false wrote:
| That depends entirely on how far away you sit. There are
| also ~32 inch ones that are 8K.
|
| Given the cost of these things, it might be more feasible
| to just sit further away and use a bunch of the 4K ones.
| dhosek wrote:
| It's worth noting that pure PPI isn't a good predictor of being
| able to render pre-digital designs well. Hermann Zapf's Optima is
| the classic example of this. It was one of the first Type 1 fonts
| released from Adobe/Linotype back in the 80s and was an immediate
| disappointment at anything less than 1200ppi because the subtle
| aspects of the design were lost in the digitization process. A
| renewed digital recut of the typeface might resolve some of the
| issues, but the consensus at the time was that 300ppi was nowhere
| near enough to properly render Optima's design.
| merricksb wrote:
| Original HN discussion from 2010:
|
| https://news.ycombinator.com/item?id=1598513
| Tagbert wrote:
| It would have been nice if that article had set some text in
| Garamond so that we could see how it looks on our displays.
| Images of individual letters do not get the idea across.
| rvz wrote:
| I am going to definitely use Garamond on the web.
| swiley wrote:
| IIRC that would require paying a license fee (which is one of
| the reasons it's not a popular font outside of weird situations
| like courts.)
| aendruk wrote:
| Georg Mayr-Duffner's _EB Garamond_ [1] and Octavio Pardo's
| fork _EB Garamond 12_ [2] are excellent, both OFL-1.1.
|
| [1] https://github.com/georgd/EB-Garamond
|
| [2] https://github.com/octaviopardo/EBGaramond12
| bilater wrote:
| Garamond is available on Google Fonts with an Open License: h
| ttps://fonts.google.com/specimen/EB+Garamond?query=garamond..
| .
| rcarmo wrote:
| ...which is why I've settled on Georgia. You get the readability
| of serifs and enough curves to make it pleasing. Garamond (and
| Palatino) have always had weird hinting on displays.
| marvindanig wrote:
| Ugh. This is an outdated article. Modern day displays are crisp
| enough to render sophisticated serif typefaces.
|
| For example, this book [1] on the web uses EB Garamond [2] to
| present the content:
|
| [1] https://bubblin.io/book/a-108-verses-of-the-gita-by-swami-
| bi...
|
| [2] https://fonts.google.com/specimen/EB+Garamond
|
| [3] https://fonts.google.com/specimen/Cormorant+Garamond
| asiachick wrote:
| Is it possible you're under estimating the number of lo-dpi
| devices? AFAIK most windows laptops are still lo-dpi
| marvindanig wrote:
| Likely! The data that I relied on for my research last year
| covered the North American and European regions and that
| automatically skews in favor of modern displays.
|
| Thankfully with Windows too, the lo-dpi market is shrinking.
| But I'm not sure for what percentage of folks this article
| would still hold its value until a few more years.
| dragonwriter wrote:
| > For example, this book [1] on the web uses EB Garamond [2] to
| present the content:
|
| It does, but I wouldn't agree that that is a good choice
| (though the body font is far from the worst typographic choice
| in that work.)
| spystath wrote:
| I don't think high-DPI screens are as commonplace as it is
| continuously being repeated here. The only relatively common
| high-DPI screens are on the macbooks and higher end 13/14"
| laptops (250-300 ppi). If you move away from laptops and on
| desktop-sized screens (25-27") ppi quickly plummets. A common
| market monitor size/resolution combination is 27" at 4k
| resolution. This is roughly 160 ppi, although better than 1080p
| ~100 ppi screens is still nowhere near the pixel density of a
| macbook. So even on 4k screens the legibility of a heavily-
| serifed font such as Garamond is questioned. There is probably
| ONE desktop monitor with >250 ppi I can readily find* (Dell
| UP3218K) and that's almost $4k !! I'd say the author's argument
| still stands for anyone not on a ~$>=1.5k laptop. It's the same
| story as "we don't need subpixel antialiasing any more". Yes
| it's an ugly hack and yes you definitely don't need it on 300
| ppi screen. Fonts are still going to look fuzzy on anything
| else.
|
| [*] In the UK:
| https://uk.pcpartpicker.com/products/monitor/#r=768004320,57...
| leephillips wrote:
| ... or on my 2013 Google Chromebook Pixel, 240 ppi. You can
| sometimes find them for about $200 on Amazon.
|
| On a larger external monitor, I'm not sure you should
| directly compare the resolution, because you view them from a
| longer distance. So a smaller resolution would be optically
| equivalent to a higher resolution on a laptop. This is the
| reason you need even higher resolutions on phones, as we view
| them from even shorter distances.
| HPsquared wrote:
| Large displays are usually further away than laptop screens,
| in fact that's the main benefit of them - you can have a lot
| of clear desk space.
| marvindanig wrote:
| You're limiting the scope of ppi to desktops only? Almost
| ~80% of the web is on mobile [1][2][3]. Close to 56% people
| online are "mobile only", which means that they will never
| look at anything other than a hdpi screen in their lifetime.
|
| [1] https://hostingtribunal.com/blog/mobile-percentage-of-
| traffi...
|
| [2] https://www.statista.com/statistics/277125/share-of-
| website-...
|
| [3] https://www.smartinsights.com/mobile-marketing/mobile-
| market...
| spystath wrote:
| It's true, I haven't factored in smartphones. That still
| doesn't invalidate the argument. I still believe it's quite
| narrow-minded to choose typefaces based on a 270+ ppi
| device. It still excludes a quite significant amount of
| users, and probably most desktop users.
| twobitshifter wrote:
| Unrelated, but flipping through that book is one of the few
| times I wished for a UI that did not keep pages in your your
| history. Flip through a few pages and try to click back.
| marvindanig wrote:
| hmm. It magically becomes very useful if you were to actually
| read the book and not just flip through capriciously.
| twobitshifter wrote:
| That may be, I was just trying to get to a page with the
| font which needed a lot of flipping. If the book were
| opened in a new tab, I don't think I'd have the same
| complaint.
| marvindanig wrote:
| Hmm. That's a solid point. Thank you!
|
| I should have shared the Cover [1] instead of the Book
| itself. Then it'd have opened on a new tab.
|
| [1] https://bubblin.io/cover/a-108-verses-of-the-gita-by-
| swami-b...
| dredmorbius wrote:
| Typical practice has been to offer long-form content broken
| by section (typically chapter), with internal section links
| for finer references.
|
| This balances the history-pollution, pagination, and link-
| based reference needs.
|
| (There's been some playing with the notion of linking
| content within web pages by the specific text or string.
| such as, say, "There's been some playing". With word-based
| ngrams, 4--5 word sequences are strongly likely to be
| unique within a work, save for cliched phrases or idioms.)
| leephillips wrote:
| But that's literally what the history is supposed to be. It's
| not as if this a a web app that stores your mouse movements
| or something in your history.
| frosted-flakes wrote:
| It's equivalent to adding pages to the history every time
| you scroll.
| marvindanig wrote:
| That's false equivalency. Equating a book to a single
| long page is just plain wrong. Long-form has always
| required pagination. This was true even with physical
| scrolls back in the day.
|
| If you inspect the book that is linked above it is
| literally made up of several hundred webpages. So the
| reader is effectively transitioning from one webpage to
| another. And the history api is meant exactly for this
| use case!
|
| Edit: Here's the definition. A Superbook [1] is a stack
| of simple webpages, just like a book.
|
| [1] https://bubblin.io/docs/concept
| frosted-flakes wrote:
| Except those web pages are broken into pages at arbitrary
| locations, rather than by chapter or topic like most web
| sites are, and each page is only one screen tall. A
| better analogy would be adding a history entry every time
| I press PageUp or PageDown: it would clutter up the
| history so much as to make it useless.
|
| Another way to think of it is that a web page is one
| document, and so is a book. The history stack is a list
| of visited documents. If the book should be treated as a
| _collection_ of documents, then it should be structured
| that way.
|
| I don't think there's a good solution to online books
| that are presented like that, but I like how the Kindle
| app works: following a link or jumping ahead in the book
| adds a history entry (with the in-app back button), but
| just turning the page doesn't.
| marvindanig wrote:
| > Except those web pages are broken into pages at
| arbitrary locations, rather than by chapter or topic like
| most web sites
|
| Websites are not books. No one will read Harry Potter and
| Prisoner of Azkaban like a website or a news article.
|
| Books are also not files, going strictly by first
| principles.
|
| > Another way to think of it is that a web page is one
| document, and so is a book.
|
| One page is document. Multiple pages clipped together is
| a document. Website is a document. Video is document.
| Audio is document. Book is document. Manuscript is
| document. You are a living breathing document of your own
| life!
|
| Everything is a document!
|
| But history api on the web exposes useful methods and
| properties that let you navigate back and forth through
| the user's session history, and manipulate the contents
| of the history stack. It does not talk about the unit of
| transition within a session being a document. It stacks
| only webpages on the history api in the positive
| direction of time just like reading through a book. And
| that's what is implemented.
| ulber wrote:
| It still manages to be poor UX: when reading the book it
| has already trained me to navigate by flipping forward,
| so if I actually want to go to the previous page I'll
| just flip backwards. When I want to exit the book to the
| previous page I was on I'll try the back button, but of
| course that doesn't work. Personally this went against my
| expectations --- I think it's because I associate the
| back button as the counter to navigation through links,
| which the page flip gesture doesn't feel like. Flipping
| the page rather feels like changing the state of an
| object presented on a single page.
| marvindanig wrote:
| > I think it's because I associate the back button as the
| counter to navigation through links, which the page flip
| gesture doesn't feel like...
|
| Again, each page on that book is an independent link that
| you're navigating to.
|
| I'm afraid you're just saying things because you want to
| say things and do not really understand what is going on
| with the history api in there. ;-)
| avipars wrote:
| I only really use it for condensing large documents into a
| smaller page
| jacobsievers wrote:
| "... Garamond is considered one of the best fonts in existence."
| Best? But not good enough? I'm confused. Maybe those surveyed
| designers meant "important." In which case, why do we need it on
| our devices now, 520-odd years later?
| formerly_proven wrote:
| Garamond was developed for woodcuts a couple hundred years ago
| -- woodcuts have higher resolution than typical PC displays
| (the majority of which are still at around 100 DPI).
| sbuk wrote:
| When you consider it was designed over 500 years ago, and there
| are very few font fonts that match it in terms of elegance vs
| readability, it is certainly one of the best old-style serifs
| there are. Unfortunately, font rendering still isn't up to
| scratch on the majority-share desktop OS, despite the amount of
| pixels now available. Add to that the prevelance of 1080p
| screens in use, Garamond just doesn't work well in those places
| _because_ of it 's elegance.
| SeanLuke wrote:
| > So, the popular web fonts (Arial, Verdana, Georgia, and Times
| New Roman) are such not only because of their wide availability,
| but because they are drawn with the screen's limitations in mind.
|
| Um. Times New Roman was commissioned in 1931. Arial was developed
| in 1982.
| carlmr wrote:
| And I always thought Times New Roman sucks on screen before
| Full HD.
| SeanLuke wrote:
| I find Times New Roman very bad in general. It was designed
| for one purpose: extreme horizontal compactness for narrow
| columns in newspapers. That function is almost obsolete at
| this point, and Times has poor legibility compared to wider
| fonts.
| skhr0680 wrote:
| Back when screens were low DPI fonts needed to be hinted and
| adjusted to look good. Times New Roman went through that
| process. In the case of Arial, yes, computers existed in 1982
| dredmorbius wrote:
| Bitmapped displays were rare in 1982.
|
| The Apple Macintosh was 2 years away, as was X11 (the X
| Windowing System) for Unix. Even the Macintosh predecessor
| Lisa was released in 1983.
|
| The Andrew Project dates to 1982. The Xerox Star and Apollo
| systems date to 1981, the year prior to Ariel's release. Only
| the Xerox Alto significantly preceded Ariel (1973), but it
| was not widely used.
| wodenokoto wrote:
| > This Flash animation that I created ...
|
| How old is this article? And how do I get to view this animation?
| captainmuon wrote:
| You can try the Ruffle browser extension. It emulates Flash in
| WebAssembly (https://ruffle.rs). Although it seems the
| animation he means is the same as the gif below.
| indymike wrote:
| In short, fonts that have smaller x weights display smaller, and
| this leads to lots of ugly on low pixel density devices. I've
| been working on type for a new web app, and an easy way to find
| fonts with similar x weight would be helpful...
| SavantIdiot wrote:
| "Garamond is a bad font for the web, let's start by explaining
| cuneiform..."
|
| For a 10-year old article, it certainly predicted SEO trends.
| Spivak wrote:
| I mean it is a good example to really hammer home that font
| designs heavily depend on how they're rendered because you get
| lots of people who say "well it's good for print and must
| therefore be good for digital" when fonts designed with anti-
| aliasing in mind exist and perform better.
| consp wrote:
| The author also mentions the 16m colors "now" (2010) commonly
| available. Even now, most displays are still only
| 6bit/color/pixel at best with some smart techniques to make it
| look a bit better. I wonder how much that influences the
| gradients and readability. I am not talking about the creme de la
| creme displays of the HN crowd but the average display.
___________________________________________________________________
(page generated 2021-05-26 23:01 UTC)