Hacker News new | past | comments | ask | show | jobs | submit login
The New Web Typography (robinrendle.com)
175 points by thefutureproof on Feb 27, 2016 | hide | past | web | favorite | 64 comments

The most readable font is the the font you're most familiar with. Spencerian script is almost illegible to me, but for people who read it ever day it's no problem. The same is true of blackletter scripts. No matter how ugly the font, people can adapt to it, and once they've adapted they'll find it preferable.

If you really care about prioritizing the text, you should leave the typography to the client. I do not care about your brand. I do not care about your fancy typography tricks. I override all your font choices because I want every website to look identical. This means I never have to spend any unnecessary mental effort interpreting your typography. If you're serious about typography you should respect your user's choices and leave it to the default.

There are very few people who are able to make informed choices about typography to create a site that's most readable to them. You might be able to do that but you're the exception and not the rule.

In Firefox it's as simple as going to Edit, Preferences, Content, Fonts & Colors, Advanced..., and disabling "Allow pages to choose their own fonts". Whoever was responsible for setting up fonts in your OS already picked sane defaults so there's no need to change anything else there.

Most people are happy they can barely use their browser and have probably never seen any of these menus. They won't even think about opening the Preferences window to look around and they definitely won't consider that they could configure the fonts used by websites.

The very same link above is so much easier to read in Safari's "Reader" mode than in it's original "fancy webtypographer" design, that I wonder if the typographer actually understand what he does.

It's easier to read but it also has an aesthetic that reminds me of the children's books I used to learn to read with in primary school.

Comparing the text as-is and in reader mode, you see that the font the author choose is bolder (for lack of a fancy typography term) and the space between the letters seems to be smaller.

If you increase the space between the letters with CSS using the letter-spacing property just a little bit, I think it's just as easy to read as in reader mode.

Agree completely, in fact one of my favourite fonts is the non-antialiased monospaced 'Fixed' font that came with X:


With a small tweak, adding a slash to the 0, it's perfect for reading source code all day long, and I've also started using it elsewhere including the browser.

Are you saying that CSS should drop the author mode[1] for typography because you override it ? How does that make any sense ? The point of user mode in CSS is exactly to allow the user to put her own css into the mix.

[1] http://www.w3.org/TR/CSS2/cascade.html#cascade

> you should leave the typography to the client

Who is 'you'? A back-end developer? Then, yes. A front-end developer or UX person with design background? Then: no. We don't make websites for 'the client', we make them for their clients.

The client is the person paying for the website. They want fancy fonts because they want a strong brand and all that bullshit. The client's client is the person reading the website. Fancy design is actively harmful to them.

I make my "should" claim as somebody reading websites, not somebody paying for website design. I'm fully aware that designers are less likely to listen to me than to the client who's paying them, but if I can at least shame a few into reining in their worst excesses I've done some good.

I think it meant the browser, as in "the web client". (There is a mention of overriding all websites fonts). So you basically agree on the goal: satisfying the end user.

Thank you! We agree. This is a slide from my UX or Marketing presentation. I think you'll like it: http://imgur.com/ErR8JfJ

Yes, that's exactly what I meant. I was thinking of technical details not business details. I would edit my post but it is too old to edit now. Thanks for pointing this out.

Well, actually you do it for your customer, and if you are able to persuade your customer that this is for his clients, than yes, you can have it.

While I think this rant is valid. Many people care more about look then readability. If it looks boring, they might not read it. So I think it's up to the client to do the font override, etc.

The rant is uninformed. Typographic design (which is the basis of all graphic design) is all about readability and reinforcing meaning of the text. The 75 character line thing for example is based on comfortable eye scanning for text at book distance from the viewer (rather than being some decorative notion).

Typographic design has centuries of practise behind it and web typography is correctly considered crude and immature by trained typographers. It's the technology that causes the poor experience and one which typographers are in the early days of addressing.

At the moment I'm using loadCSS (https://github.com/filamentgroup/loadCSS) to render local fonts on my projects. I wonder how difficult would be to create a subset of the font to load first, and then switch it for the full family once the site is loaded (as the article suggests).

What is the best font-loading strategy today?

>What is the best font-loading strategy today?

As a website visitor, I'd prefer sites stuck with the bloody built-in fonts. Can be get some kind of project to increase the standard, cross-platform fonts available in all platforms/browsers to 30-50 from the ~10 that they are now?

I use the extension Stylish on Chromium to change all the fonts on all websites. I don't have that computer with me, but it's something like:

* { font-family: "Myriad Pro" !important; } code, pre {font-family: "Inconsolata" !important; }

