homepage Welcome to WebmasterWorld Guest from 107.21.187.131
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
px & em
graemey




msg:4608082
 2:30 pm on Sep 7, 2013 (gmt 0)

hello,
i have body text drclared at 12px/1.4em and i would like to change the px to 14, do i need to change the em and to what?
thank you
graeme

 

drhowarddrfine




msg:4608090
 3:12 pm on Sep 7, 2013 (gmt 0)

Depends...on your design and layout. The second number declares the line-height of the font. If you increase the font-size to 14px from 12px, the line-height will remain at 1.4em making for text that has its lines closer together.

But that's why most of us don't use units on the second number, so the second number would/could/should be '1.4' and used as a multiplier of the font size. So the line-height would then become 14px times 1.4 and adjust itself as the font size changes.

Whether that fits the rest of your page is up to you.

To tell the truth, I've always used the second number as a multiplier and I just don't recall whether it is valid to use units, such as 1.4em. But I have to leave so I'll leave that as an exercise for the reader. :)

Paul_o_b




msg:4608103
 4:48 pm on Sep 7, 2013 (gmt 0)

To clarify a little :)

If you change the font-size from 12px to 14px then the 1.4em will automatically increase the line-height to match the larger text.

e.g.
em (or percentage line-height:)
12px/1.4em = 12 x 1.4 = 16.8px line-height (probably rounded up to 17px)

14px/1.4em = 14 x 1.4 = 19.6px line-height (probably rounded up to 20px)

So you need do nothing extra to the line-height to maintain that relationship.

If we use unitless line height as mentioned by drhowarddrfine above then the same is exactly true for the body element.

unitless line-height:
12px/1.4 = 12 x 1.4 = 16.8px line-height (probably rounded up to 17px)

14px/1.4 = 14 x 1.4 = 19.6px line-height (probably rounded up to 20px)

There is absolutely no difference between the two methods as far as the body element is concerned
.

The difference occurs on nested elements that have a different font-size. If for example you have a p element inside the body at a smaller font-size then the line-height will be treated as follows:

Unit values:
For em/%/px line-height on the body the value of the line height is calculated and gets a computed pixel value (20px for the 14px font-size as in the example. This value is called a computed value and it is this exact 20px that is passed down to all elements in the page regardless of their font-size. If you have 40px text the lines will be too small to hold the text unless you change the line-height.

Unitless line-heigt:
For unitless line-height on the other hand the value is a multiplier and this multiplier is handed down to the childrenand not the exact computed pixel value. Therefore if an element inside the body has a 40px font-size then the line-height will be 1.4 times that font-size and so fit nicely.

This can be seen nicely in this small demo:

Unitless line-height:

<!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>Untitled Document</title>
<style type="text/css">
body { font: 24px/4 arial, sans-serif }
p { margin:0; }
div, p { border-bottom:1px solid red }
p { font-size:12px }
</style>
</head>

<body>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
</body>
</html>



Line-height with a value:

<!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>Untitled Document</title>
<style type="text/css">
body { font: 24px/4em arial, sans-serif }
p { margin:0; }
div, p { border-bottom:1px solid red }
p { font-size:12px }
</style>
</head>

<body>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<div>I am 24px</div>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
<p>I am 12px</p>
</body>
</html>



The difference is considerable.

graemey




msg:4608145
 7:51 pm on Sep 7, 2013 (gmt 0)

Wow, thank you for the master class, amazing. Thank you so much.
I've played about a little with the info you gave me and I can do everything except get the actual font size to increase! It's me! I must be missing something

Thank you

lucy24




msg:4608157
 8:28 pm on Sep 7, 2013 (gmt 0)

I can do everything except get the actual font size to increase!

I know some people will disagree* but I say: don't specify an absolute font size at all. Your user already has a default. At worst it's their browser's built-in default that they're accustomed to seeing. At best it's a preference that they've intentionally changed.

If you say nothing about font size, the page will come out in the user's default size. Anything you express as a proportion
1.2 = 1.2em = 120%
will build outward from that size.

Inline for testing:
<p style = "size: 66%;">two-thirds</p>
<p>document default</p>
<p style = "size: 150%;">one and a half</p>
Now shift that to the CSS and you're good to go.


* Apparently because humans whose monitor size and/or eyesight is significantly different from the site designer's are just so much ### and nobody could possibly be expected to give a ### about them.

Paul_o_b




msg:4608173
 10:44 pm on Sep 7, 2013 (gmt 0)

Lucy24 makes a good point and px font-sizes on the body should be avoided as it dis-respects the users settings.

What you should be aiming for is a relationship between your text sizes but don't get hung up on their exact size because in reality you will never know what the user has decided is best for them.

graeme_p




msg:4609239
 11:52 am on Sep 12, 2013 (gmt 0)

I agree with Lucy. Users' font settings reflect their screen size and resolution, as well as personal preferences. I find it makes responsive design easier as well.

A graemey and a graeme_p. This is going to get confusing.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved