56

What is the difference between px, em and ex? And when you define font-size in CSS, do you use px, pt or em?

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
manraj82
  • 5,929
  • 24
  • 56
  • 83
  • 4
    Related and possible duplicates: http://stackoverflow.com/questions/1932773/should-i-use-em-or-px, http://stackoverflow.com/questions/348978/are-there-any-practical-reasons-to-use-em-instead-of-pt-font-size-units, http://stackoverflow.com/questions/132685/font-size-in-css-or-em, http://stackoverflow.com/questions/609517/why-em-instead-of-px. – ЯegDwight Mar 05 '10 at 10:03

4 Answers4

47

em : the font-size of the relevant font
ex : the x-height of the relevant font
px : pixels, relative to the viewing device

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Shivkant
  • 4,509
  • 1
  • 19
  • 16
  • 2
    What is the `x-height`? Is it the height of 'x' character? – anton_rh Aug 17 '20 at 13:01
  • 1
    @anton_rh - exactly right, x-height is the distance from the baseline to the median. Which is also the height of the lowercase x. Visual: https://en.wikipedia.org/wiki/X-height#/media/File:Typography_Line_Terms.svg – Paul Aug 20 '20 at 15:26
27
  1. Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
  2. Em are sort of like percentages. Ems is referring to the base text size. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.
  3. Points(pt) are what you would want to use in print media.
Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Joshua Partogi
  • 16,167
  • 14
  • 53
  • 75
  • 4
    Don't you mean that pixels are *screen*-dependent? They look the same on whatever browser you use, but change depending *solely* on the screen/display settings. – Camilo Martin Aug 23 '12 at 14:47
  • 6
    the parallel to percentages is very misleading, because the percentage is not inheritly linked to the font size – Janus Troelsen Jun 28 '13 at 15:33
  • @JanusTroelsen — When dealing with font sizes it is. – Quentin Dec 21 '13 at 10:10
  • 19
    This answer ignores a third of the question: `ex` (surely, it's strongly related to the `em` and might not make too much sense when talking about *font sizes*, but that's no reason just to ignore it). – Jasper Jul 30 '14 at 13:56
  • 6
    @Jasper, I agree I looked at this answer in hope just to find he difference between `em` and `ex` – user10089632 Nov 03 '17 at 22:14
  • 1
    `em` is not percent. `font-size:1em` may have the same effect as `font-size:100%`, but `1em` and `100%` have different effects elsewhere and mean fundamentally different things. An `em` is the current [font size](https://stackoverflow.com/a/11073839/4200548). `font-size:1em` only has the same effect as `font-size:100%` because percents in that context are interpreted as percents of `1em`. Thus, the answer is simply describing how the `font-size` property is interpreted when it has a percent value. – randy Jul 26 '21 at 04:05
21

CSS Length Units:

  • Absolute: Inches(in), centimeter(cm), milimeter (mm), points (pt), picas (pc)

Points are standard typographical measurements that have been used by printers and typesetters for decades and by word-processing programs for many years. Traditionally, there are 72 points to an inch (points were defined before widespread use of the metric system). Therefore, the capital letters of text set to 12 points should be one-sixth of an inch tall. For example, p {font-size: 18pt;} is equivalent to p {font-size: 0.25in;}.

Picas are another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. As just shown, the capital letters of text set to 1 pica should be one-sixth of an inch tall. For example, p {font-size: 1.5pc;} would set text to the same size as the example declarations found in the definition of points.

These units are really useful only if the browser knows all the details of the monitor on which your page is displayed, the printer you're using, or whatever other user agent might apply. On a web browser, display is affected by the size of the monitor and the resolution to which the monitor is setand there isn't much that you, as the author, can do about these factors. absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common. As you've seen, attempting to use absolute measurements in web design is perilous at best.

  • Relative: em (em-height), ex (e-height), px. The first two stand for and "x-height," which are common typographical measurements; however, in CSS, they have meanings you might not expect if you are familiar with typography.

em: one "em" is defined to be the value of font-size for a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels.

ex: refers to the height of a lowercase x in the font being used. Therefore, if you have two paragraphs in which the text is 24 points in size, but each paragraph uses a different font, then the value of ex could be different for each paragraph. This is because different fonts have different heights for x

px: tiny boxes of color in a monitor are pixels. In general, if you declare something like font-size: 18px, a web browser will almost certainly use actual pixels on your monitor after all, they're already there but with other display devices, like printers, the user agent will have to rescale pixel lengths to something more sensible. In other words, the printing code has to figure out how many dots there are in a pixel, and to do so, it may use the 96ppi reference pixel.

Conclution

Because of this potential for rescaling, pixels are defined as a relative unit of measurement, even though, in web design, they behave much like absolute units.

Rrefrence: css the definite guid by eric meyer

Mohammadreza
  • 3,139
  • 8
  • 35
  • 56
11

what is the difference px,em and ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units describes those and the other length units available in CSS

And when you define font-size in css, do i use px,pt or em?

As a rule of thumb, use percentages on screen and pt for print.

Wolf
  • 9,679
  • 7
  • 62
  • 108
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    I would argue that using em or ex is better than percentages for alignment that is strongly dependent on text, since those values correspond to font sizes. – dbmikus Feb 25 '15 at 18:23
  • 1
    @dbmikus — `ex` is a bit weird, most people don't want to express font sizes in those term. `1em` is exactly `100%` so the correlation is exactly the same. Some older browsers (and note when the answer was written) were buggy when it came to font sizes in em units, so percentages were measurably superior. These days that doesn't matter as much. – Quentin Feb 25 '15 at 19:10