How to set the desired font size? Responsive font size

One of the first text characteristics that the user usually and most often uses when working on a document is the type and size of the font. While choosing fonts doesn't seem like a daunting task, a few basic rules will help you achieve the desired effect. In most cases, two or three different fonts are enough to ensure the readability of a document, since large quantity fonts distracts attention.

Several factors influence the specific choice of fonts, their number and sizes. These include the purpose of the document, the intended audience, and the format of the document. If the document is intended to be used as a reference document, larger, more colorful fonts may be used. If the document is a formal report, headings should be limited to strong bold type that does not overload the text and emphasizes the connection with the body text.

Font is a set of character characteristics in a single typeface (of the same typeface), such as Arial, Times New Roman, or Courier. The sign composition of most fonts includes uppercase and lowercase letters, numbers, punctuation marks, as well as additional characters from the extended set.

Font size (size) is measured in paragraphs :1 point equals 1/72 of an inch.

To choose required size font, you need:

On the menu Format select a team Font(Fig. 10.8).

Set the desired font, size, color, style.

Change text color

Select the text you want to change and do one of the following:

In frame Modification checkboxes can be set:

h

Rice. 10.9.

double strikethrough - strikethrough text with a double line;

superscript - the size of the characters decreases, the text is located higher;

subscript - the size of the characters is reduced, the text is located below;

with shadow - a shadow appears next to the symbols;

circuit – only the outline of symbols is shown;

elevated - characters are displayed raised above the surface of the sheet;

recessed - symbols are depicted sunk into the surface of the sheet;

small caps - lowercase letters become uppercase, but smaller;

all uppercase - lowercase letters become uppercase;

hidden - makes the text unprintable.

In field Sample a text fragment with the selected options is shown.

If it's necessary change character spacing , need:

On the menu Format choose a team Font, and then go to the tab Interval and perform one of the following actions (Fig. 10.10):

kerning adjusts the spacing between individual pairs of letters. When choosing options sparse or compacted all letters are spaced equally.

Changing the scale of a document

Sometimes you need to reduce the scale of the document so that it fits on the screen. In this case, you can work with the document as with a sheet of paper. Conversely, it is often necessary to zoom in on an image, for example, to view or edit fine details of a graphic object. Zooming only changes the presentation of the document on the screen, not the size of the text and graphics used for printing.

The main tool for changing the scale of a document is the dialog box Scale. You can open it by selecting from the menu View command Scale(Fig. 10.11). When using the dialog box Scale it is possible to set more scaling options.

If you are working in page layout mode, you can set the switch to the position Whole page or Multiple pages to zoom out to fit the required number of pages on the screen. When the switch is set to Multiple pages select the number of pages by clicking on the appropriate cell in the drop-down palette.

Approximately the same scaling parameters (but faster) can be set using the field Scale on the standard toolbar (Fig. 10.12).

A font set is a collection of all lowercase and uppercase letters, numbers and punctuation marks that have the same size and style (Fig. 18.13). Fonts can be straight or italic. The roman type refers to the letters of the straight form, in contrast to the cursive type, in which the letters are slanted. Latin (Roman) denotes a group of fonts that have serifs.

Font families combine two or more types of fonts, which are different font variants that have the same style (Fig. 18.14). However, each type retains the inherent characteristics of the basic form of the letters. Options may include italic, narrow (thin), light, bold (semibold), bold, medium (medium), narrow (condensed), wide, outline and other types of font. Some families offer only some of these options, while other families offer more

Rice. 18.13. Examples of two "Bookman" font styles, normal and bold

selection of font options. The font family provides a variety of yet harmonious font styles that can be used in advertising.

Font size

Typesetters use uniform font units. If you are going to communicate with people involved in manufacturing, you need to know the basic units of measure. In all English-speaking countries, points and piceros are accepted as units of measurement used in printing production. Let's get to know them better.

Paragraph

Point (pt) is used to measure font size (height of letters). There are 72 points (0.351 mm) in one inch (2.54 cm). It's useful to know that a 36-point font is about half an inch tall, and an 18-point font is about 1/4 inch. On fig. 18.15 explains the basic terms used to denote type height. The font size can be from 6 to 120 points. The body text font size is usually in the range of 6 to 14 points. Most publications use 9, 10 or 11 point fonts. Fonts larger than 14 points are called highlight or heading fonts. However, these sizes are just a convention: as a rule, the font size of the main text of newspaper advertising is approximately 18 points, in addition, there are advertisements in which the size of the heading is approximately equal to the size of the body text. Figure 18.16 gives a visual representation of the basic font sizes.

Along with measuring font height, pips are used to measure spacing between lines, lines, and edges.

There are many ways to customize the CSS font size. A significant part of layout designers still use pixels, but this is not quite the right approach. A pixel is too simple an option that is not always suitable for layout of adaptive pages. Consider everything existing methods changing the CSS font size.

What is this "font size" anyway?

