Length and Distance Converter Mass Converter Bulk Food and Food Volume Converter Area Converter Volume and Recipe Units Converter Temperature Converter Pressure, Stress, Young's Modulus Converter Energy and Work Converter Power Converter Force Converter Time Converter Linear Velocity Converter Flat Angle Converter thermal efficiency and fuel efficiency Converter of numbers in different number systems Converter of units of measurement of quantity of information Currency rates Dimensions of women's clothing and shoes Dimensions of men's clothing and shoes Angular velocity and rotation frequency converter Acceleration converter Angular acceleration converter Density converter Specific volume converter Moment of inertia converter Moment of force converter Torque converter Specific heat of combustion (by mass) Converter Energy density and specific heat of combustion of fuel (by volume) Temperature difference converter Thermal expansion coefficient converter Thermal resistance converter Thermal conductivity converter Specific heat capacity converter Energy exposure and thermal radiation power converter Heat flux density converter Heat Transfer Coefficient Converter Volume Flow Converter Mass Flow Converter Molar Flow Converter Mass Flux Density Converter Molar Concentration Converter Mass Solution Mass Concentration Converter Dynamic (Absolute) Viscosity Converter Kinematic Viscosity Converter Surface Tension Converter Vapor Permeability Converter Water Vapor Flux Density Converter Sound Level Converter Microphone Sensitivity Converter Converter sound pressure level (SPL) Sound pressure level converter with selectable reference pressure Brightness converter Luminous intensity converter Illuminance converter Computer graphics resolution converter Frequency and wavelength converter Power in diopters and focal length Power in diopters and lens magnification (×) Converter Electric Charge Linear Charge Density Converter Surface Charge Density Converter Bulk Charge Density Converter Electric Current Converter Linear Current Density Converter Surface Current Density Converter Electric Field Strength Converter Electrostatic Potential and Voltage Converter Electrical Resistance Converter Electrical Resistivity Converter Electrical Conductivity Converter Electrical Conductivity Converter Capacitance Inductance converter American wire gauge converter Levels in dBm (dBm or dBm), dBV (dBV), watts, etc. units Magnetomotive force converter Magnetic field strength converter Magnetic flux converter Magnetic induction converter Radiation. Ionizing Radiation Absorbed Dose Rate Converter Radioactivity. Radioactive Decay Converter Radiation. Exposure Dose Converter Radiation. Absorbed Dose Converter Decimal Prefix Converter Data Transfer Typographic and Image Processing Unit Converter Timber Volume Unit Converter Calculation of Molar Mass Periodic Table of Chemical Elements by D. I. Mendeleev

1 pixel (X) = 0.752812499999996 point (typographic)

Initial value

Converted value

twip meter centimeter millimeter symbol (X) symbol (Y) pixel (X) pixel (Y) inch soldering (computer) soldering (typographical) point NIS/PostScript point (computer) point (typographical) middle dash cicero em dash point Didot

American wire gauge

Learn more about units used in typography and digital imaging

General information

Typography is the study of the reproduction of text on a page and the use of size, typeface, color, and other external features to make text read and look beautiful. Typography appeared in the middle of the 15th century, with the advent of printing presses. The position of the text on the page affects our perception - the better it is placed, the more likely the reader will understand and remember what is written in the text. Poor typography, on the contrary, makes the text hard to read.

Typefaces are divided into different types, for example, serif and sans-serif fonts. Serifs are a decorative element of type, but in some cases they make text easier to read, although sometimes the opposite happens. The first letter (in blue) in the image is in Bodoni serif. One of the four serifs is circled in red. The second letter (yellow) is in Futura sans-serif.

There are many classifications of fonts, such as according to when they were created, or according to the style popular at a particular time. Yes, there are fonts. old style- a group that includes the oldest fonts; newer fonts transitional style; modern fonts, created after the transitional fonts and before the 1820s; and finally new style fonts or modernized old fonts, that is, fonts made according to the old model at a later time. This classification is mainly used for serif fonts. There are other classifications based on the appearance of fonts, such as line thickness, the contrast between thin and thick lines, and the shape of serifs. The domestic press has its own classifications. For example, the GOST classification groups fonts according to the presence and absence of serifs, thickening of serifs, smooth transition from the main line to serifs, serif rounding, and so on. In the classifications of Russian, as well as other Cyrillic scripts, there is often a category for Old Church Slavonic fonts.

The main task of typography is to adjust the size of the letters and choose the appropriate fonts to arrange the text on the page so that it reads well and looks beautiful. There are a number of systems for determining font size. In some cases, the same size of letters in typographic units, if they are printed in different typefaces, does not mean the same size of the letters themselves in centimeters or inches. This situation is described in more detail below. Despite the inconvenience caused by this, the currently used font size helps designers neatly and beautifully compose the text on the page. This is especially important in layout.

