5 ms·

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 fo

by oefrha 5y ago

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.

mattowen_uk 5y ago
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?
andrepd 5y ago
Ironically, the font that flashed for half a second before the intended font loaded is actually more readable and pleasing that the latter.
qsort 5y ago
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.
dpwm 5y ago
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-source-display-font-family https://www.behance.net/gallery/28579883/Cormorant-an-open-s... [1] https://fonts.google.com/specimen/Cormorant https://fonts.google.com/specimen/Cormorant [2] https://fonts.google.com/specimen/EB+Garamond https://fonts.google.com/specimen/EB+Garamond
- dmitriid 5y ago
  > 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.
lelanthran 5y ago
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_developer_effect/main.html 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.
- eloisius 5y ago
  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.
  - lelanthran 5y ago
    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.
    - jfk13 5y ago
      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.
mhd 5y ago
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.
jfk13 5y ago
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.
- Jenz 5y ago
  > 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/ https://practicaltypography.com/
  - unmole 5y ago
    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.
    - Jenz 5y ago
      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?
      - unmole 5y ago
        Still less jarring than the random capitalisation.
- 5y ago
Brajeshwar 5y ago
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/ https://brajeshwar.com/2021/brajeshwar.com-2021/
- oefrha 5y ago
  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.
tempodox 5y ago
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/ https://contrastrebellion.com/
- oefrha 5y ago
  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.

by oefrha 5y ago

mattowen_uk 5y ago

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?

andrepd 5y ago

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

qsort 5y ago

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.

dpwm 5y ago

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-source-display-font-family https://www.behance.net/gallery/28579883/Cormorant-an-open-s... [1] https://fonts.google.com/specimen/Cormorant https://fonts.google.com/specimen/Cormorant [2] https://fonts.google.com/specimen/EB+Garamond https://fonts.google.com/specimen/EB+Garamond

dmitriid 5y ago
> 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.

lelanthran 5y ago

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_developer_effect/main.html 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.

eloisius 5y ago
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.
- lelanthran 5y ago
  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.
  - jfk13 5y ago
    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.

mhd 5y ago

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.

jfk13 5y ago

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.

Jenz 5y ago
> 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/ https://practicaltypography.com/
- unmole 5y ago
  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.
  - Jenz 5y ago
    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?
    - unmole 5y ago
      Still less jarring than the random capitalisation.
5y ago

Brajeshwar 5y ago

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/ https://brajeshwar.com/2021/brajeshwar.com-2021/

oefrha 5y ago
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.

tempodox 5y ago

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/ https://contrastrebellion.com/

oefrha 5y ago
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.