PDA

View Full Version : Simple question: pt or px or em Pls help !



jeddi
Jan 21st, 2009, 08:06 AM
Hi,

What is the best measure to use for defining he font size ?

I was using px
e.g. style="font-size: 12px;"

But then I thought it was wrong and that the px was just meant for
screen sizes like top: 300px; so I started using point instead.

e.g. style="font-size: 12pt;"
but to get the same size I found that I had
to use a smaller number, I had to do e.g. style="font-size: 10pt;"

Now I also read about em and those numbers are more confusing like
1.2em
e.g. style="font-size: 1.3em;"

Are any of these "wrong" ? :confused:

What do you guys use ?

Please help me out of my confused state :)

senkei
Jan 21st, 2009, 08:27 AM
I'm not sure about the pt one... would make sense that is used but looking back, i've been using px all this time. It passes validation and gets the job done so i'm not too fussed.

I see a lot of pros using em though. I think 1.2em is like 120% whatever the default stated size is... don't quote me on that though.

jeddi
Jan 21st, 2009, 09:54 AM
Thanks for your input. :)

I think I might go back to using "px"

But it would be nice to hear from others
especially advanced coders so that I can make the right
selection before changing my css again.

AmmO
Jan 21st, 2009, 11:05 AM
Well px is a defined size that will work whatever resolution your page is viewed in so it will always be 12px high.

If you use em's thats a relative size to the screen/resolution the viewer is using the page technically its the best fit with all the monitor/resolutions out there but i prefer px because that what i learned with and feel most comfortable with. When it comes to web design i would always recommend what feels most comfortable for you, just as long as its standard compliant

jeddi
Jan 21st, 2009, 11:08 AM
Thanks,
thats a helpful comment

effpeetee
Jan 21st, 2009, 11:26 AM
If you want consistancy in all browser resolutions, the em is probably the way to go.

You may find this useful (http://www.webmasterworld.com/forum83/5272.htm).

Frank

jeddi
Jan 21st, 2009, 11:34 AM
Thanks Frank,

May I ask ...
what do you use ?

BoldUlysses
Jan 21st, 2009, 12:50 PM
As mentioned in Frank's link, when it comes to font sizes, IE processes px and ems differently. As far as accessibility, one of the most important things for the user to be able to control is font size. Standards-compliant browsers (FF, Safari, etc) recognize this and use a font's given px value as a starting point, and will still scale the font size up and down in response to a user's command. IE, however, will render, say, 16px font at 16px regardless of browser settings. While some may think this good for web design as it "preserves" the integrity of a rigid layout, part of our goal as web designers is to make designs that adapt to a user's settings (within reason) and still look attractive, and IE's approach is counterproductive toward that end.

That said, I use ems for font sizes. One more thing, if you weren't already aware. Even when using ems, IE scales the font in abnormal increments. A common hack for this is to add:


html {
font-size:100%;
}

This will bring IE into line with the other browsers when it comes to text scaling.

jeddi
Jan 21st, 2009, 03:32 PM
Thanks for that comment,
It was pretty useful, I shall stick that 100 % code at the top of my css file.

You didn't mention pt - is that something that is now old-hat and no longer used ?

The problem with changing the font size is that because I use css and floating divs. If you decease the size an area it may change the block's positon i.e. slide it up to the next row.

If the font size only changes relative to the window width then it would actually improve layout and hold everything it its place.

Does the em dimension change in proportion to the window size?

oesxyl
Jan 21st, 2009, 03:43 PM
Hi,

What is the best measure to use for defining he font size ?

I was using px
e.g. style="font-size: 12px;"

But then I thought it was wrong and that the px was just meant for
screen sizes like top: 300px; so I started using point instead.

e.g. style="font-size: 12pt;"
but to get the same size I found that I had
to use a smaller number, I had to do e.g. style="font-size: 10pt;"

Now I also read about em and those numbers are more confusing like
1.2em
e.g. style="font-size: 1.3em;"

Are any of these "wrong" ? :confused:

What do you guys use ?

Please help me out of my confused state :)
there are two type of units, relative and absolute.