In layout, you need to know not only the size of the text, but also the height and width of digital images in order to place them on the page. The size can be expressed in centimeters or inches, but there is also a unit specifically designed to measure the size of images - pixels. A pixel is an image element in the form of a dot (or square) of which it consists.

Definition of units

The size of letters in typography is indicated by the word "size". There are several point size measurement systems, but most of them are unit based. "soldering" in the American and English measurement systems (English pica), or "picero" in the European measurement system. The name "soldering" is sometimes written as "peak". There are several types of soldering, which vary slightly in size, so when using soldering, it is worth remembering which kind of soldering you mean. Initially, picero was used in domestic printing, but soldering is also common now. Cicero and computer soldering are similar in size but not equal. Sometimes picero or soldering is used directly for measurement, for example, to determine the size of margins or columns. More commonly, especially for text measurement, derived units derived from soldering, such as typographical points, are used. The size of the soldering is determined in different systems in different ways, as described below.

The letters are measured as shown in the illustration:

Other units

Although computer soldering is gradually replacing other units, and possibly will replace the more familiar piceros, other units are also used along with it. One of these units is american soldering It is equal to 0.166 inches or 2.9 millimeters. There is also printing soldering. It is equal to the American one.

In some domestic printing houses and in the literature on printing, they still use pica- a unit that was widely used in Europe (with the exception of England) before the advent of computer soldering. One picero is equal to 1/6 French inch. The French inch is slightly different from the modern inch. In modern units, one picero is equal to 4.512 millimeters or 0.177 inches. This value is almost equal to computer rations. One picero is 1.06 computer rations.

Em and Semi-Embed (en)

The units described above determine the height of letters, but there are also units that indicate the width of letters and characters. Round and semicircular spaces are just such units. The first is also known as the em, or em, from the English for the letter M. Its width has historically been equal to the width of this English letter. Similarly, a semi-circular spacing equal to half a round spacing is known as en. Now these values ​​are not defined using the letter M, since this letter can have a different size in different fonts, even if the size is the same.

In Russian, en dashes and em dashes are used. To indicate ranges and intervals (for example, in the phrase: “take 3-4 spoons of sugar”), an en dash is used, also called a dash-en (English en dash). The em dash is used in Russian in all other cases (for example, in the phrase: "the summer was short, and the winter was long"). It is also called a dash-em (English em dash).

Problems with modern systems of units

Many designers do not like the current system of typographic units based on rations or piceros and typographic points. The main problem is that these units are not tied to the metric or imperial system of measures, and at the same time they have to be used in conjunction with centimeters or inches, in which the size of the illustrations is measured.

In addition, letters made in two different typefaces can be very different in size, even if they are the same size in typographic paragraphs. This is because the height of the letter is measured as the height of the letter pad, which is not directly related to the height of the character. This makes it difficult for designers, especially if they are working with multiple fonts in the same document. The illustration is an example of this problem. The size of all three fonts in typographic paragraphs is the same, but the height of the character is different everywhere. Some designers propose to measure the font size as the height of the sign to solve this problem.

You can specify the length in CSS in different units. Some of them come from the typographical tradition, like point (pt) and pica (pc), others, for example. centimeter (cm) and inch (in), are familiar to us in everyday life. 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 the means of display: screen or paper.

Any unit of measure 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 the screen and for printing. Tips for using units are summarized in the following table:

The relation 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) tall rectangle:
72pt
↓

The so-called absolute units (cm , mm , in , pt and pc) in CSS mean the same thing as they do elsewhere, 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 low-resolution devices like computer screens, CSS doesn't require this. Indeed, different devices and different implementations of CSS tend to render them differently. It is better to leave these units for high-resolution devices, in particular for printing. On computer screens and mobile devices, you may not get 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, in 2011 CSS dropped this requirement. Right now, absolute units are required to work correctly only 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 have about 200 dpi, the boundary most likely lies somewhere between these values.

Another reason not to use absolute units for anything other than printing is that we look at different screens from different distances. 1 centimeter on a desktop computer screen looks small. But on a mobile screen right in front of your eyes, that's a lot. It is better to use relative units instead, eg. 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 just the font size. In an element that has a font set to 2in, 1em means these 2in. Specifying sizes (e.g. for indents) in em means that they are set relative to the font, and no matter what font the user has - large (e.g. on a large screen) or small (e.g. on a mobile device), these sizes will remain proportional . Declarations like text-indent: 1.5em and margin: 1em are extremely popular in CSS.

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

The px unit in CSS is magical. It has nothing to do with the current font, but it usually has nothing to do with physical centimeters or inches either. The px unit is defined as something small but visible, i.e. a 1px horizontal line could be rendered with sharp edges (without anti-aliasing). What counts as crisp, small, and visible depends on the device and how you use it: do you hold it right in front of your eyes, like a mobile phone, at arm's length, like a monitor, or somewhere in between, like an e-book? So px is by definition not a fixed length, but something dependent on the type of device and its normal usage.

