Garamond is not a good font to use in web copy (2010)
designforhackers.com
designforhackers.com
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.
So yeah, we haven’t dug ourselves out of this hole yet.
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 (53° 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/
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.
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.
I bet you were trying to use HDMI or an adapter? If so that's a known issue with the transport mechanism, not the laptop. My '17 MBP can do two 4k external displays at 60Hz on top of the internal display using displayport, so yours can definitely do one.
This is a good reference. Note that it's from 2016: https://9to5mac.com/2016/11/17/macbook-pro-external-display-...
I've been using one for a year. It would be hard to use anything else.
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.
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.
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".
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.
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.
The 24UD58-B isn't quite as good, but for $300, it's a lot cheaper than $700.
I have 4k monitors at 27 inch because I prefer the magnification faction, but I can see the individual pixels.
Given the cost of these things, it might be more feasible to just sit further away and use a bunch of the 4K ones.
"primaryImageOfPage":{"@id":"https://designforhackers.com/blog/garamond/#primaryimage"},"datePublished":"2010-08-12T18:54:48+00:00","dateModified":"2017-11-13T03:20:03+00:00" <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" />For a 10-year old article, it certainly predicted SEO trends.
Um. Times New Roman was commissioned in 1931. Arial was developed 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.
* 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
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.
How old is this article? And how do I get to view this animation?
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.
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...
[*] In the UK: https://uk.pcpartpicker.com/products/monitor/#r=768004320,57...
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.
[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...
A shrinking fraction of 32% [1] web users. Some hard data to take a call based off of.
[1] https://twitter.com/jaffathecake/status/1397884753097990144
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.
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. ;-)
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.
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.
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.)
I am aware about the views held by the older generation of developers on this topic; most of those unix heads (especially on this forum) are desktop thinkers and end up buying physical books on latest software themselves. ;-)
With paginated navigation.
On desktop, scrolling using page-oriented controls (spacebar or page-up / page-down) isn't a terrible online reading experience. The fact that paper-oriented presentation remains so abysmally poor at less than ~4k retina display resolution remains a real friction for reading.
On mobile devices, touch + scroll itself becomes quite bad. High-speed emissive displays at least handle the refresh requirements, but make precise navigation all but impossible.
E-ink, portrait mode, and pagination, aren't quite the paper experience, but are reasonably close.
The variant I mentioned in my earlier comment works reasonably well for destkop reading. I find that scrolling through up to about 20--30 pages worth of printed material without a break is tolerable. Beyond that, the scrolling (and imprecision of placement) becomes tedious.
(I've, um ... accidentally ... created book-length HTML documents and actually read them. It's doable, but it's far from the ideal.)
Scrolling vertically is orthogonal to the reading direction. This makes us lose track of scanning head (leading word/sentence) on the content easily. Goes against the grain of our saccadic perception kinda of.
A horizontal flipping transition however, with line-tracking over the text (orphan/widow handling) is the most comfortable book reading experience since it is only intermittently animating—when moving forward to the next page, and connects with the forward flow of storytelling along a groove that our eyes can keep track of.
IMO, page flipping is THE native control of a book and it cannot be dropped off the standards just like that!
I recently read a paper on why an iridescent screen of an iPad or a smartphone is better for the human eyes than a reflective surface of electronic paper like E-ink.
Flux of light.
Intensity or flux is the only parameter that matters to the health of our eyes, and that’s something one could control only with an IPS panel type of screen. Since an e-ink relies on ambient lighting fwiw, low illumination can easily strain the reader’s pupillary muscles and degrade sight sooner.
I find ink-on-paper to be difficult to read under direct sunlight as it is too dark. E-ink is virtually perfect contrast under such conditions.
With a "frontlight" layer, my Onyx BOOX is highly readable, though my preference is to have a bright light or reading light reflecting off of it, with the frontlight also enabled. In bright sunlight the additional light isn't necessary. In dim-lighting conditions, the light leakage through the inked-in portions is distracting.
One consequence is that "dark mode" formats are not well suited to e-ink, though they do remain generally readable. The fact that artefacts are more visible against a dark background may contribute to this.
I remember research and/or statements long ago (1980s) that brown ink on a slightly off-white paper has the highest readability, and know of several authors who had their books set like this. In general it's a good option.
For onscreen emissive displays, the variability between displays and ambient lighting conditions generally makes it a poor option, though for desktop use I'll often prefer a slight off-white background and very slightly muted text colour preferable. (Example of my typical CSS preferences: https://codepen.io/dredmorbius/full/KpMqqB)
Doesn't sound intuitive at all. How did they measure "better"? The natural environment is all reflective. Butterfly wings are reflective. Fruit colors are reflective. Human eyes evolved for the natural environment. Very very few natural things generate emmissive visible light. My eyes get exhausted reading on an LCD. I don't get that same feeling when reading on actual printed paper or on E Ink.
The cue is in the effort required to capture the message from a body of text. Reading has two broad stages–putting our eyes to feed the optical data and then our visual acuity in the brain (vision) to process that data--recognizing glyphs, putting together words, sentences etc.
If we concentrated on a butterfly or a fruit for hours on the end similarly, in a poorly illuminated environment, it is going to affect our eyes. The pupillary muscles have to remain contracted to let enough light in. A glow-worm on the other hand would feel more exciting and comfortable to watch in a dimly lit situation.
But that's only stage one. The stage two is where the magic happens. And it has a catch!
The morning/daytime spectrum from an LCD panel makes it easier for the eyes to capture the text because the illumination is great, but it also forces us operate attentively. By being attentive, our brain is pushed to operate at a higher energy level. It then uses more energy to process the load of incoming information and this whole deal exhausts us by the end of day.
Sometimes when we don't look at the evening shift spectrum of a sunset (reddish shift), our body clock does not trigger a restful mode. A fatigue sets in, if you will.
But this only means that it is time to take rest and not read anymore. Cue an IPS screen is still healthier for the eyes than a reflective e-ink one when it comes to long-haul reading.
[1] https://www.nobelprize.org/prizes/medicine/2017/press-releas...
Edit: Sorry wrote this one in a hurry. Have to go away from the computer now!
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...
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.)
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.