Exactly. For me, the indented list emphasizes the distinct structural entity, contrasting it against the bulk of the text. This makes lists easier to recognize (especially the short ones in narrow columns, like in your example) while previewing and skimming the reading material. You mention pattern recognition at the start of the article, and this is exactly the thing that makes pattern recognition easier, for me at least. And I would prefer “practically useful” over “typographically correct” every time :-).
Compact text is a design decision, in many but not all cases, that is unrelated to wasting paper.
Don't. Use the user's fonts.
It ends up being a trade off between performance and UI. But why can't we have both? Why can't the user say "always use x and y fonts because I know best" and give the designer the opportunity to put the fonts they want in without impacting performance.
Part of a web design job should be testing your creation under different user selectable options. Like zoom, font selection, screens of various quality, etc. But most designers still treat web browsers, like it's a piece of paper they're in complete control over.
None of it is specific to custom web fonts (@font-face). Rather, it is about text spacing, indentation, justification, etc.
Don't change the user's default text spacing, indentation, justification. Respect his and his system's choices.
[1] PNG24 199 144 bytes
[2] JPEG 94 699 bytes
[3] PNG8 47 155 bytes
[2] https://user-images.githubusercontent.com/3129436/47068393-d...
[3] https://user-images.githubusercontent.com/3129436/47068392-d...
Non indented bullets? That is just wrong on so many levels (pun intended). Negative letter spacing is way less legible IMO. Etc.
Also, the web is a different medium than paper. These old school typographic idioms are becoming less and less relevant every day.
The most used websites such as Facebook or Twitter are proof that users don't really care about old school vertical rhythm.
OTOH I will agree that we still haven't distilled the graphical language of the web. Hopefully in a couple of decades we will have a consensus based on a historical body of practices.
I don't think people are aware of the subtitles of typography, so it's nice to see articles like this.
If your page is mostly memes and 1-2 sentence quips like Facebook and Twitter, sure, this is probably overkill. If your page is text heavy like blogs and documentation, this is your way to stand out.
I'm not very artistic, so my edge is technical. Topography is precisely the type of overlap that can really help my work stand out, so I'd love to see more of this type of content.
The game has changed and from what I've seen a lot of typographers still live in the paper age.
Facebook and Twitter are aggregations of ultra-short-form mixed media content; vertical rhythm is a technique applicable (or at least most applicable) to long-form textual (or at least text-dominant) content.
Yes, it does look neater if you have a striped background and the lines of text align with that. However, you won't use a striped background. There is nothing else those lines of text align with unless you stick the text into multiple columns, which you probably won't do since it's annoying (zigzag scrolling) and pointless (there is no height limit on websites).
I think it's more important to pick distinct headline sizes which still look good when they wrap around. If they don't perfectly align with some imaginary stripe pattern which no one is imaging, then so be it.
Vertical rhythm, which is mentioned in the book, is mentioned because when you print on paper pages you want the lines to overlap on the front and back of the page (so they don't bleed through making it harder to read), and so when the one page right next to the other one aren't misaligned.
I don't really think those apply to the web so much.
That said, it's all too easy in CSS to end up with wonky padding/margin if you don't have a consistent rule about whether to apply it to the top or bottom and by how much. So it's possible to end up with headlines up against body text or big gaps before the first paragraph, etc. I think that's worth fixing.
I recommend to use only top margins and to apply them to every element which isn't the first child (`whatever:not(:first-child)`).
This way there is no extraneous spacing at the very top or very bottom, which means the only spacing around the content is the padding of the container.
It's the same idea as the "lobotomized owl" selector (`* + *`). It's just more explicit.
https://screenshots.firefox.com/fsetQcI74tLZbwkd/betterwebty...
[Edit: I probably should switch off webfont blocking when checking an article on fonts]
Vertical rhythm is great in theory. You can even program it in if you use SASS or something like that.
The problem is every example of vertical rhythm is a blog post on a blank page with a school paper ruler underneath.
Even if you add multiple columns it will look great, but the moment you add any sort of visual offset it will break things.
Cards are all the rage right now in UI design. Usually you want card headers to abutt the top of the card by some padding offset (padding on the card). Now you need to make that heading work without padding and still obey vertical rhythm. Good luck.
Borders? Haha sorry, you've now introduced an off by one error (or two if you put them on top and bottom of your object). You probably thought of that already for tables, but you didn't think of that for your buttons or any of your form elements (who also have labels that you don't want to be oddly distant from their form elements).
I could go on, but outside of a mimnimalist page I've yet to see it be more of a benefit than a PITA
But it's not impossible. You just gotta to the work.
I don't prefer cards and borders anymore than I prefer keeping my job.
Show me a fortune 500 website that uses 0 borders, cards, or forms. If you prefer vertical rhythm to those things you prefer to be unemployed.
First line indentation is a vertical space saving method for extra seperation between paragraphs, but unlike paper, vertical space (at least once you go beyond the fold) is free on the web.
Personally, I prefer fiction, even on the web, to have first-line indents rather than spaced paragraphs, because I simply find it easier to read. This is likely in part because fiction often has much shorter paragraphs when you get into heavy dialogue. For non-fiction, I consider it more of a tossup.
No, it doesn't, generally.
It notes spaced paragraphs are the norm on the web while indentation is common in print, explains how to do indented paragraphs properly on the web, and then recommends indentation for certain content, specifically “for texts that aren’t broken down into different sections, divided by titles or a lot of images.”
> but as far as I can tell, they use double (or at least extended) vertical spacing as paragraph seperation
And the article is divided by both titles every few paragraphs and frequent images, so it doesn’t fall into the class of content for which it recommends indentation of paragraphs.
Guess I was too quick on the trigger there.
It's not like a good algorithm hasn't been around since the '70s.
Actually – before DTP – designers did it like that in print as well:
https://archive.org/details/GridSystemsInGraphicDesignJosefM...
What is the difference between legibility and readability? What do those terms mean precisely? Before this moment, I might have used them interchangeably.
Hard to get text layout to run true on the many devices that I have tested. I have dropped Internet Explorer as a design target, and Android 4.
These principles were easy enough to follow when I started, 30 years ago, when we set pages for paper and railed against everybody's insistence on (ab)using Microsoft Word.
And now, the browsers render slightly differently, Windows macOS Linux Android iOS need at least some spot-checks to know where the pain points are... And we must adapt to the document width dynamically.
It is a challenge. I don't yet have a sense of measure, how to adjust the information density from small phone to large tablet or desktop.
(And while I'm not looking, Variable Fonts add their own dynamic micro typography tweaks. I just set Opticsl Sizing and punt.)
Their advice was for physical media while typesetting for the web is clearly a different beast. Trying to emulate print media is a great way to create a poor online experience.
The spacing between words is better in the "better" version than the "bad" one, but if the point is that we read by words, then breaking up words across lines seems like a much graver sin than bad inter-word spacing.
the text on the bottom, "better", hurts me physically. just looking at it literally gives me nausea.