There is an opinion that the size is understood as the size of the largest character of the specified font. This is not true. In fact, the value is built into the font, and it is unlikely that it will be possible to measure it manually 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. This is done in order to fit any combination of characters in a 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 difficulties with size. Nothing needs to be calculated. What size is specified, such will be the characters on the screen. The downside is difficulties with CSS responsive font-sizing. It will not be possible to establish ratios between different sizes.

Outdated units of measurement can be attributed to the number of "pixel" ones. These include pc, cm, mm and pt. So, mm is a millimeter, cm is a centimeter. Pt and pc - typographic point and typographic peak. Why are these methods obsolete? Because they weren't "self-contained" - the browser automatically converted the values ​​to pixels. Accordingly, the problems were the same as in the case of px. By the way, one cm from the browser's point of view contains 38px.

Em: value depends on parent element's font size

Everything is simple. Let's say you have a div that has a font-size of 16px. It contains another div that has its CSS font-size set to 2em. Accordingly, 1em will be 16px (i.e. the font size of the parent element), and 2em will be twice as much, i.e. 32px.

You can also set the value in em on the parent element. In this case, it will depend on the base size set in the body or html. Em is a relative CSS font size that will grow and shrink with the parent element's character size. This is convenient - to change the value in in large numbers places, you just need to change the parent parameters.

For professionals: ex and ch

Practically not used by ordinary layout designers and frontend developers. Ex is the value of the symbol "X", and ch is the value of the symbol "0". The selected font may not have these characters, but the options can still be used. It is not known for certain which cases such sizes are best suited for. Try experimenting - maybe it will be more convenient for you? However, remember that ex and ch are "conventional" units, so fine-tuning the parameters will be difficult.

Percentages: the most confusing option

How to set font size in CSS as a percentage? It would seem that everything is simple - you just need to specify the desired parameter and put the "%" symbol after it. But here an important question comes into play: “The percentage of what will be the given size?”

In most cases, the parameter is calculated depending on the value 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 box. If you set line-height, then the percentage will be taken depending on the current font size.

Setting the parameters in percentages requires careful experimentation. Be careful with this unit of measure as it can easily change appearance your layout.

Rem: a simple and versatile unit

The above lists many ways to set font sizes in CSS, 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.

It's easier than it seems at first glance. For example, for the html tag that wraps all the content on the page, you set the font-size to 16px in CSS. 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 can not touch anything at all, since browsers themselves set a certain font size for the wrapper. But for a more thorough setting, it is still better to redefine the indicator. The main advantage of rem is that you can easily scale fonts in a certain place without affecting other elements. However, remember that older browsers (IE below version 9) do not support this indicator.

Vw and vh: exotic options

The latest units of measurement designed for mobile devices. Vw is 1% of the width of the window where the 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, zoom in and out on the screen.

Summing up

It has long been possible not to set CSS font sizes only through 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 its own advantages and disadvantages, so check several methods before using. Modern layout designers often resort to rem, as it is one of the most simple ways change font size. However, it has a drawback - the components become less modular.

• if properties need to be scaled relative to font-size, the best choice will become em;
• otherwise, rem is recommended.

Em is often used to set padding and margin sizes. Be careful when specifying the character size for lists, because the characters may be unreadable due to the large nesting.

Text formatting includes a set of operations for changing fonts and their characteristics on a document page. A font is a set of letters, numbers, symbols, punctuation marks of a certain type. The set of fonts that can be used when creating a document depends on the type of printer and the fonts installed on the computer.

Using different fonts in one document is the most common formatting technique. Font design tools are used for the following purposes:

• Text highlights to emphasize individual phrases, words, quotes, etc.
• Headings and captions
• Typing special text (formulas, indexes, notes).

The appearance of the text depends not only on the selected font, but also on its size. Typically, font size is measured in points (1 point (pt) = 0.376 mm). In documents, as a rule, the main font size is 10-12 pt, for headings the size is increased, for notes and links it is reduced.

These operations are implemented using the command Font from the menu Format and setting the appropriate settings.

Characteristics of characters:

font (Arial, Times New Roman, Peterburg).

Size (8,10,14).

Position on the line (m 2, x i) .

Rice. 36. Spacing tab of the Font window

Table 6. Field values ​​of the Font window (Interval tab)

Word allows you to undo the operation. Team Cancel (Undo) on the menu Edit context sensitive; when the user is typing or editing text, the command corresponding to the last operation performed will be prompted.

On the Standard panels to cancel last command you have to press the button Cancel (Undo) or undo multiple commands by selecting them from the list.

The font size in CSS is set using the property font-size, For example:

p(
font-size: 12px;
}

AT this example the size is given in pixels, but to determine the value given property other units of measurement can be used. Before making a choice in favor of one or the other of them, you should weigh all the arguments for and against.

In table. 1 shows the units that can be used to indicate font size.

Let's consider the application of each of them in more detail.

