3 ms·
> In this example I picked 20px to make things easy on the eyes. Second sentence after "PARAGRAPHS AND BODY TEXT". Those lines are 20px apart so that, in his
by vitovito 14y ago
> In this example I picked 20px to make things easy on the eyes.
Second sentence after "PARAGRAPHS AND BODY TEXT".
Those lines are 20px apart so that, in his opinion, text sitting within those lines would be comfortable to read.
If you're rendering typographic baselines in a browser, then you're drawing the lines every 20px starting with 0,0 in the upper left corner of the browser viewport, so you want your text to line up with that.
- scott_s 14y agoIn other words, he decides the line height (his rhythm) first, then fits his text into it. I was not clear on that point either. The problem I have, then, is that he never really explains why that's a good approach, or from where one would pick a line height to key off from. How will thinking in terms of rhythms be an improvement over fiddling with font sizes and line heights until it looks "right"?
- mattdw 14y ago"In my experience a line height of 1.5 x the base font size is a great place to start, and is usually right on target." You start with your base font size, you choose an appropriate line-height for that (based largely on designerly notions like visual weight, column width, contrast, intuition, etc.) then that lineheight (in pixels) becomes your rhythm. The idea is that elements like headings, short quotes, possibly images are less sensitive to line-height than body copy, so it's okay to fudge them a little bit to keep the overall rhythm intact.
- pjungwir 14y agoThat sentence says he wants a 20px font ("base font size"), but it doesn't explain anything about the line spacing. Right?