The New Web Typography
robinrendle.com
robinrendle.com
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.
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.
https://www.cl.cam.ac.uk/~mgk25/ucs-fonts.html
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.
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.
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.
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.
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?
* { 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.
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...
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.
[1]: https://developer.mozilla.org/de/docs/Web/CSS/@font-face/uni...
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.
Additionally it's a very self aware sort of wankery in my experience :)
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?
Not trying to call you out, just making a point that we all participate in a bit of wankery when it suits us.
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...
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.
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/
Sometimes a constraint like that can lead you to solutions even better than what you started with.
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.
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).
You know you can do just that, don't you ?[1].
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.
Also, Grimes is first mentioned under “Special Thanks.“ Does anybody know the reason? Aside from her exceptional talent as a musician.
If I wrote credits in my commit messages, quite a few of them would have Grimes at the top.
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.
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?
(I can't access it either, from the US. Site seems to have collapsed under the traffic from HN.)
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.
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.