Text content is an important part of the site. Visitors need curious publications, interesting articles or new recipes for pies. In a word, what they can read. But the text must be able to correctly format. No one will want to read your articles if the font is disgusting and the letters are too small.
Style Selection
A quick way to increase the attractiveness of content is to choose a beautiful font style, or CSS font-family property:
h1{ font-family: Verdana; }
First, you specify the selector for which the property applies. In this example, this is the first level header <h1>. After the font-family and colon, write the name of the font that you want to use on your site. But visitors to the page will see this font only if it is preinstalled on their computer or phone.
There are groups of fonts that are available on each user's devices. For example, Arial, Helvetica and, of course, Times New Roman. Designers divide them into four types.
Four font families
The first is an antique, or serif font. Great for long articles. Small strokes at the ends “bind” the letters and make the text pleasing to the eyes and easy to read. This group includes: Times, Garamond, Baskerville, Georgia.
If you don’t know which combination to choose, try the following CSS font-family set:
font-family: Baskerville, Palatino Linotype, Times, serif;
The next large group of fonts is sans-serif, or chopped fonts. They have no serifs, they do not look as florid as antiquated ones, but clearly and clearly. Always use them for headlines. The most popular representatives are CSS font-family Arial, Tahoma, Helvetica and Verdana.
Not as often as the two previous types, monospace and decorative fonts are used. The monospace style has the same character width, and they look like letters from typewriters. Needed to display special code, such as CSS. Font-family of such fonts include Courier, Copperplate Light, Copperplate Gothic Light.
With decorative fonts, be careful. Excessive amount of decorated text makes a barker from the web page of the fair. But if it is unbearable, then the appearance should be appropriate for the context. The CSS font-family header for Comic Sans MS will look ridiculous on a circular saw site.
Web fonts
The Internet would be a very boring place if every headline was typed in Arial and every article in Times New Roman. To the delight of designers, modern browsers support web fonts. They differ from desktop (installed on the computer) format. For desktop applications, such as Photoshop, Word, Illustrator, files with the extension .otf .ttf or .ps1 are used. To work on the Internet, you need TrueType, WOFF, EOT and SVG formats.
So, web typography is designed and digitized letters of the desired format, which are connected using external links to the source, or CSS font-face rules:
@font-face{ font-family: 'Roboto'; src: url('../fonts/roboto_family/Roboto/Roboto-Italic.woff'); font-style: italic; font-weight: normal; }
The World Wide Web is replete with resources with all kinds of paid and free typography. The easiest, free and sometimes optimal solution is to use Google Fonts. Go to fonts.google.com and choose what you like. Near the name there is a button in the form of a red "+", click it, and the font is selected. You can not limit yourself and add five or ten families at once.
At the bottom of the screen is a black popup with the inscription family selected. Activate it, and you will see a link like:
<link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet">
And individual records of selected families:
font-family: 'Open Sans', sans-serif; font-family: 'Notable', sans-serif;
Paste the link into the HTML markup in the <head> section:
<!doctype html> <html> <head> <title>Signification</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="sign.css"> <link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet"> </head> <body> </body> </html>
Then use fonts in CSS. Font-family selected on Google Font are assigned as a text selector. For example, you have several paragraphs with text and a headline:
p{ font-family: 'Open Sans', sans-serif; } h1{ font-family: 'Notable', sans-serif; }
@ Font-face rule
If you do not want your site to depend on external resources, connect typography via @ font-face. First download the files to your local machine. Put them in the working directory of the site, preferably in a separate folder fonts. Open CSS and write the @ font-face rule. In font-family, specify the name of the font, in src the path to the files.
@font-face { font-family: 'League Gothic'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embeddedopentype'), url('fonts/League_Gothic-webfont.woff2') format('woff2'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') format('svg'); }
Now assign the connected fonts to your text. When you download fonts, make sure that they support the Cyrillic alphabet.