CSS font-weight property: how to set the font saturation

Traditionally, it is customary to highlight the main ideas in the text with the help of a bold outline. This way of processing, first of all, refers to the headings, since it is necessary that the reader immediately pay attention to them. The CSS font- weight property is a simple way to adjust the font's saturation.

Beginners in programming are interested in the question of why to study in detail the technology of text design styles. Almost on every site (and especially with respect to resources based on content management systems), there is a visual editor similar to the MS Word application. To work with him, special knowledge is not needed. However, the use of built-in text design tools is not always justified, since it is important not only to make the text bold, but also to highlight it so that the search engines adequately perceive what they have written.

How to change text richness

You can specify the thickness of the text using HTML tags < b> or < strong> . But the initial function of these elements is structuring. If you use tags too often, search engines will recognize the text as "over-optimized", which will lead to a decrease in the rating of the website. This is where the CSS font- weight property comes in handy.

The standard gives several options for its recording. An interesting feature - a web programmer can choose how tight the text will be. But first things first.

Standard values for font saturation

The cascading style sheet specification recommends using the normal and bold values to specify the density. The first one assigns the "normal" shape to the element and is usually used in cases where it is required to remove the fat writing. For example, the following entry turns off thick writing in CSS - font- weight: normal . By resorting to this design, you can change the default bold spelling of headers in the < h1> - < h6> tags.

The reverse situation - you need to set the increased thickness for the paragraph of the text. In this case, the CSS - font- weight bold rule is specified for the corresponding < p> tag.

Thickness setting options

The latest versions of the style standard allow the user to designate the degree of text saturation himself. To do this, instead of the previously described values of normal and bold, use their numerical equivalents.

The density of the text is set by relative values in the range from 100 to 900. The step is 100. That is, to assign a density of 200, it is necessary to write in the CSS font- weight : 200 . Reasonable question: what does the number 200 mean and how to understand when exactly it should be applied?

To understand the thickness of the font will help the following table-cheat sheet.

As the table shows , the next entry of the CSS font- weight : 400 property is equivalent to font- weight: normal . The situation is similar with the values of 700 and bold . How to prescribe the attribute - there is no difference.

Important note: this property does not always work. The reason is that the imported font does not support varying degrees of saturation. In practice, most often only normal and bold characters are embedded in the fonts.