I am happy to see somebody else taken aback by The Elements of Typographic Style similarly, but I would hope that instead of blindly applying some principles (eg. line height restriction makes sense on printed pages which are next to each other, and when you can sometimes see through the paper), they are of limited use on the web (maybe in multi-column layouts for line height restriction).
Instead of just translating suggested style into CSS/HTML/JS, I'd appreciate an exploration of why something is useful in print, and how that translates to digital screens.
I agree. Typography is as much about style as it is legibility. It's a science and an art balancing between the two.
Though it's not too my taste, overall it is a reasonably cohesive design, with only the code blocks standing out like a sore thumb.
I remember reading an article years ago on A List Apart that sent me on the typography journey. I wonder if there are any other outstanding resources to read on the topic?
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.
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?
> 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.
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.
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.
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.
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.
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).
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.
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.
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?
>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.
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.
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.
Lots of comments saying the font is hard to read, but I don’t find it to be so. Perhaps a difference in browser rendering? Overall, I think it’s a job well done, and I’m much in favour of old-style serifs and justification on the web instead of yet another boring sans-serif left-aligned page.
Elements of Typographic Style is one of my favourites too. However, I’d suggest that for web publishing, Butterick’s Practical Typography might be a better guide than Bringhurst, who was primarily focused on print.
> Lots of comments saying the font is hard to read, but I don’t find it to be so. Perhaps a difference in browser rendering?
I think the issue is with the font size in combination with the font itself. It's terribly small on big screens and the blue color of the text doesn't help either.
Overall, not the greatest example of good web typography.
I don’t think there is no reason. The reason is a bad font that most of us have hard time to read. It literally catches the eye and discourages to read tfa.
I think it’s all because of that macos fonts quirk.
I looked at it on my 5K Mac and also my iPhone 7, and the fonts were a bit thin to my liking, but I find the highest rated comment and similar comments to sharp, “terrible legibility”, “very painful to me”, etc.
If I was posting the article for myself, I would be quite disheartened to spend so many hours and get such direct feedback.
I think its better to leave balanced comment and some positives or not to respond at all. I read the comments and thought to myself oh boy have to check out this site, it must be terrible, which I hardly found to be the case.
I started to read. I stopped reading because the font is so bad. I might have tried reader mode if it was for anything else. However, for an article about font rendering, no thanks.
I really don't like commenting on style over substance. But the font choice for the blog makes it hard to read on a normal DPI screen. Some characters, like the uppercase titles, render extremely poorly.
I can only assume this looks better on designers' computer?
Yep, the font has way too small an x-height for screen use. The rendering does look great on a hiDPI display, but of course when publishing to the web one should not assume hiDPI.
I still have to see a website that looks better than the default browser styles. Just leave your CSS empty (unless required for some functionality) and enjoy the pure, raw, unadulterated look of the internet.
Web is still missing a few important things like baselining (…:baseline doesn’t work through a hierarchy of containers or between a label and an input) or sub/superscripts (²) that do not change the base line height.
Edit: ² here is a regular height unicode char, I was talking about <sup>…<sup/>
Do you find those light-on-black code blocks in dark-on-white context OK?
I know nowadays it's almost a "standard": dark colour scheme for coding environment is truly widespread (mostly I stick to it myself) but on /bright/ page about typography it feels weird: I thought typography relies on visual balance and 'airiness', and seeing super heavy black rectangles on page promoting good typography is … strange.
(I generally consider alternating bright and dark blocks in same page really bad design choice, because it produces aggressive contrast switches putting unnecessary strain on my eyes, but is seems it's just my deficiency.)
Kudos to the author for challenging themselves to apply best practices, especially on the web where everything looks slightly different for everyone! As other comments show, this is not an easy task to take on.
I also read Bringhurst's book and found it eye-opening. Even though the author (crepererum) notes that you'll see bad typography everywhere after reading it, which is true, in my case it also had a converse effect: physical books became much more magical. Since learning about the techniques and best practices when typesetting for print, every book now feels more like a work of art to me.
And like the author, I was inspired to apply the practices from the book to a concrete project. In my case, I created a LaTeX template since I was typesetting a lot of math homework in college at the time.
The book is well worth reading for any lover of physical books, especially for those without prior background in design. It was also well-written and overall a joy to read.
59 comments
[ 3.1 ms ] story [ 123 ms ] threadInstead of just translating suggested style into CSS/HTML/JS, I'd appreciate an exploration of why something is useful in print, and how that translates to digital screens.
Though it's not too my taste, overall it is a reasonably cohesive design, with only the code blocks standing out like a sore thumb.
I remember reading an article years ago on A List Apart that sent me on the typography journey. I wonder if there are any other outstanding resources to read on the topic?
Created in 2005, open-sourced in 2014
The TOC is somewhat difficult to find though, tucked at the bottom of the initial page. Here it is for reference:
http://webtypography.net/toc/
I didn't read the article, why should I, when it clearly doesn't (presumably) follow it's own advice?
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.
> 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
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.
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.
I's actually really hard to get an indication of how readable your blog is to HN viewers without actually spamming it to HN.
> 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.
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?
How it looks: https://ibb.co/Q84h9gM
In Opera's reader mode: https://ibb.co/HtsDnCV
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).
On my QHD monitor, I need to zoom in (120%) to comfortably read the text.
The heading font looks ugly on both.
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.
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/
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.
As someone once trained as a mathematician, I can confirm that's exactly the case. Simple example:
Of course you don't indent the rest of the sentence.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 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.
It looks like the need to keep referring to the Contrast Rebellion won't go away any time soon: https://contrastrebellion.com/
Elements of Typographic Style is one of my favourites too. However, I’d suggest that for web publishing, Butterick’s Practical Typography might be a better guide than Bringhurst, who was primarily focused on print.
I think the issue is with the font size in combination with the font itself. It's terribly small on big screens and the blue color of the text doesn't help either.
Overall, not the greatest example of good web typography.
I had a look at the website and it looked fine, not my tastes (I like mono fonts), but overall perfectly acceptable.
Perhaps a discussion about the content of the article would be more relevant.
I don’t think there is no reason. The reason is a bad font that most of us have hard time to read. It literally catches the eye and discourages to read tfa.
I think it’s all because of that macos fonts quirk.
If I was posting the article for myself, I would be quite disheartened to spend so many hours and get such direct feedback.
I think its better to leave balanced comment and some positives or not to respond at all. I read the comments and thought to myself oh boy have to check out this site, it must be terrible, which I hardly found to be the case.
I can only assume this looks better on designers' computer?
Edit: ² here is a regular height unicode char, I was talking about <sup>…<sup/>
I know nowadays it's almost a "standard": dark colour scheme for coding environment is truly widespread (mostly I stick to it myself) but on /bright/ page about typography it feels weird: I thought typography relies on visual balance and 'airiness', and seeing super heavy black rectangles on page promoting good typography is … strange.
(I generally consider alternating bright and dark blocks in same page really bad design choice, because it produces aggressive contrast switches putting unnecessary strain on my eyes, but is seems it's just my deficiency.)
1. The font is too thin (Firefox on a Samsung A40)
2. I tried to pinch to zoom to compensate but the page doesn't zoom.
Luckily reader mode works. It doesn't look as nice but it's easier to read.
2.5 I'm not sure the left and right margins are needed. If I could zoom I'd have zoomed the text to fill the page.
Yes, devs- PLEASE stop doing this!
What does this mean?
Optimal line length for legibility is, indeed, generally agreed upon to be in the range of 45-75 characters per line (not 100).
I also read Bringhurst's book and found it eye-opening. Even though the author (crepererum) notes that you'll see bad typography everywhere after reading it, which is true, in my case it also had a converse effect: physical books became much more magical. Since learning about the techniques and best practices when typesetting for print, every book now feels more like a work of art to me.
And like the author, I was inspired to apply the practices from the book to a concrete project. In my case, I created a LaTeX template since I was typesetting a lot of math homework in college at the time.
The book is well worth reading for any lover of physical books, especially for those without prior background in design. It was also well-written and overall a joy to read.