A guide to rhythm in web typography (betterwebtype.com)

I block fonts with uBlock and see this all the time. Usually the icons are pointless and I don't miss them. In bad cases I'll toggle fonts on and reload the page.

> if you don't have a consistent rule about whether to apply it to the top or bottom and by how much.

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.

> The most used websites such as Facebook or Twitter are proof that users don't really care about old school vertical rhythm.

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.

> Article recommends indentation on first line of a new paragraph,

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.

Well, it's not as if the reason we have the "standard" of blank lines between paragraphs on the web because early web browsers made a considered typographic decision against first-line indents. :) I don't think there was much conscious design in early web browsers at all with respect to typography and presentation, and this is actually one of the few "standards" established in those early days that we're still following over two decades later. That's not to say that it's a bad standard, just that it's a relatively arbitrary one.

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.

It would be great if you could share some examples!

Yes, we should absolutely respect the settings in the "typography" preference pane that all browsers have, where all users lovingly set their preferred text spacing, indentation, and justification. Oh wait! There isn't one. In fact, most users not only haven't explicitly made these choices, they can't explicitly make these choices. Are you arguing that the "system's choices" are some bastion of well-considered design sensibility that we violate at our peril? Really? Nuts to that.

It's not the curved edge that is causing the problem. The bullets are actually partly off the actual edge of the screen and are being clipped.

If I rotate the device to landscape mode, then the page adds some margin and the bullets aren't clipped any more. I didn't look at the page source in detail - perhaps it is using some kind of media query on the width and reducing the left margin on a narrow screen.

I think the real lesson here is that many of these tricks to achieve some kind of "typographical correctness" are simply a bad idea. Users don't expect it, and it's very likely to break on some device you haven't tested.

People who view your page aren't looking for typographical correctness. They are looking for something easy to read that is familiar and comfortable and works on whatever device they happen to be using. The more tricks you put in, the less likely you are to achieve that.

And honestly, some of this just seems weird, even for print. I don't read much on paper any more, it's all phone/PC/Kindle. But I just thumbed through a bunch of my old books, and none of them follow the "correct" conventions. Bullet lists, (a) (b) (c) lists, and 1. 2. 3. lists are all indented much like the default web formatting. They don't outdent a quote mark at the beginning of a paragraph, the quote mark just appears in the first column like any other character.

I don't know where the author got these ideas about "correctness", because I sure don't see it in my professionally typeset books.

In Chrome, open the dev tools, click the Device Toolbar button near the top left, and in said toolbar set it to Responsive and play with the viewport width (or set it to iPhone 5). It's this particular example page at fault for not realizing that "list-style-position: outside" means that it _will_ overflow which means that for said overflow to not fall outside the viewport, you need a container (which in the case is the body element) having some absolute (not relative to the viewport like this example's small percentage) padding/margin at least as large as the overflow. A properly executed version of the hanging technique would do exactly that.

"Web browsers render justified text very poorly. They don’t have the necessary algorithms to properly set the spacing between words and even individual letters (which is what proper text editors do). That’s why justified texts come with patches of space between the words: rivers of white between the black of text. This makes it very hard to read so justifying text on the web should be avoided at all costs. Web browsers are getting better in supporting hyphenation, though. If you do use justified text, complement it with hyphenation. For now, I recommend not using justified alignment at all."

It's not like a good algorithm hasn't been around since the '70s.

I have used a vertical grid in a couple of fairly complex web designs. It's a lot of work to compensate for things like borders and padding and keep all of the text on the baselines. For most paying gigs, it's probably not worth the time.

But it's not impossible. You just gotta to the work.

When I took a typography and poster design class in Switzerland this past August, the advice about justification was the opposite: always use justification as a reasonable default that machines can handle and only use ragged right if you have the time to adjust each line by hand. Proper ragged right text should alternate long and short lines in a specific way that algorithms can't handle (deciding if/how to break up words and lines, perhaps even modifying the content to fit). This was coming from Lars Müller and typographers with decades of experience so I'm inclined to trust them, but the alternating ragged lines still looks a bit unnatural at first if you are used to MS Word style text alignment. Once you see it done properly though it's hard to miss when it's done poorly.

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.

I (web dev) personally just read a book on typography and it was eye opening how much I didn't realize I didn't know.

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.

I disagree. You always leave the edges empty or at least put non-essential information there. There are so many contexts where the edges aren't there, such as:

- print (not really applicable to the web) - projectors/TVs (my TV cuts off ~5% from each edge) - sticky notes on the edge of the monitor - anti-glare screen covers

It also feels cramped to read at the edge of the screen. I like having the negative space there to frame the text.

It seems weird to say "And because (as we learned earlier) we read word by word, too much spacing between words breaks this rhythm" as a reason to avoid justified text, and then immediately after say that you can temper bad justification by telling it to auto-hyphenate words, so now "masters" is "mas-\nters" and "artisan" is "artis-\nan". That seems like a much bigger hit to quick readability than the poor justification they were initially complaining about. Their "better" example is easily worse than their "bad" example for readability, I would think, and to my eyes it's a bigger difference than between their "bad" and "good".

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.

It's not important because it really doesn't affect usability, as evidenced by millions of users.

The game has changed and from what I've seen a lot of typographers still live in the paper age.

That annoyed me as well, seems like the worst possible choice of format and quality for the given images.

I would guess that legibility is whether it is readable at all, where readability is how easy it is to read. Something that is 100% legible might still not be easy to read - large blocks of 9pt text in a low-contrast grey colour on a white background for instance (and IMO).