Live data from Hacker News

The New Web Typography

robinrendle.com

21–30 of 67 posts

Re: The New Web Typography

#21
post #19
post #17

Earlier quoted context omitted.

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

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

Re: The New Web Typography

#22
post #18

> 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 weake…

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

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.

Re: The New Web Typography

#23
post #21
post #19

Earlier quoted context omitted.

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…

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

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.

Re: The New Web Typography

#24

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.

Re: The New Web Typography

#25
post #18

> 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 weake…

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

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.

Re: The New Web Typography

#26
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.

Re: The New Web Typography

#27

Earlier quoted context omitted.

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

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.

Re: The New Web Typography

#28
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...

Re: The New Web Typography

#29
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.

Post reply on HN