The font size on the site can be set using both HTML and CSS. Let's consider both options.
Setting font size using HTML
The font size on the page can be determined using the tag font HTML. In the article, we have already looked at the tag font and its attributes. One of the attributes of this tag is size, which allows you to set the font size. It is applied as follows:
Website builder "Nubex"
Size can take values from 1 to 7 (the default is 3, which corresponds to 13.5 points for Times New Roman font). Another option for setting the attribute is “+1” or “-1”. This means that the size will be changed from the base by 1 point more or less, respectively.
This method is quite easy to use and is indispensable when you need to change the font size of a small piece of text. Otherwise, it is recommended to style the text using CSS.
Setting font size with CSS
In CSS, the property is applied to change the font size font-size which applies as follows:
In the example shown, the font size is set in pixels. But there are other ways to set the size:
- large, small, medium- set the absolute size (small, medium, large). The values extra-small (x-small, xx-small), extra-large (x-large, xx-large) can also be used.
- larger, smaller- set the relative size (less or more relative to the parent element).
- 100% - the relative size is set (in percent relative to the parent). For example: h1 (font-size: 180%;) This means that the size of the tag H1 will be 180% of the base font size.
- Other options for setting the relative size:
- 5ex- means that the size will be 5 letter heights x from the base font;
- 14pt- 14 points;
- 22px- 22 pixels;
- 1vw- 1% of the width of the browser window;
- 1vh- 1% of the height of the browser window;
Surprisingly, all fonts in the world differ in only three parameters: typeface, size and style. The key point deserves special attention - the typeface, which can completely transform any text. About this, as well as how to change the font settings in a text editor and HTML layout later.
What is a font?
A font is a set of images of alphabet symbols, numbers, executed in the same format, style, design, in other words, it is an analogue of handwriting. The first fonts for cars were created on the basis of the official "hand" handwriting. Handwritten semi-ustav forms the basis of many Cyrillic fonts, and became the basis for Latin character styles.
Absolutely all computer "handwritings" differ from each other in just three parameters: size, typeface, typeface.
Typeface
The most important parameter in typography. A typeface is a set in one or several sizes, characterized by the stylistic unity of the image of alphanumeric, punctuation and special characters. There are often headsets that consist only of mathematical values or special characters, such as cartographic ones.
The concepts of "typeface" and "font" are often confused due to the similarity of their subject matter, especially in text editors. However, the first is much broader, because the typeface determines the style of the entire text, and it itself can be limited by the unity of execution only, for example, in italics.
Many headsets are familiar to PC users: Courier New, Calibri, Arial, Times New Roman. All names are written in Latin letters, even if the typeface was created by Russian developers, its transliteration or translation into English is used.
Varieties of headsets
The typeface is mainly divided into groups according to this classifier:
- Handwritten. This group is characterized by a similarity to handwritten text drawn with a brush or pen. These can be both separately and fusedly written characters.
- Chopped. Another name is sans serif (French "without"). Sans serif alphabetic characters are used. This is one of the most convenient fonts for both small labels and large bold headings - they are pleasing to the eye, easy to read. Such a clear and legible sans-serif font is also used for marking, inscriptions on labels, "twisted" text (facing the main tone of the page).
- Antique - with serifs. Experimental studies have been carried out, which have established that these fonts are the most convenient for speed-reading "solid" texts - serifs automatically move eyes from one character to another, do not allow letters to merge. However, they are not good for headings, highlights - it seems that the letters are "crowded", a feeling of disorder is created. Antiqua is characterized by its traditional official appearance, therefore it is widely used in the corresponding texts.
- Decorative. This typeface, otherwise called display typeface, was created to convey some non-verbal meaning of what is written. These include the most bizarre and unusual character styles. However, you should not get carried away with them in the text - it is better to decorate only the demo subtitle with display type.
- Symbolic. These typefaces do not contain standard numbers, letters, punctuation marks - there are only special symbols needed for thematic texts - cartographic, arithmetic, frames, etc.
Font size
Typeface is the first parameter of the text, the second is size. Otherwise it is called
This parameter is designed to make the text easier to read: headers are highlighted in large characters, important information, secondary (footnotes, notes) are typed in a smaller font.
In text editors, we are accustomed to standard sizes: 8, 11, 12, 14, 18, 24, etc. Each of these values denotes the total height of the typeface characters from highest to lowest (for example, from "D" to "p "). It is measured in special units - typographic points. One punkt (German "point") is equal to 0.3528 mm.
Font style
The final parameter is weight and style - character style. Typefaces are mostly typed in "straight" style or with a slight slant - in italics.
Saturation is the thickness of a character's outline. In addition to the standard one, there are also "thick" varieties - bold, bold. There is also a more detailed division into superlight, light, bold and hyper fat saturation.
Styles and saturations overlap, that's why you can find bold and fatty italics.
Change font settings
You can change the typeface and similar parameters in the MS Word text application in one of three convenient ways:
- Through the toolbar. It is located on the main working tab of the editor directly above the sheet of text. With its help, you can not only change the typeface (font name), set the desired size, style, weight of the text, but also select the desired color of characters, highlight important points with underlining.
- Dialog window for formatting. In "Word" it is called by the right mouse button or by a combination of "hot keys" CTRL + D. In this way, you can call a dialog in the "Notepad" program. It also allows you to set individual text parameters: typeface, size, style.
- Using "hot" button combinations. When you call "Help" or click on the link "About", you can find a section where a full list of them is disclosed. To use this method, you must first select the text, and then press the desired combination. For Word, the following are common: CTRL + I - italic, CTRL + B - bold.
For HTML editing, the procedure for changing the typeface looks a little more complicated:
- The first step is to select the text whose typeface is to be changed.
- Next, put the tag
It is believed that size refers to the size of the largest character in the specified font. This is wrong. In fact, the value is built into the font, and it is hardly possible to measure it by hand, with a ruler. Usually the size is slightly larger than the distance from the top of the largest letter to the bottom of the smallest letter. This is done so that any combination of symbols can fit in the given space. It is also important to specify the line-height parameter, otherwise the letters p, q and the like may go out of bounds.
Pixels
The most common option. Installed as follows:
font-size: 16px;
Pixels have only one advantage - no difficulty with size. Nothing needs to be counted. What size is specified, so will the characters on the screen. The disadvantage is difficulties with responsive CSS font size. It will not be possible to establish relationships between different sizes.
Obsolete units can be referred to as "pixel" ones. These include pc, cm, mm and pt. So, mm is a millimeter, cm is a centimeter. Pt and pc are typographic point and typographic pike. Why are these methods deprecated? Because they were not "independent" - the browser automatically recalculated the values into pixels. Accordingly, the problems were the same as in the case of px. By the way, one cm contains 38px from the browser's point of view.
Em: the value depends on the font size of the parent element
It's simple. Let's say you have a div that has a font-size of 16px. It contains another div for which the CSS font size is set to 2em. Accordingly, 1em will be 16px (i.e. the font size of the parent element), and 2em will be twice as large, i.e. 32px.
You can also set the value in em in the parent element. In this case, it will depend on the base size specified in body or html. Em is the relative CSS font size that will grow and shrink with the parent element's characters. This is convenient - to change the value in a large number of places, you just need to change the parent's parameters.
For professionals: ex and ch
Practically not used by ordinary layout designers and frontend developers. Ex is the value of the "X" and ch is the value of the "0". The selected font may not have these characters, but the options can still be used. It is not known for certain for which cases such sizes are best suited. Try experimenting - maybe it will be more convenient for you? Remember, however, that ex and ch are "conventional" units, so fine-tuning the parameters will be difficult.
Interest: the most confusing option
How do I set the font size in CSS as a percentage? It would seem that everything is simple - you just need to specify the desired parameter and put a "%" after it. But here an important question comes into play: "The percentage of what will the given size be?"
In most cases, the parameter is calculated depending on the size of the parent, but not always. If you set the margin-left property, the percentage will be calculated based on the width of the parent block. If you set line-height, then the percentage will be taken depending on the current font size.
Adjusting the parameters as a percentage requires careful experimentation. Be careful with this unit of measurement, as it can easily change the look of your layout.
Rem: a simple and versatile unit
There are many ways to adjust font sizes in CSS above, but none of them are really convenient. To simplify the work, the rem parameter was invented, which is calculated depending on the value specified for the html tag.
This is easier than it seems at first glance. For example, for the html tag that will wrap all the content on the page, you set the CSS font-size to 16px. Accordingly, 1rem will now be 16px. 2rem is 32px, etc. You can use any aspect ratio: 0.2rem, 1.1rem, 100rem ... The browser will carefully recalculate the parameters.
In html, you don't need to touch anything at all, since browsers themselves set a specific font size for the wrapper. But for a more detailed setting, it is better to redefine the indicator. The main advantage of rem is that you can easily scale fonts in a specific location without affecting other elements. However, remember that older browsers (IE below version 9) do not support this metric.
Vw and vh: exotic options
The newest units of measure created for mobile devices. Vw is 1% of the width of the window a user is viewing your site. Vh - 1% of its height. The size of the characters will be automatically scaled depending on the screen of the visitor's device. To select the appropriate size during layout, enlarge and reduce the screen size.
Summing up
For a long time now, you can not set CSS font sizes only using px. It is much more convenient to use rem, vh and vw (especially with responsive design), as well as em. Each of these options has advantages and disadvantages, so check a few methods before using. Modern typesetters often use rem as one of the easiest ways to change the font size. However, it has the disadvantage that the components become less modular.
- if properties need to be scaled relative to font-size, em is the best choice;
- otherwise, rem is recommended.
Em is often used to set padding and margin sizes. Be careful when specifying the character size for lists, as the large amount of nesting may make characters unreadable.
Date of introduction 01.01.82
This International Standard specifies drawing fonts for drawings and other technical documents in all industries and construction.
1. TERMS AND DEFINITIONS
1.1. The font size h is the value determined by the height of the uppercase letters in millimeters. 1.2. The height of uppercase letters h is measured perpendicular to the base of the line. The height of lowercase letters c is determined from the ratio of their height (without branches k) to the size of the font h, for example, c = 7/10 h (Fig. 1 and 2).
1.3. The width of the letter g is the largest width of the letter, measured in accordance with the dash. 1 and 2, is defined in relation to the font size h, for example, g = 6/10 h, or in relation to the line thickness of the font d, for example g = 6 d. 1.4. Font line width d - thickness determined depending on the type and height of the font. 1.5. Construction grid - a grid formed by construction lines that the letters fit into. The pitch of the auxiliary grid lines is determined depending on the thickness of the font lines d (Fig. 3).
2. TYPES AND SIZES OF FONTS
2.1. The following font types are installed: type A without slant (d = 1/14 h) with the parameters given in table. 1; type A with an inclination of about 75 ° (d = 1/14 h) with the parameters given in table. 1; type B without slope (d = 1/10 h) with the parameters given in table. 2; type B with an inclination of about 75 ° (d = 1/10 h) with the parameters given in table. 2.Table 1
Type A font (d = h / 14)
Font options
Designation
Relative size
Dimensions, mm
Font size - height of uppercase letters height of lowercase letters Letter spacing Font line width table 2
Type B font (d = h / 10)
Notes: 1. The distance a between letters, the adjacent lines of which are not parallel to each other (for example, GA, AT), can be reduced by half, i.e. by the width d of the font line. 2. The minimum distance between words e, separated by a punctuation mark, is the distance between the punctuation mark and the word following it. When executing documents in an automated way, it is allowed to use fonts used by computer technology. In this case, their storage and transfer to document users should be ensured. (Modified edition, Amendment No. 2) 2.2. The following font sizes are set: (1.8); 2.5; 3.5; five; 7; 10; fourteen; twenty; 28; 40. Note. The use of a font size 1.8 is not recommended and is allowed only for type B.2.3. The construction of the font in the auxiliary grid is shown in Fig. 4.Font options
Designation
Relative size
Dimensions, mm
Font size - height of uppercase letters height of lowercase letters Letter spacing Minimum row spacing (auxiliary grid height) Minimum spacing between words Font line width 
2.4. Limit deviations of the sizes of letters and numbers ± 0.5 mm.
3. RUSSIAN ALPHABET (CYRILLIC)
3.1. Font type A with a slant is shown in Fig. five
3.2. Type A font without slant is shown in fig. 6.
3.3. Font type B with a slant is shown in Fig. 7.
3.4. Type B font without slant is shown in Fig. eight.
4. LATIN ALPHABET
4.1. Font type A with a slant is shown in Fig. nine.
4.2. Type A font without slant is shown in fig. 10.
4.3. Font type B with a slant is shown in Fig. eleven.
4.4. Type B font without slant is shown in Fig. 12.
4.5. The types, shape and location of diacritics for non-oblique fonts of types A and B are given in the reference appendix. Diacritics for oblique fonts should be followed in the same way.
5. GREEK ALPHABET
5.1. Font type A with a slant is shown in fig. 13.
5.2. Type A font without slant is shown in fig. fourteen.
5.3. Font type B with a slant is shown in Fig. fifteen.
5.4. Type B font without slant is shown in Fig. sixteen.
5.5. The name of the letters of the Greek alphabet shown in Fig. 13 - 16:
6. ARABIC AND ROMAN NUMBERS
6.1. Type A font is shown in the drawing. 17.
6.2. Type B font is shown in the drawing. 18.
Notes: 1. Roman numerals L, C, D, M should follow the rules of the Latin alphabet. 2. Roman numerals are allowed to be limited by horizontal lines.
7. SIGNS
7.1. Font type A with a slant is shown in fig. nineteen.
7.2. Type A font without slant is shown in fig. twenty.
7.3. Font type B with a slant is shown in Fig. 21.
7.4. Type B font without slant is shown in Fig. 22.
7.5. The names of the signs are given in table. 3.
Table 3
Character numbers in drawings
Name of signs
Character numbers in drawings
Name of signs
1 Dot 25 Percent 2 Colon 26 Degree 3 Comma 27 Minute 4 Semicolon 28 Second 5 Exclamation point 29 Parallel 6 Question mark 30 Perpendicular 7 Quotes 31 Injection 8 AND 32 Slope 9 Paragraph 33 Taper 10 Equality 34 Square 11 Value after rounding 35 Arc 12 Compliant 36 Diameter 13 Asymptotically equal 37 Radical 14 Approximately equal 38 Integral 15 Less 39 Infinity 16 More 40 Square brackets 17 and 17a Less or equal 41 Round brackets 18 and 18a More or equal 42 Fraction trait 19 A plus 43 Number 20 Minus, dash 44 From to 21 Plus or minus 45 Similarity mark 22,23 Multiplication 46 Star 24 Division 8. RULES FOR WRITING FRACTIONS, INDICATORS, INDEXES AND LIMIT DEVIATIONS
8.1. Fractions, indicators, indices and maximum deviations are performed in accordance with table. 4 in font size: one notch less than the font size of the base size to which they are assigned; the same size as the base size font.Table 4
Execution options
Examples of execution
basic quantities
fractions, indicators, etc.
The font size is one stop smaller than the base size 
The font size is the same as the base size 
APPENDIX
Reference
CIRCUIT SIGNS
Hungarian
German
Polish language
Romanian language
Czech and Slovak language
INFORMATION DATA
1. DEVELOPED AND INTRODUCED by the USSR State Committee for Standards2. APPROVED AND INTRODUCED INTO EFFECT by the Resolution of the USSR State Committee for Standards dated 03.28.81 No. 15623. (Deleted, Amendment No. 2) 4. REPLACE GOST 2.304-685. Edition (July 2001) with Amendment No. 1, approved in March 1989 (IUS 7-89)
A spade is 12 points, which is just under 1/6 of an inch (most people round this figure). The width and height of the columns and stripes are expressed in peaks.
The point is 0.353mm. The font size and line spacing are measured in points.
Cicero is a unit adopted in most of Europe. It is approximately equal to the peak (5.62 zicero is equal to 1 inch).
The terms round space, semicircular space, thin space characterize horizontal font sizes. They correspond to the widths of the capital letters M, N and the lowercase letter t.
The round space is equal to the font size, the semicircular space is 0.5 font size, and the thin space is 0.25 font size. In other words, for a 12 point font, the round space is 12 points, the semicircular space is 6 points, and the thin space is 3 points. The width of a digit indicates how much space a digit takes on a line. It is equal to a semicircular space (in most fonts, all numbers have the same width, which is especially convenient when forming numeric columns in tables).
The following table shows the ratios of the main units of measurement:
BASIC TERMS
FONT
A font is a set of characters of a specific size and design (for example, 10-point New Baskerville Bold).
Most fonts can be divided into four groups: serif fonts, serif fonts, sans serif fonts, decorative fonts, and script fonts.
The following are examples of some of the commonly used DTP fonts:
FONT GROUPS
There are several styles for each font: plain, italic, bold, and bold italic. Different styles of a certain font of all possible sizes (point sizes) are combined into one font family or typeface.
Below is an example of the different styles of the Times typeface:
Times Plain
Times Italic
Times Bold
Times bold italicOf course, these are not all possible styles, but these styles are necessarily present in all typefaces. In addition to them, one can name such widespread styles as: light, extra light, demi bold, extra bold, compressed or condensed. There are many others, for which sometimes there is not even a generally accepted name.
FONT PROPORTIONS
Depending on the proportions of the characters, the font can be condenced, normal and expanded. Implementing a compressed font of a certain typeface as a distinct flavor in DTP systems is the exception rather than the rule. The overwhelming majority of compressed fonts are obtained by means of the DTP system itself - by proportional deformation. Moreover, such deformation may not necessarily represent compression - stretched outlines are also built.
DECORATIVE EFFECTS
One of the interesting design options for any typeface is the construction of outline characters (Outline effect). DTP systems also have the ability to create a shadow (Shadow) effect for any font.
These and many other effects are implemented by a computer by modifying standard fonts according to certain algorithms.
Other commonly used decoration operations include the following: underline and double underline, strikethrough, text offset relative to the normal line position, and their various combinations.
FONT SIZE
The font size is the distance between the top and bottom font lines. Typically, font size (point size) is expressed in points.
Determining the font size visually is difficult only for novice users of DTP systems. Even after a short work, the user gains experience and after a while recognizes most of the pins of frequently used typefaces almost unmistakably.
The following illustration shows several pins of the same typeface:
There are specific names for individual pins, also "inherited from the past": diamond (3 points), diamond (4 points), pearl (5 points), nonparelle (6 points), minion (7 points), petite (8 points), borges (9 points), corpus (10 points), cicero (12 points), mittel (14 points), third (16 points), text (20 points).
FONT CAPACITY AND SATURATION
Each font has its own general tone or weight - a purely visual parameter that characterizes how a particular font will look on the page. It can be light or dark. Saturation varies depending on the type of font and style, the uniformity of the text.
Fonts of the same size can have different capacities, i.e. one line can contain a different number of characters. Some typography books provide font capacity tables to determine the average number of characters for different sizes in different line formats. I would not recommend using them, because the parameters of the same font vary depending on the manufacturer. A more acceptable way is to determine the capacity yourself. To do this, type a column of text and duplicate it for the fonts you are going to use.
In the figure below, the same text is typed in one size, but has its own capacity and weight for different fonts:
For each group of publications, it would be good to find a specific set of typefaces. But that doesn't mean you should limit yourself to just a few fonts. Choose more typefaces than you need for a single document to expand your creativity.
The general principle is to use serif typefaces for body text and serif typefaces for headings and other elements. But there are no rules without exceptions. In one document, you can limit yourself to chopped typefaces, in another, only with serifs. It is only necessary to take into account that the text in chopped type is more difficult to read; this is especially true for large volumes.
Here are some simple tips for using fonts:
Use a straight, light typeface for body text.
When choosing a font (especially for very light typefaces), determine on which device you will output your document. The fact is that laser printers print letters thicker than they get on phototypesetting machines, and the worse the printer resolution, the thicker the letters are. Either way, go through the test prints before making a decision.
Use a bolder typeface for headings and subheadings. Avoid the same typefaces for headings and body text. On the other hand, it is better to use similar typefaces for headings and subheadings; the same applies to cases where there are several typefaces in the main text.
If the heading spans more than three lines, the typeface should be equal in weight to the body text. If the typefaces of the heading and the text are the same, separate the heading from the text. By using bold for the first words of the headline, you are giving a heading, and typing in italics will help separate the heading from the body text without distracting attention. If the heading spans less than three lines, the typeface looks more impressive than the body copy.
Try not to use more than three different typefaces on a strip, but instead use different styles of the same typeface in document elements (headings, body text, headings, etc.). However, some headsets are very similar to each other, and you can use them as variations of the same headset.
Italics look great in headers, lines with the names of the authors, side headers and window headers.