I do this because the fonts on my Linux box either render strangely or are downright ugly, especially ones loaded from some other website (I consider myself a designer before a UNIX geek).

You can do this natively on Firefox though, and Firefox is much better at it. With Firefox on OS X I use either Charter or Iowan Old Style for serif, Adelle Sans for sans-serif, and Monaco for monospace.

> fonts on my Linux box either render strangely or are downright ugly

The "fc-match" command can be used with font-family name to figure out what fallback font your system is selecting by default. There is also a "fonts.conf" file in which you can specify your preferred fallback.


Cheers! I've used Linux on servers for years, but this is my first serious foray into GUI Linux, so a lot of this stuff is completely foreign to me.

>the fonts on my Linux box either render strangely or are downright ugly

Out of curiosity, which distro are you using? It sounds like there are missing fonts and your system is falling back to some really bad fonts in their place. The fix may be just installing a couple packages with more fonts.

You can set unicode ranges for custom fonts [1], to e.g. only load the basic range initially.

[1]: https://developer.mozilla.org/de/docs/Web/CSS/@font-face/uni...

What is it about fonts/typography that engenders such wankery? I say this with love.

Seriously. To my sibling comments: show me an article about how great lisp or vim is that takes 2.5k words to get to its position statement. That's an introduction that's 50% of the length of the article! I don't mind long articles, but ill-proportioned intros seem like a bad idea.

Incidentally, that position statement is ridiculously vague and anodyne:

Principles of the New Web Typography

1. We must prioritise the text over the font, or semantics over style.

2. We ought to use and/or make tools that reveal the consequences of typographic decisions.

3. We should acknowledge that web typography is only as strong as its weakest point.

Who's going to disagree with these? As best I can tell, these translate to:

1. Don't be afraid to show sub-optimal typography until your nicer font loads. Physical books never had to worry about load times.

2. Write better tools and share them. For now use Tachyons or Basscss, as a modern equivalent of a https://en.wikipedia.org/wiki/Type_case.

3. Try to keep your CSS selectors about the same length[1]. Read and internalize http://csswizardry.com/2014/10/the-specificity-graph.

Like parent, I say all this with love. If it got me to read it all (albeit over the course of a day), it's doing something right.

[1] I'm not sure about this, since http://cssguidelin.es/#specificity seems to suggest that specificity is the number of tags in your html that are selected by a selector. But that doesn't seem to be quite what OP means, unless I misunderstand. And it seems fuzzy to ask people to prefer flatter curves in a logarithmic graph.

You can say that about anything really. You may not really get the fascination behind type, a type designer may not understand the fascination behind node.js or zfs, an embedded systems programmer may not understand my love for high gsm paper, etc.

Additionally it's a very self aware sort of wankery in my experience :)

I'm a little reluctant to admit that I asked myself the same question... and I've written a bunch of wanky essays myself.

I was pretty confused about the text, so I thought, I'll reread the blurb at the top to see what the author is trying to accomplish.

> We can trace a nervous path through the links and hearts that occupy our timelines. In search of answers, we’ve peeked under the covers of Material Design and examined hundreds of pattern libraries, since one of them might be secretly withholding the principles of good design within. But why are we obsessed with typographic rules? And if we were to make guidelines for setting text on the web, what form should those rules take?

What's a nervous path? What timelines, specifically? And "Material Design" isn't mentioned once in the text. What is a pattern library?

There are interesting points in the essay, but it makes it obvious that aside from New Web Typographers... we also need New Web Editors.

By the way, the author's website causes a font change flash on every navigation; you get the feeling that the web fonts aren't being cached. From the source, it looks like there's a script at the very end of the HTML that injects another script that then changes the font. Could this be done at an earlier stage in the page load to prevent the problem? Or, why not just use ordinary @font-face URLs linking directly to the .woff files?

Compared to what? People talking about their favorite programming editors? Discussions of brace style? Functional vs OO vs ... programming?

The typeface is the voice of the text. It also marries the frivolous world of design with the serious world of content, lending design the validity it craves.

Would you ever have spoken that sentence out loud in a normal conversation?

Not trying to call you out, just making a point that we all participate in a bit of wankery when it suits us.

His new, preferred font looks a lot like Century Schoolbook.

Well, of course Penguin Books needed a redesign in the late 1940s. They'd produced huge quantities of books for soldiers during the war, sized for uniform pockets and produced under severe British wartime supply restrictions.[1] After the war, they could provide custom covers again. The example he shows is the WWII standard cover.[2]

