Smaller font size for inline code destroys vertical rhytm

**lundberg** · Feb 3, 2010 16:01

Hello

I'm trying to keep a vertical rhythm on my site using a baseline. However when I make the font size smaller for inline <code> the vertical rhythm is disrupted, why is that?

The default text is 16px and the code should be 14px leaving me with .875em font-size and 1.714em line-height for <code>.

Is there something else I need to add to the css for it not to mess with the paragraph line-height?

Regards,

**markbrown4** · Feb 3, 2010 16:21

Doesn't Baseline require you to use specific px font sizes to acheive that?

That means you can't make the font smaller for one element.

**PicnicTutorials** · Feb 3, 2010 16:48

If I understand the problem, try making the line height for the code line-height:1; in the past I've used AP to keep it from messing with my line height also, but that probably won't help here.

**Luki_be** · Feb 3, 2010 17:05

Originally Posted by lundberg

Hello

I'm trying to keep a vertical rhythm on my site using a baseline. However when I make the font size smaller for inline <code> the vertical rhythm is disrupted, why is that?

The default text is 16px and the code should be 14px leaving me with .875em font-size and 1.714em line-height for <code>.

Is there something else I need to add to the css for it not to mess with the paragraph line-height?

Regards,

If you have variations in text size the different text must take up a multiple of the basic leading. You do this by adjusting the line-height and margin accordingly.

Here's how to maintain your rhythm.

**lundberg** · Feb 4, 2010 06:33

Originally Posted by EricWatson

If I understand the problem, try making the line height for the code line-height:1; in the past I've used AP to keep it from messing with my line height also, but that probably won't help here.

Thanks, I tested and it seems to work with 1em. but why does 1em work instead of 1.714em. I've included some test html and a background image which explains the problem.

I got the sizes by doing this. The default size is 16px (1em) and line-height is 1.5em. That makes the base line 24px (16*1.5). When I then wanted the code to be 14px I first did 14/16 to get the font-size which is 0.875em and 24/14 which is 1.714em.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		
		<title>Vertical rhythm test</title>
		<style type="text/css" media="screen">
			* { margin: 0; padding: 0; }
			body { font: normal 100% Helvetica, Arial, sans-serif; background-image: url(baseline.png); }
			html > body { font-size: 16px; line-height: 1.5em; }
			code { font-size: .875em; line-height: 1.714em; }
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa <code>qui officia deserunt</code> mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</body>
</html>

**Stomme poes** · Feb 4, 2010 06:55

but why does 1em work instead of 1.714em.

The default size is 16px (1em) and line-height is 1.5em.

Ah, but that's not true a lot of the time.

If you say 16px it'll be 16 px.

On my windowing system, 1em may be bigger. Everything looks bigger in Gnome.

Anyone with vision difficulties may have their machines set to Large Fonts or simply text-enlarged. Now 16px = 16px (except when screen resolution/dpi has been changed) but 1em might be much bigger.

So when you're mixing 16px with 1.5em, you may be getting all sorts of different things for different users. I'd say either keep them all em or all px.

Also, 1.743em might be rounded in any which different direction depending on browser.

And, what it I don't have arial or helvetica? You stated "sans-serif" which is good, but my sans serif is apparently a pretty big font (seems to be the Linux "Sans" which at least in Gimp is a bit bigger than Arial or Helvetica).

**PicnicTutorials** · Feb 4, 2010 07:31

Originally Posted by lundberg

Thanks, I tested and it seems to work with 1em. but why does 1em work instead of 1.714em.
[/html]

I don't know man, I just know how to fix some things.

**Paul O'B** · Feb 4, 2010 11:33

Just use a unitless line-height in the body and you won't need to change anything.

e.g.

Code:

body{line-height:1.5}

As I see it the uneven lines are because the code element has a smaller font size of 14px and by default it sits on the baseline. You have increased the line-height so that it equals 24px for this code element and therefore half leading is added to the top and bottom of the font in the code element (5px top and bottom).

Now because the smaller font sits on the baseline the addition of the half-leading on the bottom causes the element to poke out of the line-box and the line height therefore increases to accomodate that element.

If you were to apply vertical-align:top to the code element then the line-height wouldn't have changed. In reality you don't need to set a line height for the smaller item anyway and if you did you should use something smaller which is why something like 1.5em (or indeed 1em would work).

**lundberg** · Feb 4, 2010 15:32

Thanks for explaining. I'll read Eric's post about it, thanks!

**RyanReese** · Feb 4, 2010 15:35

If you apply 1.5 without a unit it will be 1.5 * whatever the currnet font size is

.

If the font is 16, then 1.5em would make it 16*1.5 which would = 24

http://reference.sitepoint.com/css/line-height

**Stomme poes** · Feb 5, 2010 02:24

Oh, I'd always thought that when you said stuff like line-height: 1 that "em" was implied.

Oh well, learn something every day. I did not know the units got derived from the font units.

**kohoutek** · Feb 5, 2010 02:42

Originally Posted by Stomme poes

I did not know the units got derived from the font units.

They don't. A unitless line-height is nothing more but a multiplier. Unless I got that wrong, too.

**Paul O'B** · Feb 5, 2010 03:16

When you say 1em the line height is converted into a number - let's say that it works out to 24px for arguments sake. The children of that element even those with a smaller font-size will inherit that actual 24px pixel line height.

When you say line-height:1 then the children inherit that number "1" and apply it to whatever their font-size is. If the font-size is smaller they get a smaller line-height and if the childs font-size is larger they get a larger line-height and will not be clipped. This is completely different to the former process.

It's the raw number that is passed to the child and used as a multiplier on the child's font-size. This ensures that a relationship between the font-size and line-height is maintained.

**Luki_be** · Feb 5, 2010 07:53

just adding a recap on line-height: there are 4 values you can use

1) using a percentage value: line-height will not scale with the relevant font-size

2) using a length value (px): line-height will not scale with the relevant font-size

3) using the normal-value: line-height does scale with the relevant font-size

4) using the number value (e.g. 1.5): line-height will always scale with the font-size

Method 4 gives you the flexibility of the normal value but you can specify the factor you want to use.

All four methods are good to use = can be used. The only difference is if you want scaling with the font-size or not. I myself sometimes use em as unit and sometimes no unit... depends on the case at hand.

**RyanReese** · Feb 5, 2010 09:18

Originally Posted by Stomme poes

Oh, I'd always thought that when you said stuff like line-height: 1 that "em" was implied.

Oh well, learn something every day. I did not know the units got derived from the font units.

Originally Posted by kohoutek

They don't. A unitless line-height is nothing more but a multiplier. Unless I got that wrong, too.

Yes you're right, but isn't that what I was saying? I just didn't use the word multiplier lol

**Stomme poes** · Feb 5, 2010 09:27

Ryan,

yeah, but when I read this:

If the font is 16, then 1.5em would make it 16*1.5 which would = 24

that you meant (cause the OP uses it) "16px"...
Then I figured that means 24px for the line height.. since it's 16apples times 1.5 it looked like I should get 24apples, right?

So I was looking at it a bit wrong, and I think Paul's explanation made sense... not sure if it made enough sense to stay straight in my head though. I still kinda see it as, the resulting line-height is in whatever units the font was set in.