font-size units

Dear developers,
I know that in CSS as absolute value unit for fonts you can use pt, pc, mm, in, cm and px. I also know that the first five can be represented by same unit (i.e. by pt), but what with px? What if I want to compare size of fonts represented by different units, how I should do that is there are presented all six mentioned here? Can someone help, please? Thank you in advance.

 

Well it all depends on browser and user's settings.

I would stick to one unit for defining the font sizes. First of all, if you want to use solid units with fixed size (px, pt etc..), forget about px. Use points.

However, the better solution is to use flexible units such as percentages or ems. This will bring benefit for people who want to zoom in or zoom out your Web site.

 

Ok, thank you for the reply. But, can you compare px and pt? pc = 12 * pt, but what with px, or for px you have to know resolution set at user's display?

 

When you want a photoshop text converted into a html text, the pt of photoshop is equal to px in the css font-size element. You could experiment a bit with those diffent units....

 

pt, pc, mm, cm and in are absolute values. How they get rendered on the monitor depends on the user configured pixel density and the UA's ability to scale the abs values to pixels that are relative to the monitor. For example, the three monitors in front of me have pixel densities of 96px/in, 108px/in and 102px/in. Macs formerly, and maybe still, had monitors resolve to 72(pseudo)px/in, which was perfect for their primary user, the desktop publisher.

Using the absolute measures are completely inappropriate for the web. They are, however, fine for use in your print stylesheet, where a point is actually a point.

Get over the idea that you're going to control font or element sizes in the browser. That control all belongs to the user. The same monitor could have 64, 82, or 108 ppi, depending on user setting.

True, perhaps on a Mac. On a PC, 1pt is more likely equal to 1.33px.

cheers,

gary

 

As a rule of thumb, I use em based sizing for my content text so that the user can use zoom functions etc.

For navigation text and other anchors I generally use pixel based - allowing an easier degree of control over the zoomed page layout while still keeping the font size fairly large

 

One more tip. If you are going to use ems (it's really the best unit for fonts), remember to set up the default font size for body correctly, as all elements will inherit it from there.

Example:

body {
  font:100.1% serif;
  }

Code (markup):

Why 100.1%? Well, some older browsers have problems understanding correctly values such as 100% or 1em... this little fix solves the problem...

 

More to do with how different UAs treat non-integer quotients and products. Some ciel(), some floor() and others employ some rounding scheme. The extra .1% brings everyone more into line.

BTW risoknop, I was going to rep you for a previous post, but apparently its only one rep per person per millennium. :shrug:

cheers,

gary

 

Gary covered much of the issue, but let me give you some clarifications:

Regardless of how many pixels per inch there actually are on a display, 70-80% (depending who you ask) of browsers ASSUME the display is 96dpi, regardless of whether it is true or not. Because of this 1pt, 1", 1cm does not give you that actual size across different machines. PERIOD.

That said, PT is often used in things like message boards (like this one) becuase it obeys something called the 'system metric' - In Windows there is actually a control called 'dpi' - which in THEORY you could use to actually calibrate to actual size... problem is little if any software is written to support anything more than the two base settings: Small Fonts/96dpi and Large Fonts/120dpi. (I run the latter, most of the world runs the former)

pt/in/cm, etc all obey the system metric in every windows browser except Safari. Because it was one of the few fonts to actually obey the system metric in Netscape 'out of box' it was the weapon of choice - and still is if you want 'large fonts' obeyed in Gecko based browsers like firefox.

%/em on the other hand is based on the default font size - and this is where it gets a little confusing as IE and Opera obey the system metric for their default font size, while Netscape heritage browsers like Gecko do not.

Basically though it boils down to what Gary said: You cannot rely on their being a fixed relationship between the two, because there is none. This is why the whole "62.5% = 10px" nonsense is exactly that - NONSENSE.

LONG ago I wrote a page that shows you the difference in sizes not just between each-other, but between different browsers and operating system settings. This might clear it up a bit for you, pay particular attention to the default and pt behavior.

http://battletech.hopto.org/for_others/font_test.html

Page is also fun because it shows the rounding error differences in line-height between firefux and RoW quite clearly.

 

Sorry for replaying after almost a month - thanks to all of you for helping me. That was useful.