http://reference.sitepoint.com/css/lengthunits

when you talk about fonts, text, the absolute units is pt., Arial 10 on your desktop is 10pt. and that could be for example 14px, more or less and that's depend on your monitor resolution.
So to be sure that a font have same size on any computer you must use pt.
Defining a absolute value for a font in a place and using relative units, em, ex, % make your work more easy to change.

regards

effpeetee
Jan 21st, 2009, 03:47 PM
Thanks Frank,

May I ask ...
what do you use ?

I use ems and % for most things. It is the way to get a flexible page thatwill display OK in all settings.

Have a look at this. (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)

This is (http://nopeople.com/CSS/background_image_resize/)also interesting.

BoldUlysses
Jan 21st, 2009, 03:50 PM
Pixels and points (px and pt) are the same in that they are fixed units of measurement. A point is 1/72 of an inch. So if you have a monitor resolution of 72 dpi (dots--or pixels--per inch), then 1pt = 1px. But when designing for the web, actual inch sizes don't matter all that much so typically we don't bother with points and just specify pixels. It just removes that extra step.


The problem with changing the font size is that because I use css and floating divs. If you decease the size an area it may change the block's positon i.e. slide it up to the next row.

True, and that's one of the challenges of functional and flexible web design. There are some who will design their entire site using ems. Others, like me, will use pixels and percentages for the structure and graphical elements and use ems for the font sizes. Still others use pixels for everything. Every site breaks at some point. The goal is to make it usable and attractive, within reason, for the widest range of users on the widest range of browsers with the widest range of screen resolutions.


Does the em dimension change in proportion to the window size?

The em is a unit equal to the dimensions of an uppercase letter "M" in most fonts. Whatever the dimensions of that "M" are, that's 1em. In most cases 1em = 16px. That's a good rule of thumb. So, no, the em doesn't change relative to the window size; when you resize the font incrementally, it changes size relative to that initial dimension.

oesxyl
Jan 21st, 2009, 04:00 PM
Pixels and points (px and pt) are the same in that they are fixed units of measurement. A point is 1/72 of an inch. So if you have a monitor resolution of 72 dpi (dots--or pixels--per inch), then 1pt = 1px. But when designing for the web, actual inch sizes don't matter all that much so typically we don't bother with points and just specify pixels. It just removes that extra step.
most monitors have 100 or 120dpi, and using px when you need to use pt. is not a good idea.

regards

Samhain13
Jan 21st, 2009, 05:08 PM
Even when using ems, IE scales the font in abnormal increments. A common hack for this is to add:


html {
font-size:100%;
}


My personal favourite is:

body { font-size: 62.5% ; }

Don't ask me for how the value was arrived at as I just saw a discussion about it a very long time ago; but given that IE (and Firefox, AFAIK) defaults to 16px, the 62.5% will give you a ratio of 1em : 10px. I find that easier to "control" my font sizes and correlate them to the image dimensions in my site studies. With this, if I want my body text to appear (by default) at 12px, I just say 1.2em.

Apostropartheid
Jan 21st, 2009, 05:21 PM
Points are a print measurement. As msuffern said, a desktop publishing point (the point used today, although it could vary from anywhere between .18 and .4mm when it wasn't standardized.) is 1/72 of 1″.

One point is equivalent to one pixel on a screen which is set to 72 dots per inch. However, most modern screens aren't set like this (although I believe Apple still do to make things easier for DTP people, correct me if I'm wrong.) My monitors are usually preloaded with 96dpi, and some are at 120dpi. In theory, points will be very inconsistent with these monitors, and should only be used for print stylesheets. Twelve points are equivalent to one pica (12pt = 1pc), in case you want to sound fancy.

Pixels are relative measurements which the vendor of a device will often specify when it's designed, so one pixel is not necessarily one pixel, crazy though that sounds.

I oftn stick to percentages or ems (both achieve almost exactly the same result), which will scale depending on user preference.