CSS font style and size

Font style

CSS property font-style allows you to select text in italic, oblique, or vice versa to give the text a standard view. This property has only three values:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p class="exnormal">A paragraph with a normal value.</p>
    <p class="exitalic">A paragraph with a value of italic.</p>
    <p class="exoblique">A paragraph with a value of oblique.</p>
  </body>
</html>
Try it »

Italic fonts were traditionally stylized versions of the font based on calligraphy, while the slanted style was created by simply adding a slight inclination to the symbols. Most fonts do not contain a set of italic characters, so the browser often uses the skew algorithm for text characters. This means that in many cases you will not see the difference between the italic and oblique values.

Text size

Changing the size of text in an element is a good way to visually highlight it and give it importance, or on the contrary, to show that this information should not attract more attention.

To change the text size, use the CSS property font-size. There are several ways to specify the size of the text, consider the most common ones:

Pixels

The values in pixels are often used because this approach provides very precise control over the size. The numerical value ends with the letter symbols px, which should follow immediately after the number (between the number and px should not be a space):

body { font-size: 14px; }

Percentages

By default, the text size in browsers is 16px. Thus, the value of 100% corresponds to 16px, and 200% is 32px. If you define a rule that sets all text inside the <body> element to 75% of the default size (this will correspond to 12px), and then define another rule that specifies 75% for its child element, then the text size in this element will be 9px (that is, 75% of 12px).

body { font-size: 100%; }

EM

The em unit of measure lets you change the size of text relative to the size of the text in the parent element. Because the default size of text in browsers is 16px, you can use rules similar to those used for values in percentages.

body { font-size: 14px; }
h2 { font-size: 1.2em; }

In the example, we gave the <body> element a text size of 14px, and for all <h2> elements it was 1.2em. This means that the size of the text of the headings of the second level will be scaled with a factor of 1.2. In our case, the size of all the <h2> headers will be 1.2 times the text size of the <body> element, which means 1.2 times more than 14px, and roughly equal to 17px. (In fact, the size will be 16.8, but most browsers will round it to 17.)

Note: in fact, percentages and em are two different ways to achieve the same goal. They both allow you to set the size relative to the text size of the parent element.

Keywords

CSS offers seven keywords that allow you to assign text size relative to the default size (16px): xx-small, x-small, small, medium, large, x-large and xx-large.

p { font-size: small; }

The average value of medium is the default text size in browsers. The other values reduce or increase the size of the text with different odds. The smallest text size of xx-small is approximately 9 pixels, each subsequent size is about 20% more than the previous one:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p class="class1">Change the size of the text by using percent.</p>
    <p class="class2">Change the size of text by using pixels.</p>
    <p class="class3">Change the size of the text by using the x-small keyword.</p>
  </body>
</html>
Try it »
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen