Relative css values. CSS units (pixels, Em and Ex) and calc function. Examples

Using the font-size attribute to scale text is one of the most difficult aspects styling in CSS. CSS offers four units to measure the size of text displayed in a web browser. Which of these four units is most suitable for web documents? This issue has caused a lot of discussion and controversy. It is difficult to give a definite answer to such a question.

Getting to know the units

Um ( em): em is a scalable unit that is used for web documents. One em equals the current font size. For example, if the document's font size is 12pt, then 1em equals 12pt. Since em is scaled, 2em equals 24pt, .5em equals 6pt, etc. Due to its scalability and high compatibility with mobile devices, em is increasingly used in web documents.

Pixels ( px): Pixels are fixed-size units that are used for everything that is read on a computer screen. One pixel equals one dot on a computer screen (this is the smallest division of your screen's resolution). Many web designers use pixels in web documents to ensure that the website appears pixel-perfect when displayed in a browser. The only problem is that the pixels cannot be enlarged to accommodate low-vision readers or reduced for easier reading on mobile devices.

Points ( pt): Dots are traditionally used in printed publications(i.e. for everything that is printed on paper). One point equals 1/72 of an inch. Dots are very similar to pixels in that they have a fixed size and cannot be enlarged/shrinked.

1. Percentage ( % ): Percent is very similar to em , except for a few key differences. First, the current font size is 100% (i.e. 12pt = 100%). Using the Percentage unit allows you to enlarge/reduce your text for easier reading.

What's the difference?

The difference between these units is easy to understand at specific examples. Here's how they relate to each other: 1em = 12pt = 16px = 100%. Let's see what happens when we increase the main font size (using the body CSS selector) from 100% to 120%.

As you can see, Ems and Percentage increase as the base font size increases, but Pixels and Dots do not. It's easy to use an absolute size for your text, but it's much easier to use scalable text that displays on any device. Therefore, it is preferable to use Em and Percent units for the text of a web document.

EM or Percentage?

We found that Point and Pixel are not the best units for web documents. So, we are left with Em and Percent. Theoretically, Em and Percent are the same units, but in practice there are minor differences between them that cannot be ignored.

In the example above, we used the unit Percentage as the base font size (for the body tag). If you change base size font from Percent to Em (i.e. body ( font-size: 1em; )), then you most likely will not notice the difference. Let's see what happens when the body font size is 1em and when the client changes the browser's "Text Size" setting (this setting is available in some browsers, such as Internet Explorer).

When the text size in the client browser is set to "medium", there is no difference between Em and Percent. But if you change this setting, the difference will become quite noticeable. With the Smallest setting, the Ems are much smaller than the Percents. And with the “Largest” setting, the opposite is true - Em is much larger than Percent. You could say that the Em units are scaled as they should be, but in practice such text is scaled too sharply and on some devices the smallest text becomes unreadable.

Conclusion

In theory, the Em unit is the new standard for font sizes in web documents, but in practice it turns out that the Percent unit is more user-friendly. When client settings change, text that uses the Percentage unit scales appropriately, allowing designers to maintain readability, accessibility, and visual design.

Winner: percentage (%).

Usually when I create new design then for the body element I use percentages (body ( font-size: 62.5%; )) and then use em to scale further. As long as the body settings are set to Percentage, you can use either Percentage or Em for any other CSS rules and selectors and still take advantage of the benefits of using Percentage as your primary font size.

Over the past few years, this practice has become very common in web design.
Pixels are now used as valid units of font size (users can use the browser's "zoom" feature to read small text). However, the use of pixels becomes problematic due to mobile devices with very large screens. high density pixels (some Android devices and iPhone have a density of 200-300 pixels per inch, which makes 11 and 12 pixel fonts difficult to read). So, I continue to use Percentage as the main font size for web documents.

One of the most confusing aspects CSS is the application font-size attribute for text scaling. Using CSS, you can resize text in the browser using four different units of measurement. Which of these four units is best for the web? This is a question that has given rise to various discussions and criticisms. Finding a definitive answer is difficult because the question itself is complex.

Meet the units

1. "Ems" (em): "em" is a scalable unit that is used in web documents. "em" is equal to the current font-size, for example, if the font-size in the document is 12pt, 1em is equal to 12pt. "em" is scalable by nature, so 2em will equal 24pt, 0.5em will equal 6pt, etc. The use of "em" is becoming increasingly popular in web documents due to its scalability and ability to be useful on mobile devices.
2. Pixels (px): “px” are fixed sized units that are used on screens (such as for reading on a computer screen). One pixel is equal to one dot on your computer screen (the smallest element of your screen's resolution). Many web designers use px in web documents to achieve a pixel-perfect representation of their site when displayed in a browser. One problem with using px is that these units do not allow for scaling for visually impaired readers or mobile devices.
3. Points (pt): "pt", traditionally used in print media (anything that needs to be printed on paper, etc.). One "pt" equals 1/72 of an inch. "pt", like "px", have a fixed unit size and cannot be scaled.
4. Percents (%): The percentage units are similar to "em" except for a few key differences. First, the current font-size is 100% (i.e. 12pt = 100%). By using "%", your text becomes fully scalable for mobile devices and user friendliness (accessibility).

So what's the difference?

It will be easy to understand the difference between font-size units once you see them in action. Typically, 1em = 12pt = 16px = 100%. Using these font sizes, let's see what happens when you increase the base font size (from using CSS body selector) from 100% to 120%.

Changing Font-size from 100% to 120%.

As you can see, "em" and "%" increased the font size, while "px" and "pt" did not. Setting an absolute size for your text may be easy, but it's much better for your visitors to use scalable text that can be displayed on any device or machine. For this reason, the units "em" and "%" are preferable to use for web document text.

"em" vs "%"

We found out that the units “px” and “pt” are not in the best possible way are suitable for web documents, which forces us to use "em" and "%". In theory, the units "em" and "%" are identical, but in practice they have minor differences that are important to consider.

In the example above, we used percentages (in the body tag) as the basic font-size unit. If you change your base font-size unit from "%" to "em" (i.e. body (font-size: 1em;)), you, should don't notice the difference. Let's see what happens when "1em" is our base unit, and when the client changes the "Font Size" in their browser settings (many browsers, such as Internet Explorer, have this option).

The font size when the client changes the text size in the browser.

When the text size is set to "medium" in the client browser, there is no noticeable difference between "em" and "%". However, if the parameter is changed, the difference becomes very large. When set to “Smallest”, “em” is much smaller than “%”, and when set to “Largest”, on the contrary, “em” is displayed much larger than “%”. And while many argue that the units in "em" scale as intended, in practice the text in "em" scales too dramatically, causing the smallest text to become illegible on some machines.

Verdict

In theory, "em" units are the new and upcoming font size standard on the web, but in practice, "%" units allow text to be displayed more consistently and conveniently for users. When changing client parameters, the text in "%" changed in reasonable proportions, which allows designers to maintain readability, accessibility, and design.

Winner: percent (%).

Greetings, dear readers of the webcodius blog! To set different sizes html elements pages, there are units of measurement in CSS. Moreover, both relative and absolute units can be used.

Absolute units connected to the physical world and independent of the output device. The following units can be used to indicate them:

Absolute units are used less frequently than relative units and are used mainly to set the size of text. And to indicate the size of the text, they mainly use a point (pt), which is obtained by dividing one inch into 72 parts. An inch, in turn, is equal to approximately 25.4 millimeters, respectively, one point is approximately equal to one third of a millimeter. An example of using absolute units of measurement:

Size 12 millimeters

Size 1 centimeter

Size 1 inch

Size 24 points

Size 1 peak

Relative units of measurement

To display information on the monitor, it is better to use relative units of measurement. Since the physical size of the dots (pixels) that make up the images on the monitor may vary depending on the type and physical size this same monitor. Also the pixel size depends on established resolution screen. Basic relative units:

1 px in CSS, as we said above, this is a point on the user’s screen, physical quantity which depends on the resolution of the device and on the distance from which a person looks at its surface.
When specifying percentages, the size is calculated depending on the size parent element. So, for example, if the width of the parent element is 500px, then if you specify width:50%, the width of the element will be 250px.

em is tied to the browser's default font size or the font size of the parent element. A ex is the height of the capital (small) letter "x" (x) in Latin layout. That is, em is also tied to the default browser font size or the font size of the parent element. Examples:

Size 20 pixels

Size 150%

Size 2 em

Size 2 ex

Result:

In addition to the above, there is a group of relative units tied to the size of the browser viewing area:

Examples of using:

Size 2 vw

Size 2vh

Size 2 vmin

Size 2 vmax

calc() function

Used to specify a calculated value CSS properties, which use a number as a value. First of all, calc can be used to calculate dimensions, angles, and time. Moreover, the function allows you to mix different units of measurement, for example, the width of a div can be set like this:

div(
width: calc (100% - 40px);
}

In this case, the width of the div will be equal to the width of the parent element minus 40 pixels.

You can use the following arithmetic operations in expressions:

• + - addition. The character is separated by spaces on both sides (height: calc (20% + 50px));
• — — subtraction. The character is separated by spaces on both sides (width: calc (90% - 10px););
• * — multiplication (padding: calc (2em*2););
• / - division. Dividing by zero is prohibited (width: calc (100%/4);).

IN Firefox browsers up to version 16.0 the -moz-calc function is supported, in Chrome up to version 26.0 and in Safari since version 6.0 -webkit-calc is supported.

For example, in a flexible two-column website layout, we need to make sure that there is a distance of 50px between the columns at any size of the browser window. Then with the help calc functions this is done as follows:

You can specify length in CSS in different units. Some of them come from typographical tradition, like point (pt) and pica (pc), others, eg. centimeter (cm) and inch (in) are familiar to us in everyday use. There is also a “magic” unit invented specifically for CSS: px. Does this mean that different properties require different units?

No, units of measurement are not related to properties, but are directly related to display media: screen or paper.

Any units of measurement can be used anywhere. A property with a value in pixels (margin: 5px) also accepts values ​​in inches or centimeters (margin: 1.2in; margin: 0.5cm), and vice versa.

But in general, it is better to use different sets of units for display on screen and for printing. Tips for using units are summarized in the following table:

The relationship between absolute units is: 1in = 2.54cm = 25.4mm = 72pt = 6pc

If you have a ruler handy, you can check the accuracy of your device. Here is a 1 inch (2.54cm) high rectangle:
72pt
↓

The so-called absolute units (cm, mm, in, pt and pc) in CSS mean the same thing as everywhere else, but only if the output device has a high enough resolution. On a laser printer, 1cm must be exactly equal to 1 centimeter. But on devices low resolution, like computer screens, CSS does not require this. Indeed, different devices and different CSS implementations strive to display them differently. It is better to leave these units for high-resolution devices, in particular for printing. What you see on computer screens and mobile devices may not be what you expected.

In the past, CSS required absolute units to be displayed correctly even on computer screens. But since there were more incorrect implementations than correct ones, and no improvements were expected, CSS abandoned this requirement in 2011. Currently, absolute units are only required to work correctly when printed and on high-resolution devices.

CSS does not specify what exactly is meant by “high resolution”. But since cheap printers today have at least 300 dpi, and good screens about 200 dpi, the boundary most likely lies somewhere between these values.

Another reason not to use absolute units anywhere except in print: on different screens we look from different distances. 1 centimeter on the screen desktop computer looks small. But on mobile screen right before your eyes - that's a lot. It is better to use relative units instead, e.g. em.

The em and ex units depend on the font size and can be different for each element in the document. The em unit is simply the font size. In an element that is given a font of 2in, 1em means these 2in. Specifying sizes (for example, for indents) in em means that they are set relative to the font, and whatever font the user has is large (for example, big screen) or small (for example, mobile device), these dimensions will remain proportional. Declarations like text-indent: 1.5em and margin: 1em in CSS are extremely popular.

The ex unit is used infrequently. It expresses dimensions that must be measured from the x-height of the font. X-height is, roughly speaking, the height lowercase letters like a, c, m, or o. For fonts with same size(and, accordingly, with the same em) there can be a huge difference in the sizes of lowercase letters, and if it is important that some picture, for example, corresponds to the x-height, the ex unit is at your service.

The px unit in CSS is magical. It is not related to the current font, but it is usually not related to physical centimeters or inches either. A px unit is defined as something small but visible, i.e. horizontal line 1px thick could be rendered with crisp edges (no anti-aliasing). What is considered clear, small and visible depends on the device and how you use it: whether you hold it directly in front of your eyes, how mobile phone, at arm's length, like a monitor, or somewhere in between, like e-book? Therefore, px by definition is not a fixed length, but something that depends on the type of device and its normal use.

To understand why the px unit is the way it is, imagine a CRT monitor from the 1990s: the smallest dot it could display was about 1/100 of an inch (0.25 mm) or slightly larger. The px unit gets its name from those screen pixels.

Current devices can, in principle, display smaller, clear dots (although they may be difficult to see without a magnifying glass). But documents from the last century that used px in CSS look the same regardless of device. Printers in particular can clearly display lines much thinner than 1px, but even on printers a 1px line looks almost the same as it would on a monitor. Devices change, but the px unit always looks the same.

In fact, CSS requires that 1px be exactly equal to 1/96 of an inch in any print output. In CSS, it is believed that printers, unlike screens, do not need different sizes for px to display clear lines. Therefore, when printed, px not only looks the same regardless of the device, but is also measured by the same value (just like the units cm, pt, mm, in and pc, as explained).

CSS also defines that raster images(eg photographs) are displayed by default at a scale of 1 pixel of the image by 1px. A photo with a resolution of 600 by 400 will be 600px wide and 400px high. Thus, the pixels of the photo are not tied to the pixels of the output device (which can be very small), but to px units. This allows you to accurately align images with other document elements, as long as you use px units in your styles rather than pt , cm , etc.

To set the sizes of various elements, CSS uses absolute and relative units of measurement. Absolute units are independent of the output device, but relative units define the size of an element relative to the value of another size.

Relative units

Relative units are usually used to work with text, or when you need to calculate percentage between elements. In table 1 lists the main relative units.

A variable value that depends on the font size of the current element (it is set via the font-size style property). Each browser has a built-in text size that is used when this size is not explicitly specified. Therefore, initially 1em is equal to the default font size set in the browser. Accordingly, when setting the text size for the entire page in em, we work with this parameter. In the case where em is used for specific element, 1em is the font size of its parent.

ex is defined as the height of the lowercase "x" character. ex is subject to the same rules as em , namely that it is bound to the browser's default font size or to the font size of its parent element.

A pixel is an elementary point displayed by a monitor or other similar device, for example, a smartphone. The pixel size depends on the resolution of the device and its technical characteristics.

Example 1 shows the use of these units.

Example 1: Using relative units

Size 2 em

Size 2 ex

Size 30 pixels

Size 200%

Result this example shown below (Figure 1).

Rice. 1. Text size with different units

Absolute units

Absolute units are used less frequently than relative ones and, as a rule, when working with text. In table 2 lists the main such units.

Perhaps the most common unit is the point, which is used to indicate the font size. Many people are accustomed to setting the font size in text editors, for example, 12. But they don’t understand what this number means. So these are exactly the points, they are native. Of course, they are not native to us, we are used to measuring everything in millimeters and similar units, but the point is perhaps the only value from a non-metric measurement system that is used everywhere in our country. And all thanks text editors And publishing systems. Example 2 shows the use of points and other units.

Example 2: Using absolute units

Size 0.5 inches

Size 8 mm

Size 24 points

The result of using absolute units of measurement is shown below (Fig. 2).

Rice. 2. Text size with different units