Summary of “Typography”

The font-size property

The property value sets the desired height of the font character. The units of measurement can be either absolute or relative.

The most commonly used font size unit is the pixel (px):

p {
  font-size: 20px;
}

We also have a special unit of measurement (em) that determines that when the main font size for the parent changes its children elements also proportionally change their font sizes.

The value 1em is the same font size that was assigned to the parent. Accordingly, if we need the font of the child element to always be twice as large as its parent, then we must set the value to 2em:

h1 {
  font-size: 2em;
}

The line-height property

The property controls the line height or line spacing.

By default, this property is set to normal. It indicates to the browser that the line spacing must be selected automatically based on the font size. The specification recommends setting it to a value that is 100–120% of the font size. In other words:

p {
  font-size: 10px;
  line-height: normal; /* The value will be approximately 12px */
}

The normal value allows all texts for which no styles have been applied to be readable. However, if you need to deviate from the default styling, you can assign the line-height a fixed and absolute value that is expressed in px.

p {
  font-size: 16px;
  line-height: 26px;
}

If you need to set a relative value for the line-height, but you do not want to use a value such as normal, you can specify a percentage or a multiplier as the value. In this case, the browser calculates the value dynamically depending on the font-size:

p {
  font-size: 10px;
  line-height: 150%; /* Calculated value: 10px * 150% = 15px */
  line-height: 2;    /* Calculated value: 10px * 2 = 20px */
}

Relative values are more flexible than absolute values. But for simple websites, a fixed font-size and line-height will be adequate.

The font-weight property

This property sets the weight or stroke thickness of the font. The stroke thickness of the font can be thicker or thinner than the normal setting. You can use a keyword or a number as a value. The most commonly used values are:

  • 400 or normal — Regular font with the default value;

  • 700 or bold — Bold font.

For example:

h1 {
  font-weight: 400; /* The same thing as normal */
}

p {
  font-weight: bold; /* The same thing as 700 */
}

The text-align property

It describes how text and other inline elements (images, inline blocks, inline tables, and others) inside the block are justified horizontally.

The property can have the following values:

  1. left – This aligns the content along the left edge of the block; this is the default value;
  2. right – This aligns content along the right edge of the block;
  3. center — This aligns content in the center;
  4. justify — This fully justifies the content. When this setting is applied, the words in a line are so aligned so as to evenly occupy the entire space of the line (the spaces between words in this case will be uneven, since the browser will “stretch” the words across the line).

It is important to remember that the text-align property is applied in particular to the container block itself within which the text content is located:

HTML:
<p>
  I am text inside the paragraph
</p>

CSS:
p {
  text-align: center;
}

The vertical-align property

This property can be used to align inline elements for a particular line. The simplest example is to align the <img> image vertically within a text string.

The vertical-align property can be given many values, but the most often used ones are:

  1. top – It aligns the content along the top edge of the line;
  2. middle — It aligns the content along the middle of the line;
  3. bottom — It aligns the content along the bottom edge of the line;
  4. baseline — It aligns the content along the baseline of the line (default value).

Unlike the text-align property, the vertical-align property is applied to the element itself and not to its container:

HTML:
<p>
  <img src="picture.png" alt="I'am a picture">
  I am text inside a paragraph
</p>

CSS:
img {
  vertical-align: middle;
}

The color property

The color of the text and background can be controlled using the color property.

The color can be specified as a keyword (a full list of keywords is given in the specification). For example:

color: black; /* Black */
color: red;   /* Red */
color: white; /* White */

Another way to specify color is to indicate a hexadecimal value. In this case, the color is formed from the red, green and blue components that are specified as a hexadecimal number that ranges from 00 to ff. In addition to the six-character hexadecimal format, the color code may also consist of a three-character triplet. In this case, the second character in the color components is duplicated first:

color: #000000; /* Black */
color: #f00;    /* Red, which is the same as #ff0000 */
color: #fff;    /* White, which is the same as #ffffff */