[1] http://www.theatlantic.com/business/archive/2014/09/publishe... [2] https://s-media-cache-ak0.pinimg.com/236x/55/0e/6e/550e6ed4c...

> We can learn more about prioritising the text in this way by diving deeper into the murky waters of web font loading: in my walkthrough on the subject I mentioned two of the most popular techniques.

His techniques uses javascript, which goes completely behind the earlier point he is making about "typography is as strong as your weakest link". If I have Noscript on, I can't see your text correctly. That's your weakest link right there.

If you choose to disable one of the core technologies of the modern web, you'll just have to take what you can get.

The same "modern web" that mostly fails at doing web for lack of progressive enhancement.

But enough sidetracking, as ekianjo said, using a script to load the font is unnecessarily adding to its fragility and simply fails for those without javascript.

This modern web core technology being a security liability[1], invasive of privacy[2] and the facilitator of modern annoyances that gets in the way of the user, (ads, interstitial space, ...) it is an expected response from the user to disable it or restrict it to the actual domain serving the page.

[1]: http://thehackernews.com/2016/01/javascript-ransomware-malwa... [2]: http://motherfuckingwebsite.com/ and http://bettermotherfuckingwebsite.com/ and http://evenbettermotherfucking.website/

That's one way to go. You can also take the path of radical simplicity: only include what is absolutely necessary, and what is resilient enough to work in wide situations. To make a tool of the highest quality.

Sometimes a constraint like that can lead you to solutions even better than what you started with.

> only include what is absolutely necessary

Or you can write a robust design that starts with radical simplicity that is at least functional, and then progressively enhance the page with whatever features are currently available. The user shouold at least be left with something usable if the Javascript or CSS or font doesn't load.

This modern trend that tries to pretend that the User Agent will always support various features or that they can simply assume that network errors never happen just makes sites look shoddy and unprofessional.

JavaScript often fails to load due to network congestion or poor connectivity. In those cases, it is important to provide a good user experience with the HTML alone.

One of the key principles of the modern web is that JavaScript is NOT a 'core technology'; it's an added bonus. Please don't make your pages break without it.

And you can choose to not be an asshole and not get downvoted, but you'll just have to take what you deserve.

Nice catch, but I think you're a little too harsh. First of all, the site looks better than most other sites, with js off (I also use noscript). Secondly, one has to ask why js is disabled. The site probably looks as fine as it could in lynx or w3m. A spider can read the semantic markup fine. A screenreader while pronounce the text as well (or poorly) as is.

I think most people realize that there are certain limits to the combination of just html and css -- and that js can be used to change the trade-off between "good" and "perfect".

All that said, I also wish one could simply add a link to a font-file in the <head>-element and be done with it. But as web fonts are an attack vector, the people that run noscript, shouldn't be able to see that webfont either -- unless they take an action to trust the publisher in question (the site/host).

> I also wish one could simply add a link to a font-file in the <head>-element and be done with it.

You know you can do just that, don't you ?[1].

[1]: https://css-tricks.com/snippets/css/using-font-face/

Good to see he practices what he preaches: This is entirely readable in lynx and w3m.

Beautiful website.

That fails to render in Safari under iOS7.

It's an issue for me too, it caused by a bug with the CSS vh unit. The content is there, just a long way down! It's not too tricky to fix so I hope the author see this! (I tend to use js to fix this one)

Shouldn't be much on an issue, most I devices are on 9 or at least 8.

It was an issue for me too.

Edit: and I'm reluctant to upgrade because my wife who had the same phone had reduced wifi signal on both 8 and 9 after upgrading.

Couldn't agree more!

Also, Grimes is first mentioned under “Special Thanks.“ Does anybody know the reason? Aside from her exceptional talent as a musician.

Probably just because "Kill Vs Maim" is an awesome song that one might listen to on repeat while writing a long essay...

If I wrote credits in my commit messages, quite a few of them would have Grimes at the top.

Disagree completely, all I could see was the lack of even the fi ligature.

I guess font load times > 350ms and typography flickering across the entire page on load is "new".

Its gonna be interesting to see how a unique typographic identity develops on the web but its more of a technical problem than one of design. Technical innovation, not design heavy long form journalism will blaze that trail.

Anybody else getting a 'Forbidden' error?

Tried some isitdown services, they told me the site returns 200... I'm getting a 403 response.

First it was cloudflare with their captchas because I'm lucky enough to be born in Eastern Europe, now individuals put blacklists?

Web typography is a Forbidden Art. Mere mortals are not allowed to gaze into the profane heart of CSS.

