Web Typography: How much leading do browsers add?

[steg0010]

I am attempting to write a set of rules to stick to when styling pages to ensure vertical rhythm is maintained. I have noticed that browsers add their own leading to text, additional to what has been set, but I can't find how much each add.

If there is a way to stop them from adding their own leading then this would be appreciated, but if not the exact values would be useful, to create dynamic styles.

Cheers. Steg0010

[OmenPigeon]

http://www.cssreset.com/

All the CSS rules in there are designed to reset the browser's defaults to something more basic so that you can start fresh without worrying about each platform's quirks. You probably don't want to take them wholesale, but they should be a good source of inspiration.

[steg0010]

Thank you for your help. I had a look at those, but I am still having the same problem. I have realised that the problem only occurs when setting the font-size using a percentage. Even though each browser has the default font set the to the same (New Times Roman - Size 16), when setting the size to anything other than 100% each browser has their own interpretation. Firefox seems to be the one that is being problematic, then again it could just be the only one that is doing what it is supposed to.

To observe the problem I've been creating background images 1px by npx, where n is equivalent to the line-height (found by trial and error, with the line-height being set to 1, and the font-size being changed, set as a percentage). I then display a single paragraph of text (a large extract from Shakespeare's Romeo and Juliet) over the top of the tiled background and compare the results in Chrome, Firefox and IE. Chrome and IE show the same results, but the line-height in Firefox appears to be smaller. One test I did, Chrome and IE showed one background line for each text line. Firefox showed 35 background lines for every 36 lines of text.

Do browsers show font sizes to the same scale, pixel-wise, or is the problem with the browser's interpretations of percentages, differing in how they round values which are not exact?

[Xanthir]

Browsers add half-leading both above and below each line, equal to half the difference between the font-size and the line-height properties. The default line-height is allowed to vary between 1x and 1.2x the font-size.

Still, maintaining vertical rhythm generically is very difficult/impossible right now, as the height of a line can sometimes vary if it contains tall contents like images. The CSSWG is restarting work on the Line Grid module, which makes this trivial.

[steg0010]

Oh I didn't know about the Line Grid module. I'll keep an eye out for that in the future. I was just wondering if anyone knew the exact values so I could attempt to write a .js that modifies the .css according to the browser, to try and perfect the rhythm, changing the line-height, image sizes, padding, margin and border sizes etc. It probably never really use it, I just want something to code to get a bit of experience in writing JavaScript and CSS.

Cheers :¬) Steg0010

[Xanthir]

I described the amount of leading - each line is the size of the line-height property, which is done by taking the line box (generally the height of the font-size, though it may be larger if there are images or such in the line) and adding half the difference between font-size and line-height on both sides of the line box.

[Steax]

Why not simply use pixels or ems over percentage points? You won't be able to get consistent pixel line heights if you let the user-agent set the font size. Modern browsers treat pixels flexibly, too - I've found the old "use percentages so they scale better" to be archaic and outdated.

Here's a fiddle that will pretty much always end up the same on any modern browser.

To be succinct,

Do browsers show font sizes to the same scale, pixel-wise, or is the problem with the browser's interpretations of percentages, differing in how they round values which are not exact?

They don't, which is why resets tend to just fix them at a value.

[Xanthir]

Pixels are indeed a perfectly fine unit to size text in - the old advice about always using ems (or basing your layout on ems) is outdated, as it was based on older browsers that only changed the text-size when you zoomed.

Using percentages is still a good thing to do, though, because one thing that's still true is that users have control over the page's default size, and some of them do indeed set it (usually larger) so they can see the page better. Using percentages to size your text respects this choice, which is good.

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

[hotaru]

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

acutally, set any font size to anything other than "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", or "inherit" and you're actively being a dick to everyone. and body text should always be "medium".

[EvanED]

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

acutally, set any font size to anything other than "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", or "inherit" and you're actively being a dick to everyone. and body text should always be "medium".

Wouldn't percentage size be fine too? If not, why not?

(I don't do much in terms of web dev so I'm not familiar with a lot of "best practices.")

[Steax]

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

For long-form text, where the goal is for reading. For pages that need high information density, 14px is good enough from my testing.

(Sorry to nitpick, but I've recently been really annoyed at accessibility purists that demand EVERYTHING be 16px and higher.)

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

acutally, set any font size to anything other than "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", or "inherit" and you're actively being a dick to everyone. and body text should always be "medium".

And the reasoning behind that is? Percentages work just as well.

[Xanthir]

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

For long-form text, where the goal is for reading. For pages that need high information density, 14px is good enough from my testing.

Sure, but most pages are actually meant for reading. If you're generally just going to skim the page and only read small bits, then okay.

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

acutally, set any font size to anything other than "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", or "inherit" and you're actively being a dick to everyone. and body text should always be "medium".

And the reasoning behind that is? Percentages work just as well.

Yes, there's nothing wrong with percentages.

[Steax]

(While I'm at it, body text should be a minimum of 16px. Any smaller and you're actively being a dick to older people.)

For long-form text, where the goal is for reading. For pages that need high information density, 14px is good enough from my testing.

Sure, but most pages are actually meant for reading. If you're generally just going to skim the page and only read small bits, then okay.

I mean, for things like web apps, tooltips, small indicators/labels, etc. Typically places that have lower positions in the visual hierarchy; it's important for them to have a slightly smaller text size to indicate that position. If someone wants even these to be at 16px, that means body text should be at 18px or something.