8 ms·

Bringing “The Elements of Typographic Style” to the Web

59 points by crepererum 5y ago

necovek 5y ago
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.
- snoopen 5y ago
  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?
gerikson 5y ago
http://webtypography.net/ http://webtypography.net/ Created in 2005, open-sourced in 2014
- tempodox 5y ago
  I was mystified as to how to navigate the landing page at first, but I find the actual content to be instructive and well-presented.
- otikik 5y ago
  Wow that is such a much better resource than the OP. 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/ http://webtypography.net/toc/
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
yummybear 5y ago
For a blog about typography the text sure is difficult to read, on my monitor at least.
deleted 5y ago
[deleted]
Veen 5y ago
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.
- manuelmoreale 5y ago
  > 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.
- math-dev 5y ago
  Honestly it’s pretty bad to see, somebody just came in and started hating the original poster’s website for no reason and others bandwagonned on. 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.
  - wruza 5y ago
    hating, bandwagonned, no reason 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.
    - math-dev 5y ago
      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.
Ardren 5y ago
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?
- LordAtlas 5y ago
  I have a 24" screen and it looks horrible. Too small, too blurry, too many characters per line. Is that meant to be ironic or something?
- Sharlin 5y ago
  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.
enriquto 5y ago
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.
mro_name 5y ago
while I don't buy the article on typography, the surrounding site was interesting, thanks for sharing!
deltron3030 5y ago
Serif fonts are always too busy at small sizes, Rosario (free on Gfonts) works well for a classic sans look.
wruza 5y ago
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/>
myfonj 5y ago
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.)
pmontra 5y ago
The general look of the page is nice. Two critics: 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.
- xqyf 5y ago
  > but the page doesn't zoom Yes, devs- PLEASE stop doing this! <meta name="viewport" content="maximum-scale=1">
keithalewis 5y ago
Is there a hyphen in anal retentive?
hyperstar 5y ago
Web pages shouldn't have typography, and typography shouldn't have 100 characters per line.
- xqyf 5y ago
  > Web pages shouldn't have typography 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).
jstrieb 5y ago
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 points by crepererum 5y ago

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.

snoopen 5y ago
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?

gerikson 5y ago

http://webtypography.net/ http://webtypography.net/ Created in 2005, open-sourced in 2014

tempodox 5y ago
I was mystified as to how to navigate the landing page at first, but I find the actual content to be instructive and well-presented.
otikik 5y ago
Wow that is such a much better resource than the OP. 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/ http://webtypography.net/toc/

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

yummybear 5y ago

For a blog about typography the text sure is difficult to read, on my monitor at least.

deleted 5y ago

[deleted]

Veen 5y ago

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.

manuelmoreale 5y ago
> 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.
math-dev 5y ago
Honestly it’s pretty bad to see, somebody just came in and started hating the original poster’s website for no reason and others bandwagonned on. 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.
- wruza 5y ago
  hating, bandwagonned, no reason 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.
  - math-dev 5y ago
    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.

Ardren 5y ago

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?

LordAtlas 5y ago
I have a 24" screen and it looks horrible. Too small, too blurry, too many characters per line. Is that meant to be ironic or something?
Sharlin 5y ago
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.

enriquto 5y ago

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.

mro_name 5y ago

while I don't buy the article on typography, the surrounding site was interesting, thanks for sharing!

deltron3030 5y ago

Serif fonts are always too busy at small sizes, Rosario (free on Gfonts) works well for a classic sans look.

wruza 5y ago

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/>

myfonj 5y ago

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.)

pmontra 5y ago

The general look of the page is nice. Two critics: 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.

xqyf 5y ago
> but the page doesn't zoom Yes, devs- PLEASE stop doing this! <meta name="viewport" content="maximum-scale=1">

keithalewis 5y ago

Is there a hyphen in anal retentive?

hyperstar 5y ago

Web pages shouldn't have typography, and typography shouldn't have 100 characters per line.

xqyf 5y ago
> Web pages shouldn't have typography 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).

jstrieb 5y ago

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.