p(
font-size: 10pt
}

Use should be avoided points and peak to style text to be displayed on the screen. These units are ideal for setting the font size for printing; measurement in points came from printing. A point is 1/72 of an inch and a pica is a sixth of an inch. When printed, text documents set in these units will exactly match the author's intentions - in the end, a sixth of an inch remains a sixth of an inch on both A4 and Whatman paper. However, computers are not able to display physical dimensions with such accuracy, and they try to guess - and not very successfully - the size of a point or spade, which can cause the same document to be displayed differently under different platforms.

If you are writing a style sheet for printing, or if the document itself is intended to be printed rather than viewed from the screen, points and spades should be used. However base rule when designing a page for display on the web: avoid using them.

p(
font-size: 12px;
}

Many designers like to use pixels as the unit of measure for font size, as this allows for consistent rendering across different browsers and platforms. However, this ignores the user's browser settings; moreover, when viewing such a page in Internet Explorer, the user will not be able to change the font size. This presents a severe limitation for visually impaired users, who are dependent on the presence of the font enlargement function to read.

It may seem that using pixels to set the font size is the easiest and most convenient solution, but if you have alternative methods this method should be abandoned, especially when it comes to large blocks of content. When creating a document intended for printing or writing a style sheet for printing, it is completely inappropriate to use pixels in the world of paper documents, they completely lose their meaning, like points in a screen environment. Specifying the font size of text to be printed in pixels will attempt to guess how it should appear on paper, and the results may not always match what you expect.

Em– relative unit of measure for font sizes. Its name comes from the field of typography, where it corresponds to the size of the capital M, which is usually the widest character in a font. In CSS 1em matches the default font size used on the user's system, or the parent element's font size, if different from the default font size.

If you are using em(or other relative units) to set the size of all fonts, users will be able to resize text characters according to the character size settings set in their browser. For example, let's create a style description that sets the font size inside the element p equal 1em:

p(
font-size: 1em
}

Using em to set the font size limits your control over the display of the document. However, this approach means that a visitor who needs large print will be able to read your content, which is ultimately what you put text on the page for.

Values ​​in em can be specified as decimal numbers. For example, to set the font size to 10 percent less than the default (or the parent element's font size), you can use the following rule:

p(
font-size: 0.9em
}

You can use the following rule to make text 10 percent larger than when using the default or inherited value:

Ex is a relative size unit corresponding to the height of the lowercase letter "x" in the default font. Theoretically, if you assign a property font-size paragraph value 1x, its uppercase letters will be the same height as a lowercase x would be if no font size was specified (with the size of lowercase letters calculated relative to uppercase letters).

p(
font-size: 100%
}

As in the case with em and ex, when setting sizes in percentages, the sizes will be correlated with the settings of the user's browser, and the user will be able to change the font size independently. Meaning 100% element font size p corresponds to the font size specified by the default settings (same as when setting the value 1em). Decreasing the percentage decreases the text size:

p(
font-size: 90%
}

As the percentage increases, the text size increases:

The font size can be set, in addition to assigning numeric values, through keywords with absolute and relative values.

Keywords with absolute values

There are seven absolute CSS keywords at the disposal of a web developer:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

The meanings of these keywords are defined relative to each other, and different browsers interpret them differently. Most browsers render text with a size medium similar to text with default settings, and the rest of the keywords changes the size of the text relative to medium according to their names.

Dimensions using keywords are called absolute because there is no inheritance from the parent element. However, unlike using absolute values, such as pixels or points, using absolute keywords allows the site visitor to manually change the font size and does not override the user's browser settings. The main problem with using absolute keywords is the inconsistency in the display of text formatted with them in different browsers - xx-small text can be clearly visible in one browser and completely unreadable in another.

Keywords with relative meanings

When setting font size using relative keywords − larger and smaller- it is defined in relation to the size set for the parent element, similar to how it happens when using em and % . Thus, if the element size p specified with an absolute keyword small and you want the selected text to be displayed in a larger font, you can use the following style sheet:

p(
font-size: small
}
em (
font-size: larger;
}

This markup will be rendered because the text between the tags and rendered in a larger font than the parent element's text p:

Example:

In this example, the font size is set in the class copy. Text enclosed in a tag

, printed with an indent 2em. The size of the third level heading is larger than the size of the body text, installed by the browser default.

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES
ARE DISTRIBUTED IN A NETWORK ENVIRONMENT-ON A SERVER, AT
A SINGLE-USER WORKSTATION AND AT A SHARED-VERSION WORKSTATION.

Result:

CHAPTER II
The Pool of Tears

After Word has been installed on a network server, workstation users can select one of three options.

THE FOLLOWING TABLES DETAIL HOW WORD FILES AND DIRECTORIES ARE DISTRIBUTED IN A NETWORK ENVIRONMENT - ON A SERVER, AT A SINGLE-USER WORKSTATION, AND AT A SHARED-VERSION WORKSTATION.