Bringing “The Elements of Typographic Style” to the Web
crepererum.net
crepererum.net
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.
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:
Newton's second law states that
$$F = ma,$$
where $F$, $m$ and $a$ are the force, mass, and acceleration, respectively.
[…] choices – e.g. I cannot fix small-resolution screens or bad user font choices – but at least […]I didn't read the article, why should I, when it clearly doesn't (presumably) follow it's own advice?
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.
How it looks: https://ibb.co/Q84h9gM
In Opera's reader mode: https://ibb.co/HtsDnCV
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?
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.
> 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...
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.
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 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.
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.
It looks like the need to keep referring to the Contrast Rebellion won't go away any time soon: https://contrastrebellion.com/
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.
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:
I can only assume this looks better on designers' computer?
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.)
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 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 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 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.
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!
<meta name="viewport" content="maximum-scale=1">Edit: ² here is a regular height unicode char, I was talking about <sup>…<sup/>
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).