Hacker News Reader

Comment by oefrha | Hacker News Reader

Unfortunately this blog is hardly a shining example of web typography. 16px Cormorant used throughout has a very small x-height and very thin strokes, making for terrible legibility. I looked at this on both macOS and Windows on a high DPI screen as well as an iPad, the experience is universally poor; I suppose it would only be worse on a low DPI screen. Any user agent stylesheet is way more legible than this design. And this complaint is coming from a young person with good eyesight who routinely trade font size for more content on screen.

View on HN

Yes — the feeling it gives me is of looking at those glossy magazines where nobody really expects to read the articles, it's all about the pictures and the overall shiny appearance. The eye just glides over the surface, never quite catching hold of the actual content of the text.

Moreover, the author seems confused about specifics of their own design:

> Numbers are oldstyle proportional and are separated from the text solely by an en dash.

No, it's an en space, which is something quite different. This sort of mixup doesn't exactly inspire confidence.

I didn't read the whole piece — partly because of the font — but I'm not inspired to follow in its footsteps or look to the author for design advice.

> No, it's an en space, which is something quite different.

Yeah, haha, at that point I lost the last hope I had of the author having much expertise in what he was doing.

That said I very much respect the obviously well-intended attempt, and hope the author’ll try again.

Practical Typography by Matthew Butterick [1] is a very nice introduction to typography for laymen.

[1]: https://practicaltypography.com/

I'm ambivalent about most of the suggestions but please, for the love of all that is good, don't break people's expectations about what links look like.

And if people’s expectations of what links look like (blue, underlined) are so distracting it massively impacts the readers ease to read the actual content?

Still less jarring than the random capitalisation.

>No, it's an en space, which is something quite different. This sort of mixup doesn't exactly inspire confidence.

There appear to be numerous mixups that likely come from copying examples without understanding them.

One example that stood out to me was with block equations. The author points out that the paragraph after an equation is not indented, something they likely copied from LaTeX. It's true that, if you simply look at many LaTeX documents visually, the text after an equation is often not indented. But that is because for LaTeX, and the styles it is built around, a block equation is considered to be part of a paragraph. For some people, they are outright considered part of sentences, put on their own line only for clarity, with commas or full stops at the end to make the sentences grammatically correct. The point of not indenting the text after an equation is to indicate to the reader that the text is not a new paragraph. An actual new paragraph after an equation in LaTeX is indented by default.

The author appears to have seen some documents with equations, not understanding this distinction, and noticing the lack of indentation after most equations, copied the visual result without understanding the meaning.

> But that is because LaTeX, and the styles it is built around, a block equation is considered to be part of a paragraph. For some people, they are outright considered part of sentences, put on their own line only for clarity, with commas or full stops at the end to make the sentences grammatically correct.

As someone once trained as a mathematician, I can confirm that's exactly the case. Simple example:

  Newton's second law states that
  $$F = ma,$$
  where $F$, $m$ and $a$ are the force, mass, and acceleration, respectively.

Of course you don't indent the rest of the sentence.

Even more infuriating is that they're using en dashes places where they should be em dashes. For example:

    […] choices – e.g. I cannot fix small-resolution screens or bad user font choices – but at least […]

I'm on non High DPI screen (2560x1440 @ 32") with a dot pitch of 0.27 and the typeface used for the body text and headings renders really badly, in the heading worded 'Paragraph' the letter 'A' is almost unreadable.

I didn't read the article, why should I, when it clearly doesn't (presumably) follow it's own advice?

I've never had the opportunity to view my website on a high-DPI screen. I strongly suspect that what looks good on my large HD monitor does not look good on a high-DPI screen.

As you are someone who is on a high-DPI screen, can you tell me what changes you'd make to the font/typography in this link to make it more readable? Maybe screenshot it so I can see what it appears like on your screen.

http://www.lelanthran.com/simply_wordy/articles/the_average_...

I realise that I'm asking a favour of you for primarily my own benefit, but I would be very appreciative of your feedback.

