Italic style is one of the most popular ways to highlight a piece of text and give it a certain meaning. It is ideal for quotes, footnotes, names and proper names. HTML has two special tags for displaying italics. In CSS, italics are controlled by the font-style property.
Italic or oblique font?
The display of the same font in italics may vary.
The picture shows three blocks of text typed in the same Playfair Display font. The first has the usual direct style, and the second and third are italic. They are open in the same Google Chrome browser, but they look completely different.
The fact is that some fonts have their own italic character sets. If the browser does not have access to this set, but encounters text that should be displayed as italic, it will try to tilt it on its own.
In the second block - just such a version processed by the browser, and in the third - the original italicized version of the Playfair Display font, which has a unique style, looks more like a handwritten one. The browser simply tilts each character of the text at a certain angle, simulating italics.
When deciding how to make italics in CSS or HTML, it is important to remember that in the case of specific fonts, it is necessary to provide the browser with access to their italic sets. In some cases, the result of the work of browser tilt algorithms may be unsatisfactory.
HTML italics
For italic display of text in HTML, there are two special tags: i
(from the word italic) and em. The style of the text fragment enclosed in any of these descriptors will be the same.
The difference is logical allocation. The em tag indicates the particular importance of the fragment. This is important for search robots and screen readers, which will highlight the specified text using intonation.
Font-style property
In CSS, the font-style statement controls italics. It can take one of three basic values:
- normal - the font of the regular style;
- italic - italic style;
- oblique - oblique style.
At the moment, most modern browsers handle oblique and italic values the same way, but initially it was assumed that the first is the result of the work of special browser algorithms that tilt each character to the right.
If the desired font is not detected by the browser, then italic will look exactly like oblique.
Unlike the em tag, the css-property font-style does not attach special importance to the selected fragment, it rather corresponds to the i descriptor.
Examples
Quotes often stand out in italics. Let’s try to give Oscar Wilde’s dictum a beautiful look.
.quote { font-style: italic; border-left: 5px solid purple; padding-left: 20px; }
In addition to the decorative border on the right and indentation, a font-style rule with an italic value is defined for the quote block.
Use it to set italics in CSS.