(I can't access it either, from the US. Site seems to have collapsed under the traffic from HN.)

I found the wide interjected bits of content (quotes, images, graphs) really jarring; anyone have thoughts on this design approach? somewhat strange that these were also supplemented by things on the side.

That was a good read, thank you. However, presenting Tchichold's criterion to a modern multilingual website can be a bit overwhelming. How about Mandarin-Arabic website (I recently made one)? These are very different cultures. Both cultures have very strong opinions on typography. Both are very new to the Web. I say, typographical challenges for the real web are quite unique, and where I agree with the author - bad typography is much better than no typography at all.

This is one of the best articles I've been linked to from here. Makes me excited about designing web pages, which never happens.

I still use the old and known fonts such as Arial and Times New Roman. In my opinion no new font can ever replace the oldies.

I'm not glad with all the new font. I still like my Arial's and Verdana's of this world and do not care for anything new.

Content is king and always will be. Get that right with 'default-ish' typography (and whitespace) and you are good to go. To convey your message put effort into getting that content into sensible length sentences with sensible headings and 'p' tags (not rocket science). That is it, job done.

In my professional life I have worked with many people that call themselves designers and 'know better than me' about typography. These people really do not care one iota about actual content. They will give me PDF 'designs' signed off as the ultimate in design (according to them) with strange things done to fonts, e.g. extra spacing between characters that has to be replicated. They will specify one of those useless web fonts that is only going to be licensed on the live site and not my development box. They will place 'lorem boring ipsum' in the page instead of the client's content. They will make extra sure that the text will not be easy to read by anyone on a Windows PC that happens to have a high-glare screen. Accessibility standards, e.g. contrast ratio and text size really will not matter to them, for some reason they know best.

To make matters even worse, these charlatan designers will not even work in the medium of the web. They have some useless Adobe desktop publishing tool from the 1990s to work with and do not ever have the 'inspect' window open in a browser, trying things out on live content. It always has to be baked in with some useless amount of 'point size' and 'dpi' settings in their clumsy Adobe tool. I feel like they are still on 'Duplo' Lego when they should be on 'Technik' Lego (where the real fun is). Their little flourishes such as changing the letter spacing are usually an insult to the original font designer, but that is something they feel compelled to do, much like how a Betty Crockett Cake Mix deliberately has 'add egg' so that the person baking it can feel they have actually had some input into things.

When working with charlatan designers and a 'big up front design' waterfall approach (typical of small web design agencies) the CSS is rarely elegant and neat. Every page is a horrid mess of fixes to get something approximate to the designs signed off. You cannot have just the one definition for H1 (or p, or li or anything else basic), each div on each page will have a smorgasbord of padding, margin, position and other monsters just to get the thing positioned as per some dufus PDF. Normally this becomes a specialist task, needing a whole team of 'frontend developers' to get this botched text looking sufficiently illegible. This brings in another layer of people who don't care about things like page load time and flashes of un-whatever content.

Yet, out there, there are plenty of sites that have not been shot in the foot by charlatan designers and their useless design processes. They have had the sense to use things like Bootstrap or Material, where it all works just fine, no useless Adobe products needed. I would say that these new design approaches are leading the way, enabling web sites to be content and accessibility focused with typography that is far better than what the typography obsessed 'lorem ipsum designers' come up with.

The 'art' of web typography is evolving for the better, the only thing that has been holding it back are those that think they know best about fonts and believe the only way to design stuff is with 1990's desktop publishing tools. Luckily they are a dying breed as are the web agencies they work for. Lets keep things content focused and leave actual design ('how it works') to the professionals rather than those that think they know best but actually have not engaged in learning the basics of CSS.

Throwing out the baby with the bathwater. These people have done their 10k hours in the field while you've done it in a different field - and it just comes off as ignorant bullying to call them charlatans etc.

For example:

> Their little flourishes such as changing the letter spacing are usually an insult to the original font designer, but that is something they feel compelled to do

Yes that's what's supposed to happen. Why? Because font technology is incredibly crude and undeveloped when it comes to letter spacing and making things _readable_. Calling it out just displays ignorance of the field, and ignorance of one's own ignorance to boot.

_But_ having said that, I think you are getting at the key point - which is that there is a huge impedance mismatch between centuries of print design (e.g. point size, spacing that digital fonts can't do) and the new constraints and capabilities of digital (e.g. variable contrast, accessibility). That is reflected in toolsets and skillsets (this thread demonstrate well that technically trained people are equally ill-equipped to recognise, let alone bridge that). This is what the whole article was about even if it did seem to go around the houses a bit.

Random: This is a very nicely designed blog.

Tschichold.. now there's a name I haven't heard in years. I miss design.

Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact