Traditionally, it is customary to highlight the main thoughts in the text with the help of bold writing. This design method, first of all, relates to headings, since it is necessary that the reader immediately pay attention to them. The CSS font- weight property is a simple way to control font saturation.
Beginners in programming are interested in the question of why to study in detail the technology of designing text with styles. Almost every site (and especially this refers to resources based on content management systems) has 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 search engines adequately perceive what is written.
How to change text saturation
You can assign text thickness using HTML tags < b> or < strong> . But the initial function of these elements is structuring. If you use tags too often, search engines recognize the text as “over-optimized,” which will lower the website’s ranking. This is where the CSS font- weight property comes in handy.
The standard provides several options for writing it. An interesting feature - the web programmer himself can choose how dense the text will be. But first things first.
Standard font saturation values
The cascading style sheet specification recommends using normal and bold to set the density. The first assigns the element a "normal" style and is usually used in cases where it is necessary to remove the bold spelling. For example, the following entry turns off thick CSS writing - font- weight: normal . Using this design, you can change the default bold spelling of the headers in the < h1> - < h6> tags.
The opposite situation - you need to set an increased thickness for a paragraph of text. In this case, the corresponding CSS rule is font- weight bold .
Thickness Setting Options
Recent versions of the style standard allow the user to set the degree of saturation of the text. To do this, instead of the previously described normal and bold values, their numerical equivalents are used.
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, you must write font- weight : 200 in CSS. A reasonable question: what does the number 200 mean and how to understand when exactly it should be applied?
The following cheat sheet will help you sort out the font thickness.
Property value | Result |
100 | Ultra-thin spelling. |
200 | Subtle spelling. |
300 | Light spelling. |
400 | Normal spelling. Matches the normal value . |
500 | Average spelling. |
600 | Bold spelling. |
700 | Bold spelling. Matches the bold value . |
800 | Extra thickening. |
900 | Extra writing. |
As the table shows , the following CSS property font- weight : 400 is equivalent to font- weight: normal . The situation is similar with the values of 700 and bold . How to prescribe an attribute - there is no difference.
Important note: the considered property does not always work. The reason is that the imported font does not support various degrees of saturation. In practice, most often only normal and bold characters are embedded in fonts.