You didn't ask me, but I'm on a 5K display and I'll give you my take. The paragraph text looks fine. Maybe bump the font size up a tiny bit and give it a little more width than 620px. This is personal preference, but I'm not a huge fan of small caps, especially when applied too liberally. It usually looks better on paper, but on the screen it looks too wide and too unbalanced to me. Last, the drop shadows are superfluous, look pretty ugly, and actually distract from the otherwise minimal and attractive design of your site, especially on my phone. Last last: I'd ditch or at least de-emphasize the social share icons. My hunch is that no one uses them anyway, and having them hang out at the top of the screen no matter where you scroll is distracting.

Thank you so very much! All of these items are noted and I'll give them a try.

I's actually really hard to get an indication of how readable your blog is to HN viewers without actually spamming it to HN.

Another small detail: don't use a hyphen as punctuation in cases like

> let’s move on - what happens ...

It looks rather lost and lonely, floating there between the parts of the sentence.

What you want here is an em dash—like this—to separate the phrases. (It's Unicode character U+2014, or the — entity in HTML.) It is often set without any surrounding spaces, though some people — perhaps depending on the font being used — like to have a thin space (U+2009) before and after. A regular space is certainly too much.

I'll look into that; I don't know how that is done in emacs (thee entire website is generated from emacs org mode files).

Computer Modern is known to be on the thin side for digital displays, and I've seen quite a few people argue that it's a risky choice for legibility. Personally, I find it perfectly legible on macOS/iOS, but renders poorly on Windows, especially in Chrome/Edge; Firefox handles it better.

I think it's true to say it is a "risky choice for legibility". If (as you say) it "renders poorly on Windows, especially in Chrome/Edge", that means the great majority of website visitors are going to see poor rendering, no matter how "perfectly legible" you find it on your system.

I have a few comments unrelated to high DPI that could better the readability, slightly:

The indents of the first line of the paragraphs are not necessary as the paragraphs are already spaced vertically. Chose one: vertical separation or indentation, this will reduce the noise of the page slightly (or as I call it: the vibration).

Justified text is very hard and I’d generally avoid it where it can’t be controlled (it’s ok for print or where it can be adjusted). There is too much space between words that will form “rivers”, again: noise on the page… You are probably safer with left aligned text.

Footnotes could have a different aspect to differentiate from the body text. Smaller? Lighter? Up to you.

Finally: the font renders perfectly on my hi DPI screen but I’m not sure about the bold weight; it looks like it’s derived from the book? Is the correct weight installed or is it computed?

Also unrelated to hiDPI, but I would rethink the heading font (Copperplate?) It’s both somewhat overused and IMHO not a great match with the body font, visually.

It's okay on mobile (Android, Google pixel 2). The font is slightly larger than HN's (HN is tiny for some reason). It's still small by modern standards, so bumping up the font a couple points will help.

How it looks: https://ibb.co/Q84h9gM

In Opera's reader mode: https://ibb.co/HtsDnCV

I had the same issue on my screens in that the body font size was too small to read comfortably.

I tried a few different CSS modifications, but it seems like that particular font just doesn't perform well on a wide variety of screens.

As for a better option, it's hard to do a lot better than standard "web safe" fonts for body copy, or a typeface that was designed specifically for digital readability (e.g. Roboto, Open Sans, etc).

It's hard to read even on my low DPI screen. The font is too small and thin. On the plus side, at least it's not light grey on white.

On my FHD screen, all but the italics looks good, the italic parts are hard to read (but that’s most certainly the font).

On my QHD monitor, I need to zoom in (120%) to comfortably read the text.

The heading font looks ugly on both.

From the typeface’s Behance page [0]:

> Cormorant is an original design for an extravagant display serif typeface inspired by the Garamond heritage, hand-drawn and produced by Catharsis Fonts. While traditional Garamond cuts make for exquisite reading at book sizes, they appear clumpy and inelegant at larger sizes. The design goal of Cormorant was to distill the æsthetic essence of Garamond, unfetter it from the limitations of metal printing, and allow it to bloom into its natural refined form at high definition.

In the comments, the font’s creator states:

> As for a text version of Cormorant, that's basically covered by EB Garamond already... and if that's of interest of you, I am developing a sans version of Garamond for use as a text font. It's called Eau de Garamond already in quite usable shape. You can find it on GitHub.

None of this is to make anyone feel silly: Cormorant is a nice free typeface, albeit difficult to read at those sizes – there are tradeoffs made to make it look better at heading sizes. Knowing all that, I even considered typesetting a paperback in Cormorant Garamond, and I was surprisingly pleased with the results. I don’t remember what we ultimately chose, but Cormorant Garamond was a strong contender. The author did want the type quite large on that book, though, to the point where other Garamonds looked a bit 'sludgy' – what the Cormorant designer calls 'clumpy and inelegant'.

As for the article’s author, they did seem to notice the relative lightness of the typeface and adjust the weight to 500:

> The font used here is Cormorant. To make it look a bit better on screen the default weight was increased from 400 to 500.

This looks about right, comparing the google fonts pages [1,2]; however, Cormorant wasn’t really designed to work well at those sizes.

[0] https://www.behance.net/gallery/28579883/Cormorant-an-open-s...

[1] https://fonts.google.com/specimen/Cormorant

[2] https://fonts.google.com/specimen/EB+Garamond

> As for the article’s author, they did seem to notice the relative lightness of the typeface and adjust the weight to 500:

Whereas the best solution is to set font size to 1em for paragraphs. It's now set to 0.75em, and makes the font both tiny and thin.

I was about to defend the writer in the lines of -- do not worry about website and focus on the article. Unfortunately, he did say "After consulting The Elements of Typographic Style Applied to the Web which was partially helpful, I spend hours if not days on it. And here it is: the grand redesign."

Yes, the font-size is too small for default viewing (I'm reading this on the 5K Retina iMac). I had to turn on Reader Mode for easy reading. The content of this article is also kinda too broad and shallow.

Nonetheless, The Elements of Typographic Style is a must read.

I recently moved my 20-year old website from WordPress to a Static one[1]. I took quite lot of shortcuts, despite my believes in vertical rhythms, and modular scaling but I was OK with the result as they scale pretty well in most use cases. So, my idea is that it is OK to write/preach about something but your carrier/messenger may not be practicing that.

1. https://brajeshwar.com/2021/brajeshwar.com-2021/

I usually flag comments quibbling about website style, but this one is specifically about web typography, and the first thing you should learn in typography is choosing the right font (which, to be clear, isn’t a point discussed in TFA). No one will care about how you indent paragraphs and lists if they can’t even read the text without great difficulty. If people reach for reader mode, all your custom typography is lost.

I also find some of the advice in TFA like vertical rhythm (“one important aspect to get right”, I quote) dubious for web typography. Unless you’re using multi-column layout, there are no pages to line up on the web.

This is the reason why I block third party fonts.

I unfortunately have very bad eyesight (my terminal font size is 22, for instance), and stuff like that is very painful for me.

The bluish gray color doesn't help either.

I'm on vacation, so I've got an old Elitebook with me, 1600x900. That font is bad. And picking the right font for the medium is one of the first abilities you should learn for, well, typography. Even for print there's huge differences - newspapers want to have different fonts because both the paper is worse than those of most novels, and because "elegant" fonts don't really chime well with the content.

Another example of the optical aspect of design taking precedence over the functional aspect, which is a sin in my book.

It looks like the need to keep referring to the Contrast Rebellion won't go away any time soon: https://contrastrebellion.com/

The foreground color #34495E has a contrast ratio of 9.28:1; officially okay, but doesn't help when the font choice is very poor.

Ironically, the font that flashed for half a second before the intended font loaded is actually more readable and pleasing that the latter.

Reply on news.ycombinator.com