General Question

squirbel's avatar

Do you prefer to use em or px in your CSS?

Asked by squirbel (4297points) March 22nd, 2008 from iPhone

What unit do you use most, and why? I’ve been trying to make more use of em for scalability.

Observing members: 0 Composing members: 0

9 Answers

Brunty's avatar

I usually use em or pt for text.
px is too ‘absolute’ for text etc, but I use it for margins, padding and spacings etc.

digitaljesus's avatar

Px, big time. I just can’t visualize adjustments/positions in em very well.

stephen's avatar

most of time i dont wanna people to change the font size, so i used to px and i ll add a feature for my sites with JS to allow people changing the font size under my that my page will always display good,

adrianscott's avatar

Depends on the context, but I typically will use px in most cases because it’s easier overall to control the look of the page.

For areas of a site where changing text size doesn’t dramatically affect the page layout (such as in the body of a blog entry), then I go with em so people can change the font size on their own if they’d like to.

Vincentt's avatar

For text I’m not really using any units, I prefer to use semantic elements like <h1> and then go with the default size. (Yeah, I’m not that much of a designer so I don’t really need that much control)
However, when designing elements, I mostly use percentages, probably because I find them easier to understand than em.

felipelavinz's avatar

I would recommend you to take a look at the Yahoo! User Interface Library, a CSS foundation to ease the development of a standards-compliant site. If you use their reset+base+fonts, you won’t have to worry about a lot of distracting things (cross-browser inconsistency); if you still want to modify the text, check this out

stanley00's avatar

Speaking of CSS frameworks, also check out BlueprintCSS.

But to answer your question, the big difference for me is that ems are relative. That is, if I say “h1 {size: 2em;}”, it’s going to be twice as big as body text. If I then say “h1 a {size: .5em;}”, it’s going to return to body text size because it first inherits the size of h1. Make sense?

That’s most useful for type, but has use other places as well.

squirbel's avatar

Heh, I know how to code CSS, just asking everyone’s preferences [trying to head off derailment of the topic.]

Yeco's avatar

The first thing is to know how accesible you want to be with your site. If your objective is A is the same to use px or em, but if you want to reach AA or AAA then you have to use em.
so whats the problem with em? The problem that exists with the em size is estimated from the font size you have in your default browser, this is that if you have such a source of predetermined size 12 and using a measure to see the text of 0.85em though the text but in a browser with a measure of 10 will be very small so that even when your page using em and you pass every test accessibility will not be accessible logically. I think browsers Macs and PCs use different sizes, and this is where you can meet with problems.

Checkout this link, might be useful

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther