Comment by robenkleene | Hacker News Reader

Comment by robenkleene | Hacker News Reader

Parent Full thread

Fun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples:

- I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes.

- I've never heard of there being a rule for how much space goes above a paragraph (this is a funny thing about web typography, since in print you indent the paragraph so there's no additional space). But I guess I'd consider it correct from a vertical rhythm standpoint to either use the line height or half of it.

- Regarding vertical space between lines, what I've heard is you want to make the spacing between lines visually appear greater than the space between words. As far as I know this is just done by eye. (I.e., so the rule is to choose a leading that makes your space between lines appear larger than the space between words.)

- I think there are exact header sizes that are better than picking an arbitrary font size that seems to look big enough. The trick I use here is to take the [traditional point scale](https://markboulton.co.uk/journal/five-simple-steps-to-bette...) and convert it to a ratio relative to 12 point. This is a way to bake historically refined font ratios into your design.

- Personally, when choosing margins I'd use a [grid system](https://practicaltypography.com/grids.html), which will give you an exact gutter size. But admittedly this isn't too important for a single column of text.

- There's simple rules that are missing here like make sure your width allows for 7-12 words per line, which [research](https://baymard.com/blog/line-length-readability) has illustrated improved readability.

- Another good missing rule is never use any two font treatments on the same page that are too similar to each other. This usually means having two things different between two font treatments, e.g., a different font size and weight for say a subheading vs. a heading.

But "stricter rules", apart from not being absolute enough to be strict, depend on fonts (including mostly invisible metrics like ascenders and descenders vs. line height) and on what kind of text is being spaced. For example, the visually important vertical rhythm of ink and gaps is dictated by line spacing, but in relationship with x-height (for mostly lowercase text), or capital height (for uppercase text) or something in between, and between lines in adjacent fonts depends on where the respective baselines are located.

> I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes.

I've no problem using it as a decent rule of thumb, but what's the evidence this is the one correct way to do things?

Great question, here's the way I look at it:

1. Print design has honed in on this approach with remarkably consistency. I did a study of various publications (e.g., magazines and books) when I was first learning about vertical rhythm and found that practically every publication I looked at implements vertical rhythm. But this is also a bit of red herring, because in print publications, you almost always have multiple columns, and multiple columns have additional issues when vertical rhythm isn't implemented because it means body and headline copy won't be along the same baseline (an issue that isn't present in a single column text for example). But I still find it remarkable how consistently the rules are implemented in print design, given how little people talk about it in web design.

2. For me personally, before I learned about vertical rhythm (which I learned along with grids, and typographic proportion), I found everything I designed always felt sloppy in some undefinable way. Now that I use these strategies I no longer see that sloppiness in my designs. Purely subjective, but what I'm trying to say is that to me these systems solved a problem in my designs that I wasn't able to solve just "by eye".

Neither of those are objective of course, but those are just the ways I personally have been convinced they're "the right way".

Quick follow-up here: The recommendation I have to someone curious to learn if they think vertical rhythm is "the right way" is to take a look at a paper copy of well-typeset publication (e.g., maybe Wired or The Economist) and then compare how you feel looking at that article vs. looking at an example of web typography (like something on Medium). I find web typography looks clearly sloppy to me in comparison.

I find vertical rhythm to be kind of arbitrary. It's handy if you want a starting point, but sometimes a 1.8-line vertical space just looks better than a 2-line one. There are no "correct" choices, only choices that look better or worse, and even that's subjective. Simple ratios make for easy design, and often decent design, but not necessarily the best design.

If you don't have an eye you shouldn't be doing this stuff except under duress. Asking for rules is asking for an algorithm that would let you "design" (ok, lay-out) mindlessly and sightlessly. Mostly, people don't want to behold those results, and editors don't want to reformat every document. Of course there are guidelines, best practices, a history of what's known to work/look cool and of what's known to not work/suck/look crummy.

>since in print you indent the paragraph so there's no additional space

I took a quick glance at my bookshelf and it seems to be the case that this is sometimes true but most of the books I looked at don't indent and do add some additional line spacing between paragraphs.

Reply on news.ycombinator.com