Why is it recommended to use the "in" unit instead of "px" for fonts?

Question

Why is it recommended to use the "in" unit instead of "px" for fonts?

Asked 10 years, 6 months ago

Viewed 8,575 times

37

I see some sites when defining the font-size use the unit em, in a brief survey I read that it is recommended to use em in sources for being better than unity px. After all, what would be the right unit when setting the font size and why?

3 answers

50

In fact, it is not "recommended to use the "em" unit instead of "px" for fonts". The key is to understand how each measure works, to know in which cases it applies.

There are cases where the em is more interesting, there are cases where the px is more interesting, and the same for each of the measures. So far, apparently none of them is conflicting in the sense of making the other obsolete.

If you think of a page with a static layou, once the measures are defined, they will only vary if there is some variation in the client that is "render" the page, but always appear in the same way in the same browser, in principle.

If you think of a page with dynamic layout, which adapts to the width of the screen (superficially called "responsive layout", term that by the way, does not have an objective meaning), and/or where the font size can be specified differently depending on the breaks specified with @media or JS, the use of each can have a more radical effect.

In this case, if you want the spaces and measures always "fixed" in relation to the images and the device-pixels, you will probably use px. If you want the spaces to follow the magnification or reduction of the source in each measure, you will use em or rem, and maybe % in certain contexts.

These are not rules, they are examples. To know the right one for your case, you need to understand the differences:

The "in":

The em reflects the current source measurement in pixels. It is better than px? No, it’s actually a complement.

What really matters is to know which one to use in the specific case. These units of measures exist to be used as needed.

An example of use:

.exemplo {
   font-size: 20px;
   border-radius: .5em;
   padding-bottom: 2em;
}

In this case, the edge curve will be 10px, and the padding-bottom 40px.

Advantage? In this case, just change the font size, which the rest of the elements will track proportionately.

Another example:

.exemplo {
   font-size: 20px;
   line-height: 1.5em;
}

This way, we’ll have 1.5 line spacing.

In older versions of IE we could only extend the fonts if they were specified in ems or with <font size=.

See a little more about the em in typography in Wikipedia

The "rem":

The em had an intrinsic problem: when you set a font size on ems, the size reference was that of the upper element, which caused some confusion, depending on how the elements were presented in relation to the others.

To solve the problem, from the CSS3 was implemented the rem, very similar to em, but that always takes as a basis the root element of the page. Thus, the reference will always be the source of the html, and not of the upper.

The "px":

Pixel is the abbreviation of Picture Element, and refers to the dots that make up the images on the screen, and is the origin of the unit px.

The images, by their very nature, have their measurements of width and height in px, and the useful area of the screen and the browser page are also measured natively in px. This is the usual measure to specify @media darlings.

Usually the px of CSS correspond to the physical pixels of the device, and this is still the rule in most cases.

However, this is no longer an absolute certainty: with the high definition screens, and the fact that market decisions are made by Committees, and not people who actually use the standards, in some cases the px may not necessarily correspond to pixel of the physical device, as in high density displays. See the following question:

What is the recommended IPR for images used on websites?

And also the w3c specifications on "reference pixels" .

The percentage (%):

The percentage, as well as the em, is also relative, but in absolute units, proportional to the element itself, and not directly to the source.

Examples:

.exemplo {
   font-size: 20px;
   line-height: 150%;
}

Thus, we will have 1.5 spacing between lines, as in the previous example, but using %. Note that although we are using an element whose size apparently depends on the font, the percentage is relative to the natural size of the block, and not to the letters themselves (but anyway, corresponds to ONE line of the block, in the case of text blocks).

H1 {
   width: 50%;
}

A header with half of what would be the total width.

Which to use?

It depends on the situation. It does not have a "better" nor "right and wrong". It depends on the desired intention. If you are using @media to make layouts for multiple devices, and likes to have precise control over the result, there is no problem at set everything in pixels, what is a good technique for the result to be exactly what you expect.

Are there any elements that will be used in paragraphs with different sources proportionally? Use em, because you will be sure that the element will be proportional to the text.

The ideal is to know the differences well, so you are not limited to "good practice" and uses the right tool in the right places and time, safely.

<!DOCTYPE html>
<html>
<head>
    <title>Em</title>
</head>
    <style>
        body{ font-size: 16px; }    
        p.t1{ font-size: 1em; }
        p.t2{ font-size: 1.5em; }           
        p.t3{ font-size: 3em; }
        p.t4{ font-size: 5em; }
    </style>
<body>
<div>
    <p class="t1">Teste 1</p>
    <p class="t2">Teste 2</p>
    <p class="t3">Teste 3</p>
    <p class="t4">Teste 4</p>
</div>
</body>
</html>

The advantage is that in this way the proportion of the sources is maintained, if it is necessary to change the size, it would only change to in a single line.

Why is it recommended to use the "in" unit instead of "px" for fonts?

3 answers

The "in":

The "rem":

The "px":

The percentage (%):

Which to use?

See also: