Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS font size: relative vs. absolute values. Which to use? [closed]

  • What's the best way to size text across browsers?
  • What are the advantages and disadvantages of defining font size in pixels / em?
like image 502
Aron Rotteveel Avatar asked Feb 06 '09 16:02

Aron Rotteveel


People also ask

What is the difference between relative and absolute size in font sizing?

Absolute units are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of some other element. Relative units do not have an objective measurement. Instead, their actual size is determined by the size of a parent element.

Why are relative units preferred over absolute units in CSS?

Length Units A length of 0 does not require the two-letter unit identifier. Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media.

Which CSS property is used to increase or decrease the size of the font?

The font-size property is used to increase or decrease the font size. The font-size property is used to control the size of fonts.


1 Answers

Which to use?

Both. Relative for main body text that users are going to have to read a lot of (so they'll want to be able to read it comfortably); Absolute for text that has to be sized to match other elements on the page that are sized in pixels, such as images.

For relative, ‘%’ and ‘em’ are equally good.

For absolute, always use ‘px’. Never use ‘pt’ for on-screen use, it is only sensible for print stylesheets. It is a pity that ‘pt’ is considered the default unit for font-handling because on the web it is the worst possible choice.

(ETA: Note that since this answer, CSS3 has redefined the ‘physical units’ so that px and pt are always proportional. So this problem no longer matters unless you are concerned about very old browsers.)

Some people don't like the ‘compounding’ effect of relative font sizes. The trick, really, is to use as few font-size changes as you can, to avoid too many nestings. It should be possible to get the relative-to-user's-preferred-size behaviour without the compounding behaviour by using the font-size keywords ‘small’/‘medium’/‘xx-large’/etc., but unfortunately that way you don't get much granularity, and there are still even today differences between how the browsers handle them.

like image 160
bobince Avatar answered Oct 09 '22 02:10

bobince