The font-variant property sets the text as normal or small-caps from a font-family. The font-variant property can have two values: normal and small-caps. Normal is the default value. When we select small-caps for a text, it makes the lowercase letters to the uppercase letters, but these converted letters will be displayed a little smaller than normal uppercase letters. The font-variant property can…

The font-style property defines the font style for a text. The property has three values: normal, italic and oblique. Oblique is a roman font that has been skewed 8-12 degrees. Italic is another value that is created by the type designer with specific characters particularly lowercase “a” for creating a calligraphic and a slanted version. Oblique is…

The font-stretch property makes the text wider or narrower. This property is one of the CSS3 properties. The font-stretch property does not work on any font! It only works if the font-family has width-variant faces. The font-stretch property alone does not stretch a font. This property has the following values: Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable…

The font-language-override property controls the use of the language-specific glyphs. This property can be specified by two values: normal and <string>. The “string” must match a language tag. For example, “TRK” for Turkish. By default, the HTML lang attribute instructs the browser to display glyphs which are deigned for a certain language. The font-language-override property overrides the typeface behavior for a…

The font-size-adjust property controls the font size when the first specified font is not available. In such cases, the browser uses the second specified font. Thus, the font size can be changed. The font-size-adjust controls this process. The font-size-adjust property is one of the CSS3 properties. All fonts have an “aspect value” which is the difference of size between the lowercase letter…

The font-size property defines the font size of the text. Font size can be defined by the following ways: Absolute font size includes the following values: Relative font size includes the following values: Lengths can be relative lengths (em, ex, px) and absolute lengths (in, cm, mm, pt, pc). Percentages specify an absolute font size relative to…

The font-kerning property controls the use of the kerning information stored in a font. Kerning defines the spacing of the letters. Kerning specifies how the letters are spaced. It makes character spacing more pleasant to the eye and easier to read. Initial Value auto Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version…

The @font-feature-values at-rule sets a named value for certain font feature of a font family. It can be used at the top level of CSS or in a CSS conditional-group at-rule. The @font-feature-values at-rule can contain any of the following feature values: Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for…

The font-feature-settings property controls over advanced typographic features in OpenType fonts. The property has two values: normal and <feature-tag-value>. “Normal” is the default value. <feature-tag-value> value is a positive integer. The two keywords “on” and “off” are synonyms for “1” and “0” respectively. If no value is specified, the initial value will be “1”. For adding multiple…

The font-family property allows creating a prioritized list of font family names and/or generic family names for the selected element. We use commas to separate the values and show them as alternatives. The browser will select the first font to use if it is available. However, it may be unavailable in some cases like the user’s computer…