To understand why the px unit is what 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 unit px gets its name from those screen pixels.

Current devices can, in principle, display smaller, sharper dots (although these may be difficult to see without a magnifying glass). But documents from the last century that used px in CSS, regardless of the device, look the same. Printers in particular can display clear lines much thinner than 1px, but even on printers a 1px line looks pretty much 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 printout. CSS assumes that printers, unlike screens, don't need different px sizes to render crisp lines. Therefore, when printed, px not only looks the same regardless of the device, but is obviously measured by the same value (just like the units c m , pt , mm , in and pc , as explained).

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

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. Which of these four units is best for the web? This is a question that has generated a variety of discussions and criticism. Finding a definitive answer is difficult because the question itself is complex.

Meet - 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 document's font-size is 12pt, 1em is 12pt. "em" is inherently scalable, so 2em would be equal to 24pt, 0.5em would be equal to 6pt, and so on. The use of "em" is becoming increasingly popular in web documents due to its scalability and ability to be usefully applied to mobile devices.
2. Pixels (px): "px" are fixed size units that are used on screens (for example, for reading on a computer screen). One pixel equals one dot on a computer screen (the smallest element of your screen resolution). Many web designers use px in web documents in order to achieve a pixel-perfect representation of their site when displayed in a browser. One of the problems with using px is that these units don't allow zooming 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" is equal to 1/72 of an inch. "pt", like "px", have a fixed unit size and cannot be scaled.
4. Percents (%): Units of measure in % are similar to "em", except for a few fundamental 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 when you see them in action. As a general rule, 1em = 12pt = 16px = 100%. With these font sizes, let's see what happens when you increase the base font size (using the CSS body selector) from 100% to 120%.

Change 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 can 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 preferred to be used for web document text.

"em" vs "%"

We have found that the units "px" and "pt" are not the best 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 as the base font-size unit (in the body tag). If you change your font-size base unit from "%" to "em" (i.e. body (font-size: 1em;)) you, should not 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 resizes the text 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", vice versa, "em" is displayed much larger than "%". While many claim that the units in "em" scale as intended, in practice the text in "em" is scaled too sharply, with the smallest text becoming 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 comfortably to users. When changing client parameters, the text in "%" changed in reasonable proportions, which allows designers to maintain readability, accessibility, and design.

Winner: percent (%).

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

Getting to know the units

Em ( em): em is a scaling unit that is used for web documents. One em equals the current font size. For example, if the font size of the document is 12pt , then 1em equals 12pt . Since em is scaled, 2em equals 24pt , .5em equals 6pt , and so on. 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 readable on a computer screen. One pixel equals one dot on a computer screen (the smallest division of your screen resolution). Many web designers use pixels in web documents to ensure that the website looks pixel-perfect when displayed in a browser. The only problem is that pixels cannot be enlarged for the convenience of visually impaired readers, or reduced for readability on mobile devices.

Points ( pt): Dots are traditionally used in print (i.e. anything printed on paper). One dot equals 1/72 of an inch. Dots are very similar to pixels in that they have a fixed size and cannot be scaled up/down.

1. Interest ( % ): Percentage is similar to em in many ways, with a few fundamental differences. First, the current font size is 100% (i.e. 12pt = 100%). Using the Percent unit allows you to enlarge/reduce your text for readability.

What is the difference?

The difference between these units is easy to understand with 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, Em and Percent increase as the main font size increases, while 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, for the text of a web document, it is preferable to use Em and Percent units.

EM or Percentage?

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

In the above example, we have used Percent as the base font size (for the body tag). If you change the base font size from Percentage to Em (i.e. body ( font-size: 1em; ) ), you probably won't notice a difference. Let's see what happens when the font-size for body 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 Percentage. But if this setting is changed, the difference will become quite noticeable. With the Smallest setting, EMs are much smaller than Percentages. And with the “Largest” setting, the opposite is true - Em is much larger than Interest. We can say that Em units scale as they should, but in practice such text scales too sharply, and on some devices the smallest text becomes unreadable.

Conclusion

In theory, the Em unit is the new standard for web document font sizes, but in practice, the Percent unit turns out to be more user-friendly. As 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 a new design, I use percentages for the body element ( body ( font-size: 62.5%; ) ) and then use em to further scale it. As long as the body setting is set to Percentage, you can use either Percentage or Em for any other CSS rules and selectors and still enjoy 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 the legal unit 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 screens with a very high pixel density (some Android and iPhone devices have a density of 200-300 pixels per inch, and therefore fonts of 11 and 12 pixels become difficult to distinguish). So, I continue to use Percentage as the main font size for web documents.