Web Typography: How much leading do browsers add?

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Prelates, Moderators General

Web Typography: How much leading do browsers add?

Postby steg0010 » Tue Feb 21, 2012 12:57 pm UTC

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
steg0010
 
Posts: 9
Joined: Tue Feb 21, 2012 12:45 pm UTC
Location: Middlesbrough, UK

Re: Web Typography: How much leading do browsers add?

Postby OmenPigeon » Tue Feb 21, 2012 10:48 pm UTC

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.
As long as I am alive and well I will continue to feel strongly about prose style, to love the surface of the earth, and to take pleasure in scraps of useless information.
~ George Orwell
User avatar
OmenPigeon
Peddler of Gossamer Lies
 
Posts: 673
Joined: Mon Sep 25, 2006 6:08 am UTC

Re: Web Typography: How much leading do browsers add?

Postby steg0010 » Wed Feb 22, 2012 2:40 pm UTC

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?
steg0010
 
Posts: 9
Joined: Tue Feb 21, 2012 12:45 pm UTC
Location: Middlesbrough, UK

Re: Web Typography: How much leading do browsers add?

Postby Xanthir » Thu Feb 23, 2012 1:35 am UTC

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.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))
User avatar
Xanthir
My HERO!!!
 
Posts: 4336
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex

Re: Web Typography: How much leading do browsers add?

Postby steg0010 » Thu Feb 23, 2012 12:19 pm UTC

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
steg0010
 
Posts: 9
Joined: Tue Feb 21, 2012 12:45 pm UTC
Location: Middlesbrough, UK

Re: Web Typography: How much leading do browsers add?

Postby Xanthir » Fri Feb 24, 2012 12:10 am UTC

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.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))
User avatar
Xanthir
My HERO!!!
 
Posts: 4336
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex

Re: Web Typography: How much leading do browsers add?

Postby Steax » Sat Feb 25, 2012 10:00 am UTC

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,
steg0010 wrote: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.
In Minecraft, I use the username Rirez.
User avatar
Steax
SecondTalon's Goon Squad
 
Posts: 3037
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: Web Typography: How much leading do browsers add?

Postby Xanthir » Mon Feb 27, 2012 6:03 pm UTC

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.)
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))
User avatar
Xanthir
My HERO!!!
 
Posts: 4336
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex

Re: Web Typography: How much leading do browsers add?

Postby hotaru » Tue Feb 28, 2012 2:20 am UTC

Xanthir wrote:(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".
Code: Select all
uint8_t f(uint8_t n)
{ if (!(
n&1)) return 2;
  if (
n==169) return 13; if (n==121||n==143) return 11;
  if (
n==77||n==91) return 7; if (n==3||n==5) return 0;
  
n=(n>>4)+(n&0xF); n+=n>>4n&=0xF;
  return (
n==3||n==6||n==9||n==12||n==15)?3:(n==5||n==10)?5:0; } 
User avatar
hotaru
 
Posts: 951
Joined: Fri Apr 13, 2007 6:54 pm UTC

Re: Web Typography: How much leading do browsers add?

Postby EvanED » Tue Feb 28, 2012 3:15 am UTC

hotaru wrote:
Xanthir wrote:(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.")
EvanED
 
Posts: 4154
Joined: Mon Aug 07, 2006 6:28 am UTC
Location: Madison, WI

Re: Web Typography: How much leading do browsers add?

Postby Steax » Tue Feb 28, 2012 4:07 am UTC

Xanthir wrote:(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.)

hotaru wrote:
Xanthir wrote:(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.
In Minecraft, I use the username Rirez.
User avatar
Steax
SecondTalon's Goon Squad
 
Posts: 3037
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: Web Typography: How much leading do browsers add?

Postby Xanthir » Wed Feb 29, 2012 6:22 pm UTC

Steax wrote:
Xanthir wrote:(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.

hotaru wrote:
Xanthir wrote:(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.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))
User avatar
Xanthir
My HERO!!!
 
Posts: 4336
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex

Re: Web Typography: How much leading do browsers add?

Postby Steax » Thu Mar 01, 2012 5:09 am UTC

Xanthir wrote:
Steax wrote:
Xanthir wrote:(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.
In Minecraft, I use the username Rirez.
User avatar
Steax
SecondTalon's Goon Squad
 
Posts: 3037
Joined: Sat Jan 12, 2008 12:18 pm UTC


Return to Coding

Who is online

Users browsing this forum: e^iπ+1=0 and 10 guests