If you do not want to deal with hexadecimal values, you can use the special rgb function, which specifies the color in a more familiar decimal format within the range of 0 to 255. This code also consists of three color components that are separated by commas:

color: rgb(0, 0, 0)       /* Black, which is the same as #000000 */
color: rgb(255, 0, 0)     /* Red, which is the same as #ff0000 */
color: rgb(255, 255, 255) /* White, which is the same as #ffffff */

The rgb function has an extended version: rgba. In this case, the code not only specifies the color: the last value in the code indicates the degree of opacity of the color, which is also known as its alpha. The value may vary from 0 (fully transparent) to 1 (fully opaque):

color: rgba(0, 0, 0, 0.5)      /* Black, 50% opaque */
color: rgb(255, 0, 0, 0.3)     /* Red, 30% opaque */
color: rgb(255, 255, 255, 0.9) /* White, 90% opaque */

Color contrast between the text and background

The background image and the background color of the block should always strongly contrast with the text color in this block. The greater the contrast, the easier it will be to read the text under different lighting conditions and on different devices. Therefore, if you set a background image for a block, you must additionally set a suitable background color. In this case, the text can still be read while the image is still loading or if it fails to load at all:

p {
  /* An ideal level of contrast: the text color is white, the background color is black */
  background-color: #000000;
  color: #ffffff;
}

span {
  /* A bad level of contrast: the text and background colors are both gray */
  background-color: #cccccc;
  color: #ddddddd;
}

The white-space property, space management

The browser ignores multiple spaces and line breaks in the HTML code. However, you can use the white-space property to control extra spaces and line breaks. The property takes the following values:

  • nowrap – It collapses extra spaces and displays all of the text in one line without any line breaks.
  • pre – It preserves all spaces and line breaks that are included in the source code in a way that is similar to the <pre> tag.
  • pre-wrap — It functions similarly to the pre tag. However, it automatically adds line breaks if the text does not fit inside the container.
  • normal – This is the default mode: extra spaces and line breaks are collapsed. The text is transferred while the spaces at the end of lines are removed.

The text-decoration property

It assigns additional formatting to the text. The property values are:

  1. underline — It underlines text;
  2. line-through — It crosses out text;
  3. overline — It overlines text;
  4. none — It removes the above formatting.

You can apply several effects to the text at the same time by listing the values separated by a space:

p {
  text-decoration: underline; /* It underlines the text. */
}

span {
  /* The text is both underlined and crossed out. */
  text-decoration: underline line-through;
}

The text-decoration property is shorthand. It is broken down into separate properties:

  • text-decoration-line — This defines the line formatting: crossed-out, underlined or overlined;
  • text-decoration-style — This defines the line style. It can take the following properties:
    • solid — Solid line;
    • double — Double line;
    • dotted — Dotted line;
    • dashed — Dashed line;
    • wavy — Wavy line.
  • text-decoration-color — Line color.

The font-style property

This property can be used to set the font face. Its basic properties are as follows:

  1. normal — Normal font face;
  2. italic — Italics font face.
  3. oblique — Slanted font face.

If you set the value to italic, the browser will try to find a separate italics font face for the characters for the given font. Some fonts specify a separate set of italics characters.

If there are no separate italics characters in the font, then the browser will make the text slanted, which is a way of simulating italics. This is the equivalent to specifying the value font-style: oblique for the text.

The text-transform property

You can also use it to control the case of characters: you can make letters lowercase (small) or uppercase (large). The property values are:

  1. lowercase — It formats everything as lowercase;
  2. uppercase — It formats everything as uppercase;
  3. capitalize — Every word starts with a capital letter;
  4. none — It cancels any change to the case.

Margins

An important factor that determines the readability of the text in the block is ensuring sufficient free space in the block for this text. There must be enough space around the text. It should not touch the edges, and it should not be crowded.

Two properties are responsible for margins in CSS: padding sets the padding in the block, and margin sets the external margins.


Continue