
The New Web Typography - thefutureproof
https://robinrendle.com/essays/new-web-typography/
======
mrob
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.

~~~
digitalengineer
> 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.

~~~
juliendorra
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.

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

------
martgnz
At the moment I'm using loadCSS
([https://github.com/filamentgroup/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?

~~~
coldtea
> _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?

~~~
x0
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.

~~~
redahs
> _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.

[https://wiki.archlinux.org/index.php/Fonts#Fallback_font_ord...](https://wiki.archlinux.org/index.php/Fonts#Fallback_font_order_with_X11)

~~~
x0
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.

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

~~~
akkartik
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](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](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](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.

------
Animats
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...](http://www.theatlantic.com/business/archive/2014/09/publishers-
gave-away-122951031-books-during-world-war-ii/379893/) [2] [https://s-media-
cache-ak0.pinimg.com/236x/55/0e/6e/550e6ed4c...](https://s-media-cache-
ak0.pinimg.com/236x/55/0e/6e/550e6ed4cf6f35b24455edafbcac70d7.jpg)

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

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

~~~
erikpukinskis
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.

~~~
pdkl95
> 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.

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

------
fiatjaf
Beautiful website.

~~~
felipeerias
That fails to render in Safari under iOS7.

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

~~~
imron
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.

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

------
9248
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?

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

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

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

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

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

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

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

~~~
dreamfactory2
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.

------
kylehotchkiss
Random: This is a very nicely designed blog.

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

