CODEWITHSUNDEEP
css
Sachindra
Sachindra

Reputation: 6989

Is using px not advisable?

I read somewhere on a site :

In principle, using a px measurement for font-size is not a good idea. A handful of browsers will prevent the font from being resized by the user if you do this.

Is this right??

Upvotes: 1

Views: 215

Answers (4)

melhosseiny
melhosseiny

Reputation: 10144

Quoting CSS: The Definitive Guide by Eric Meyer

There is one more value that is potentially the same as 36pt, and that's 36px, which would be the same physical distance if the display medium is 72 pixels-per-inch (ppi). However, there are very few monitors with that setting anymore. Most are much higher, in the range of 96ppi to 120ppi. Many very old Macintosh web browsers treat points and pixels as though they are equivalent, so the values 14pt and 14px may look the same on them. This is not, however, the case for Windows and other platforms, including Mac OS X, which is one of the primary reasons why points can be a very difficult measurement to use in document design.

Because of these variations between operating systems, many authors choose to use pixel values for font sizes. This approach is especially attractive when mixing text and images on a web page, since text can (in theory) be set to the same height as graphic elements on the page by declaring font-size: 11px; or something similar, as illustrated by Figure 5-15.

Using pixel measurements for font-size is certainly one way to get "consistent" results with font-size (and, indeed, with any length at all), but there is a major drawback. Internet Explorer for Windows up through Version 6.0 does not allow users to easily resize text that has been set with pixels. Other browsers, including Mozilla, Netscape 6+, IE5+/Mac, Opera, and even IE7, allow the user to resize text no matter how it's been set. Thus, using pixels to size text is no more of a guarantee that it will stay the same size than is any other method. The other approaches discussed in this chapter, such as keywords and percentages, are a much more robust (and user-friendly) way to go, as they can be used to scale text from the user's default font size.

That said, the issue here is what unit to use for your body element. In most cases, you should use the em unit for other elements like headings and paragraphs.

Upvotes: 0

bobince
bobince

Reputation: 536409

Is this right??

Well, yes, certainly there are a few (generally older) browsers that won't let you resize the text when it's sized in px, pt, in, mm and so on.

But even in browsers with a working zoom, it's polite to work relative to the user's stated preference for font size, so they don't have to resize the text or zoom the page manually to make it comfortable. (Fixed fonts plus fixed width page can be particularly bad for this in page-zooming browsers as zooming up is likely to make the columns of text too wide to fit the screen.)

In principle, using a px measurement for font-size is not a good idea.

I wouldn't go so far as to say it's always a bad idea.

There are often elements on the page where you want the text to be sized to match an image (say, a header with text below it that should fit more-or-less without wrapping, or text above a background image made to fit it). In that case you should use px to make fonts and images line up nicely.

For the page's main body text, yes, it's nicer to use em/% and let the user decide the size. But for text that plays a part in the page's graphical layout, px fonts are typically the best bet.

Upvotes: 2

Nate Noonen
Nate Noonen

Reputation: 1371

The issue is mainly with aspect ratio. Let's say my resolution is 1024x768 for an aspect ratio of 1.33. For 1920x1080, the aspect ratio becomes 1.77, meaning that any image displayed at a specific pixel width and height will be a different size in inches due to the scaling effect of the aspect ratio. The same basic issue exists if you zoom as you are effectively using the aspect ratio in the zoom window.

Most websites get around this by using em which, to be honest, suffers from some of the same downfalls as any other rendering mode. Even "device independent pixels" are based on the DPI of a monitor. So, use em knowing that it just has less faults than px, not because it's perfect.

Read the following article if you want a more in depth study.

http://www.w3.org/WAI/GL/css2em.htm

Upvotes: 0

mkluwe
mkluwe

Reputation: 4061

Yes, at least IE6 & IE7 do that. Take a look at How to Size Text in CSS.

Upvotes: 0

Related Questions