CSS - Fonts Property

---

---

A font is a set of text characters with a consistent design and style. It includes the shape, size, weight, and other attributes of the characters in a typeface.

• Fonts are used to display and represent text in various mediums, such as print, digital screens, and graphic design.

• Fonts can be chosen to convey a specific mood or aesthetic, enhance readability, or align with a brand's identity.

• Fonts play a crucial role in communication and design.

• Fonts can evoke different emotions and convey specific messages to the audience.

This chapter demonstrates how to set fonts of a content, available in an HTML element. You can set following font properties of an element −

• font: It is a shorthand for all the other font-related properties that can be passed in one single declaration.

• font-family: Specifies the font family or list of font families to be used for text.

• font-feature-settings: Controls advanced typographic features in OpenType fonts, such as swashes, small caps and ligatures.

• font-kerning: Determines the way specific pairs of letters are spaced.

• font-language-override: Overrides the typeface behaviour for a particular language.

• font-optical-sizing: Sets whether rendering of text should be optimized to view at different sizes.

• font-palette: Allows you to specify one of the various palettes that are contained in a font.

• font-size: Sets the size of the text. It can be specified in pixels (px), points (pt), percentages (%), ems (em), or other units.

• font-size-adjust: Sets the size of the lowercase letters in accordance with the current font size.

• font-stretch: Sets the expanded, condensed or a normal font face.

• font-style: Specifies the style of the text, such as "italic", "oblique", or "normal".

• font-weight: Determines the thickness or boldness of the text. Common values are "normal" and "bold", though numeric values (e.g., 100, 200, 300) and keywords (e.g., "lighter", "bolder") can also be used.

• font-synthesis: Determines whether or not the browser should synthesize the bold, italic, and / or small-caps typefaces that are missing in a font-family.

• font-synthesis-small-caps: Determines whether or not the browser should synthesize the small-caps typeface, that is missing in a font-family.

• font-synthesis-style: Determines whether or not the browser should synthesize the oblique typeface, that is missing in a font-family.

• font-synthesis-weight: Determines whether or not the browser should synthesize the bold typeface, that is missing in a font-family.

• font-variant: Controls the use of small caps for lowercase letters in the text. Values can be "normal" or "small-caps".

• font-variant-alternates: Controls the usage of alternate glyphs.

• font-variant-caps: Controls the usage of alternate glyphs for capital letters.

• font-variant-east-asian: Controls the usage of alternate glyphs for East-Asian scripts like Chinese and Japanese.

• font-variant-ligatures: Controls the textual content of element as to which ligature or contextual form should be used.

• font-variant-numeric: Controls the usage of alternate glyphs for numbers, fractions and ordinal markers.

• font-variant-position: Controls the usage of alternate, smaller glyphs, positioned as superscript or subscript.

• font-variation-settings: Specifies the four-letter axis names of variable font characteristics.

• line-height: Sets the height of the line box. Also sets the distance between the lines of text.

CSS Font Shorthand

In order to shorten the code, CSS allows a shorthand property for font where all the following properties can be specified in one single declaration:

The font property is a shorthand for:

• font-style

• font-variant

• font-weight

• font-stretch

• font-size

• line-height

• font-family

Points to remember:

• The properties font-style, font-variant and font-weight must always precede font-size.

• The values normal and small-caps may only be specified with the property font-variant.

• The property font-stretch may only be a single keyword value.

• The property line-height must follow the property font-size, preceded by "/". For example: "20px/3".

• The property font-family must be the last value specified.

The values for font-family and font-size are required, and in case any of the values is missing, the default values are used.

System Font Values

There is a list of system font values, which is as follows:

• caption: Used for captioned controls, such as, buttons, dropdowns, etc.

• icon: Used for label icons

• menu: Used in menus, such as, dropdown menus or list menus.

• message-box: Used in dialog boxes.

• small-caption: Used for labeling small controls.

• status-bar: Used in window status bars.

• Prefixed system font keywords: Implemented by browsers, such as, -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.

CSS Fonts - With Multiple Values

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font Shorthand Property</h2>
   <p style = "font: oblique normal bold 20px Arial, sans-serif;">
      Shorthand Property Font
   </p>
</body>
</html>

CSS Fonts - Font Family

The selection of an appropriate font-family is very important, as it affects and reflects different styles, emotions and readability. Each classification has its own connotations and usages.

For example, while serif fonts have small embellishments or strokes at the end of characters, sans-serif fonts have a cleaner and more modern appearance.

Choosing the right font is an important aspect of graphic design and branding. It can help establish a visual identity and reinforce the message being conveyed.

Possible values for this property are as follows:

• <family-name>: Name of font-family. Name with whitespaces should be quoted.

• <generic-name>: This is the fallback mechanism. Should be the last value in the list of font-family names.

  • serif: Glyphs with finishing strokes, flared, or tapered-ends. Example: Lucida Bright, Palatino, etc.

  • sans-serif: Glyphs with plain stroke endings. Example: Open Sans, Lucida Sans, etc.

  • monospace: Same width glyphs. Example: Consolas, Monaco, monospace, etc.

  • cursive: Glyphs in cursive fonts with partially or fully joined strokes. Example: Brush Script MT, Lucida Calligraphy, etc.

  • fantasy: Decorative fonts containing playful representation of characters. Example: Curlz MT, fantasy, etc.

  • system-ui: Glyphs taken from default user interface font on any given platform.

  • ui-serif: Default user interface (UI) serif font

  • ui-sans-serif: Default UI sans-serif font

  • ui-monospace: Default UI monospace font.

  • ui-rounded: Default UI font with rounded features.

  • math: Font representing mathematical operations such as superscript, subscript, brackets, nesting expressions, etc.

  • emoji: Emoji rendering fonts.

  • fangsong: Style of Chinese characters that are between serif-style Song and cursive-style Kai.

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font-family</h2>
   <p style = "font-family: 'Times New Roman', Times, serif;">
      The text will be either 'Times New Roman', Times, or serif.
   </p>
   <p style = "font-family: Arial, Helvetica, sans-serif;">
      The text will be either 'Arial', Helvetica, or sans-serif.
   </p>
</body>
</html>

CSS Fonts - Font Feature Settings

The font-feature-settings property is provided by CSS to control advanced typographic features in OpenType fonts, such as swashes, small caps and ligatures.

Note: The font-feature-settings property should not be used to enable the small caps. It should be used only in special cases of OpenType fonts.

Possible values for this property are as follows:

• normal: Default value. Default font settings are laid out.

• <feature-tag-value>: Specified as a tuple, separated by space, having a tag name and an optional value.

  • Tag name is always a <string> of four ASCII characters, else it is invalid.

  • Optional value can be an integer or keyword on(1) or off(0). Default is 0.

Syntax

/* use small-cap */
  font-feature-settings: "smcp" on;

/* convert both upper and lowercase to small caps */
  font-feature-settings: "c2sc", "smcp";

/* use zeros with a slash through them to differentiate from "O" */
  font-feature-settings: "zero";

/* enable historical forms */
  font-feature-settings: "hist";

/* enable common ligatures */
  font-feature-settings: "liga" 1;

/* enable tabular (monospaced) figures */
   font-feature-settings: "tnum";

/* enable automatic fractions */
   font-feature-settings: "frac", on;

/* use the second available swash character */
   font-feature-settings: "swsh" 2;

CSS Fonts - With font-feature-settings Property

Here is an example:

<html>
<head>
<style>
   div{
      border: 1px solid red;
      margin: 5px;
      width: 300px;
   }
   p.allcaps{
      padding: 8px; font-weight: bold; font-style: italic; font-feature-settings: 'c2sc', 'smcp';
   }
   p.small-caps{
      padding: 8px; font-weight: bold; font-variant:small-caps; font-feature-settings: 'smcp', off;
   }
</style>
</head>
<body>
   <h2>Font feature settings</h2>
   <div>
      <p class="allcaps">
         Font feature settings-all caps
      </p>
      <p class="small-caps">
         Font feature settings-small caps
      </p>
   </div>
</body>
</html>

CSS Fonts - Font Kerning

The font-kerning property provided by CSS is useful in determining the way specific pairs of letters are spaced.

Every character has a set space on its left and right edges and when two characters are placed side-by-side, their side bearings get added up from its actual space.

In order to adjuts these side bearings of characters, the font-kerning property is used for. You can enable or disable this property.

Possible values for this property are as follows:

• auto: Browser decides whether font kerning should be applied or not.

• normal: Information of font kerning stored in the font must be used.

• none: Information of font kerning stored in the font is disabled.

CSS Fonts - With font-kerning Property

Here is an example:

<html>
<head>
<style>
   div {
      font-size: 2rem;
      font-family: serif;
   }
   #nokern {
      font-kerning: none;
   }
   #kern {
      font-kerning: normal;
   }
   #auto {
      font-kerning: auto;
   }
</style>
</head>
<body>
   <h2>Font kerning</h2>
   <div id="kern">AV</div>
   <div id="nokern">AV</div>
   <div id="auto">AV</div>
</body>
</html>

CSS Fonts - Font Language Override

The font-language-override property of CSS is used to override the typeface behaviour for a particular language.

Possible values for this property are as follows:

• normal: Specifies the browser to use the glyphs for the language specified by the lang attribute. It is the default value.

• <string>: Specifies the browser to use the glyphs for the language specified by the <string>. For example: "KOR" for Korean, "ENG" for English, "DAN" for Danish, etc.

CSS Fonts - With font-language-override Property

Here is an example:

<html>
<head>
<style>
  .my-text {
    font-family: Arial, sans-serif;
    font-language-override: "TRK";
  }
</style>
</head>
<body>
  <p>This is some text with language-specific glyphs: ğüşöçİ</p>
  <p class="my-text">This is some text with language-specific glyphs: ğüşöçİ</p>
</body>
</html>

CSS Fonts - Font Optical Sizing

The font-optical-sizing property of CSS is used to set whether rendering of text should be optimized to view at different sizes.

Possible values for this property are as follows:

• none: Shape of glyphs not modified for optimal viewing by the browser.

• auto: Shape of glyphs modified for optimal viewing by the browser.

By default optical sizing is enabled for fonts. Small text sizes are displayed with thicker and bigger fonts, whereas larger text is displayed in a more delicate manner, when optical sizing is used.

CSS Fonts - With font-optical-sizing Property

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<style>
   p {
      margin-bottom: 5px;
      border: 2px solid red;
   }
   .eng {
      font-family: "Montserrat", sans-serif;

   }
   .opt-no {
      font-optical-sizing: none;
   }
   .opt-yes {
      font-optical-sizing: auto;
   }
</style>
</head>
<body>
   <h3>Optical sizing -none</h3>
   <p class="eng opt-no">Check the optical sizing</p>

   <h3>Optical sizing -auto</h3>
   <p class="eng opt-yes">Check the optical sizing</p>
</body>
</html>

CSS Fonts - Font Palette

The font-palette property provided by CSS allows you to specify one of the various palettes that are contained in a font.

Possible values for this property are as follows:

• normal: Sets default color palette or the glyph colorization. The palette at index 0 is rendered.

• light: Sets the first palette that matches with 'light'. If no match is found, it behaves like normal.

• dark: Sets the first palette that matches with 'dark'. If no match is found, it behaves like normal.

• <palette identifier>: Allows a to specify your own palette using the @font-palette-values at-rule.

CSS Fonts - With font-palette Property

Here is an example:

<html>
<head>
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-palette-values --bungee-more-spicy {
      font-family: "Bungee Spice";
      override-colors:
      0 Orange,
      1 Yellow;
   }
   h2 {
      font-family: "Bungee Spice";
   }
   h2.more-spicy {
      font-palette: --bungee-more-spicy;
   }
</style>
</head>
<body>
   <h2>Font face</h2>
   <h2 class="more-spicy">Hot & burning</h2>
</body>
</html>

CSS Fonts - Font Size

Font size refers to the height of the characters in relation to the text's baseline. Larger fonts are typically used for headlines or titles to grab attention, while smaller fonts are suitable for body text or captions to ensure readability.

The possible values for font-size in CSS are:

• Absolute size keywords: These values are based on the default size of uesr's font-size (medium). It includes:

  • xx-small

  • x-small

  • small

  • medium

  • large

  • large

  • x-large

  • xx-large

  • xxx-large

• Relative size keywords: These values are relatively larger or smaller to the font-size of the parent element. It includes:

• larger

• smaller

• <length>: These are predefined positive <length> value. It includes em, ex, rem, px, in, etc.

• <percentage>: A positive <percentage> value, relative to the font-size of the parent element.

• math: It is the computed value of font-size for math elements relative to the font-size of the parent element.

CSS Fonts - With font-size Property

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font-size</h2>
   <p style = "font-size: large;">
      The font-size is large.
   </p>
   <p style = "font-size: 15px">
      The font-size is 15px.
   </p>
   <p style = "font-size: x-small;">
      The font-size is x-small.
   </p>
   <p style = "font-size: 60%;">
      The font-size is 60%.
   </p>
   <p style = "font-size: 2vw;">
      The font-size 2vw (viewport width). Change the viewport size to see the effect.
   </p>
</body>
</html>

CSS Fonts - Font Size Adjust

The font-size-adjust property can be used to specify a font's aspect value (numeric ratio) that controls the x-height (height of lowercase letters) of the font.

This ensures that the fallback font maintains a consistent visual size and proportion relative to the specified font.

The font-size-adjust property can take one of the following values:

• <number>: Specifies a numerical value that represents the aspect value, which is the ratio of the x-height of the font to the x-height of the font specified by the font-family property.

• none: Specifies that no font size adjustment is made based on the x-height.

• <keyword>: Specifies the font metric to normalize on:

  • ex-height: x-height divided by font-size.

  • cap-height: Using cap-height by font-size.

  • ch-width: Horizontal narrow pitch of the fonts is normalized.

  • ic-width: Horizontal wide pitch of the fonts is normalized.

  • ic-height: Vertical wide pitch of the fonts is normalized.

The browser support for font-size-adjust may vary, and it is not widely used in modern web development. The 'Firefox' and Safari browser supports this property.

CSS Fonts - With font-size-adjust Property

Here is an example (check the result on Firffox or Safari browser):

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
   p.p1 {
      font-family: 'Courier New', Courier, monospace;
      font-size-adjust:none;
   }
   p.p2 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: 0.6;
   }
   p.p3 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: ex-height 0.6;
   }
</style>
</head>
<body>
   <h2>Font-size</h2>
   <p class="p1">
      The font-size-adjust is none.
   </p>
   <p class="p2">
      The font-size-adjust is 0.6 on font-size 20pt.
   </p>
   <p class="p3">
      The font-size-adjust is ex-height and 0.6 on font-size 20pt.
   </p>
</body>
</html>

CSS Fonts - Font Stretch

Certain font-families provide additional faces in which the characters can be either narrower or broader than their normal appearance. The font-stretch property allows adjusting the width of the text (condensed or expanded).

Note: If the font face you are using does not support condensed or expanded forms, the font-stretch property will have no effect.

Possible values for this property are as follows:

• normal: Specifies a normal font face.

• semi-condensed, condensed, extra-condensed, ultra-condensed: Specifies a condensed font face than normal.

• semi-expanded, expanded, extra-expanded, ultra-expanded: Specifies an expanded font face than normal.

• <percentage>: A percentage value, which can be 50% to 200%.

• initial: Sets the value to initial value.

• inherit: Inherits the value from the parent value.

The mapping of keyword and respective percentage value:

CSS Fonts - With font-stretch Property

Here is an example:

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
   }
</style>
</head>
<body>
   <h2>Font-stretch</h2>
   <p style = "font-stretch: normal;">
      Normal
   </p>
   <p style = "font-stretch: condensed;">
      Condensed
   </p>
   <p style = "font-stretch: expanded;">
      Expanded
   </p>
   <p style = "font-stretch: 170%;">
      170% stretched
   </p>
</body>
</html>

CSS Fonts - With font-style Property

Font styles are used to change the appearance or style of text. The font-style property is used to specify the font style for the selected text.

There are three main font styles available in CSS:

• normal: Default font style where the text is displayed normally, without any slant or obliqueness.

• italic: Text appears in an italicized style, with a slight slant to the right.

• oblique: Text appears similar to italic but with a more exaggerated slant or angularity.

• oblique <angle>: An oblique text with an angle to specify the slantness of the text.

  • If no oblique font face available, the browser will slant the text by specified angle.

  • Valid values for angle are degree values between -90deg to 90deg inclusive.

  • If no angle specified, 14deg is set by the browser.

  • Positive angle value slants the text to the end of line.

  • Negative angle values slant the text towards the beginning.

  • Larger angle values are preferred.

These font styles can be applied to any HTML elements using CSS selectors and can be combined with other font properties like font-family, font-size, etc., to create desired text styles.

Note: The browser compatible for the font-style:oblique <angle> is firefox.

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font-style</h2>
   <p style = "font-style: normal;">
      The text will be normal.
   </p>
   <p style = "font-style: italic;">
      The text will be italic.
   </p>
   <p style = "font-style: oblique;">
      The text will be obligue.
   </p>
   <p style = "font-style: oblique 45deg;">
      The text will be obligue and slanted 45deg.
   </p>
</body>
</html>

CSS Fonts - With font-weight Property

Font weight refers to the thickness or boldness of the characters. Different weights within a font family can be used to create visual hierarchy or emphasis within a text.

The possible values for font-weight are as follows:

• normal: Font weight normal. Equivalent to 400.

• bold: Font weight bold. Equivalent to 700.

• <number>: Value between 1 and 1000 define thickness of font. Higher numbers represent weights that are bolder than (or as bold as) lower numbers.

• lighter: Lighter font weight relative to the parent element's font weight.

• bolder: Bolder font weight relative to the parent element's font weight.

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font-weight</h2>
   <p style = "font-weight: normal;">
      The font-weight is normal.
   </p>
   <p style = "font-weight: bold;">
      The font-weight is bold.
   </p>
   <p style = "font-weight: 500;">
      The font-weight is 500 (medium).
   </p>
</body>
</html>

CSS Fonts - With font-synthesis Property

The font-synthesis property determines whether or not the browser should synthesize the bold, italic, and / or small-caps typefaces that are missing in a font-family.

This property is a shorthand for following properties:

• font-synthesis-weight

• font-synthesis-style

• font-synthesis-small-caps

Possible values for this property are as follows:

• none: Signifies that no bold, italic or small-caps typeface to be synthesized.

• weight: Signifies that missing bold typeface may be synthesized by the browser.

• style: Signifies that missing italic typeface may be synthesized by the browser.

• small-caps: Signifies that missing small-caps typeface may be synthesized by the browser.

Many fonts include bold and italic variants, and few may have small-caps variant too, but fonts used for languages, such as, Chinese, Korean, Japanese, etc, do not have these variants and thus synthesizing them may make them illegible. So in these cases it is advisable to disable the default font-synthesis.

Listed table below shows the values passed to the shorthand property font-synthesis and the corresponding values to its longhand properties:

Here is an example:

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap">
<style>
   p {
      margin-bottom: 5px;
      border: 2px solid red;
   }
   .eng {
      font-family: "Montserrat", sans-serif;
   }
   .chi {
      font-family: "Ma Shan Zheng";
   }
   .no-syn {
      font-synthesis: none;
   }
   .syn {
      font-synthesis: style weight;
   }
</style>
</head>
<body>
   <h3>DEFAULT</h3>
   <p class="eng">
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class="chi"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class="eng no-syn">
      Do not support <strong>bold</strong> and <em>italic.</em>
   </p>
   <h3>DISABLED SYNTHESIS</h3>
   <p class="chi no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
   <h3> SYNTHESIS IS ENABLED </h3>
   <p class="eng syn">
      Supports <strong>bold</strong> and <em>italic</em>.
   </p>
   <p class="chi syn"><strong>加粗</strong>和<em>斜体</em> 支援的字體.</p>
</body>
</html>

CSS Fonts - With font-variant Property

The font-variant in CSS is a shorthand property and is used to specify whether the text should be rendered in small capitals. It can have the following values:

font-variant is a shorthand for following properties:

• font-variant-alternates

• font-variant-caps

• font-variant-east-asian

• font-variant-ligatures

• font-variant-numeric

• font-variant-position

Possible values of font-variant (as per CSS Level 2.1):<>

• normal: This is the default value, which specifies that the text should be rendered normally without any special variant.

• small-caps: This value specifies that the text should be rendered in small capitals. The font used must have a small-caps variant available, otherwise it will fall back to normal rendering.

• none: Sets the value font-variant-ligatures as none.

• <common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>

  • common-ligatures

  • no-common-ligatures

  • discretionary-ligatures

  • no-discretionary-ligatures

  • historical-ligatures

  • no-historical-ligatures

  • contextual-ligatures

  • no-contextual-ligatures

• Keywords and functions related to font-variant-ligatures longhand property:

  • stylistic()

  • styleset()

  • character-variant()

  • swash()

  • ornaments()

  • annotation()

  • historical-forms

• Keywords and functions related to font-variant-caps longhand property:

  • small-caps

  • all-small-caps

  • petite-caps

  • all-petite-caps

  • unicase

  • titling-caps

• <numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero: Specifies the keywords related to font-variant-numeric longhand property:

  • lining-nums

  • oldstyle-nums

  • proportional-nums

  • tabular-nums

  • diagonal-fractions

  • stacked-fractions

  • ordinal

  • slashed-zero

• <east-asian-variant-values>, <east-asian-width-values>, ruby: Specifies the keyword related to font-variant-east-asian longhand property:

  • jis78

  • jis83

  • jis90

  • jis04

  • simplified

  • traditional

  • full-width

  • proportional-width

  • ruby

• Specifies the keywords and functions related to font-variant-position longhand property:

  • sub

  • super

• Specifies the keywords and functions related to font-variant-emoji longhand property:

  • text

  • emoji

  • unicode

Here is an example:

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>Font-variant</h2>
   <p style = "font-variant: normal;">
      The text will be normal.
   </p>
   <p style = "font-variant: small-caps;">
      The text will be in small-caps.
   </p>
</body>
</html>

CSS Fonts - With font-variation-settings Property

The font-variation-settings property in CSS is used to specify the variation settings for variable fonts. Variable fonts are a type of font that can have adjustable attributes, such as weight, width, and slant, allowing for finer control over the font's appearance.

This property allows you to define the values for these font variations, using axis tags and numeric values.

Possible values for this property are as follows:

• normal: Text is rendered based on default settings.

• <string> <number>:

  • <string> represented as 4 ASCII characters.

  • In case <string> value is more or less than four characters, the value becomes invalid.

  • <number> represents the axis value to be set.

  • <number> can be negative or fractional, based on the value range of the font selected.

This property should only be used when the basic properties font-weight and font-style are not used. As the values passed with this property will always override the ones passed using basic font properties, such as font-weight, etc.

CSS Fonts - Variable font axes

Variable font axes are the customizable dimensions or attributes of a variable font. Some common axes include weight, width, and italic.

There are two types of variable font axes: custom and registered.

Following table shows the registerd axes and their CSS properties:

Note: You can typically find this information in the font's documentation or specifications provided by the font's creator. Once you have the axis information, you can define and control the font variations using the font-variation-settings property.

Note: Your operating system must be up to date, in order to use these variable fonts in web pages.

CSS Fonts - With font-variation-settings Property

Here is an example:

<html>
<head>
<style>
   .container1 * {
      font-weight: 625;
   }
   .container2 * {
      font-variation-settings: 'wght' 625;
   }
   .container3 * {
      font-variation-settings: 'wght' 200;
   }
</style>
</head>
<body>
   <div class="container container1">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container2">
      <p>Variation Setting - Weight</p>
   </div>
   <div class="container container3">
      <p>Variation Setting - Weight</p>
   </div>
</body>
</html>

CSS Line Height

The line-height property sets the height of the line box and sets the distance between the lines of text. It specifies the minimum height of line box within an element.

Possible values for this property are as follows:

• <number>: A unitless number, multiplied by the element's font-size. Most preferred way of setting line-height.

• <length>: Any length unit value, such as px, pt, etc. Values given in em units, may produce unexpected results.

• <percentage>: Relative to the element's font-size. May produce unexpected results.

• normal: Keyword 'normal' as value. Depends on the element's font-family and user's browser settings.

It is advisable to use a minimum value of 1.5 for line-height of a paragrapgh, as zooming in will relatively increase the value of line-height, making it easily readable.

CSS Font - With line-height Property

Here is an example:

<html>
<head>
<style>
   div{
      border: 1px solid red;
      margin: 5px;
      width: 300px;
   }
</style>
</head>
<body>
   <h2>Line Height of div</h2>
   <div style="line-height: normal;">Normal line height</div>
   <div style="line-height: 50%;">Percentage line height</div>
   <div style="line-height: 3em;">Length line height</div>
   <div style="line-height: 1.6;">Number line height</div>
</body>
</html>

CSS Fonts - Google Fonts

Apart from standard fonts available in HTML, you can avail the benefits of Google Fonts. Google provides freen and open source font families, which are more than 1000 in number.

In order to use the Google Fonts, you need to add the style sheet link in your <head> section and use the respective fonts in your CSS. Following is the syntax for the same:

Syntax to add Google Font

<head>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia">
<style>
   body {
      font-family: "Open Sans", sans-serif;
   }
</style>
</head>

Points to remember:

• Always list atleast one fallback font, in case the specified font is not supported by your browser.

• In case you wish to use multiple Google fonts, separate the font names with a pipe character (|).

• Google Fonts can also be styled using CSS properties, such as font-size, etc.

• Special effects can be added to the Google Fonts using the property font-effect-*, where * can be any effectname, such as fire, neon, shadow, etc.

Example showing how to add effect to Google Font:

<html>
<head>
   <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans|Sofia&effect=fire|neon|shadow-multiple"">
<style>
   body {
      font-family: "Open Sans", sans-serif;
      font-size: 25px;
   }
</style>
</head>
<body>
   <h1 class="font-effect-neon">Google Font</h1>
   <h1 class="font-effect-fire">Google Font</h1>
   <h1 class="font-effect-shadow-multiple">Google Font</h1>
</body>
</html>

CSS Fonts - Fallback Fonts

Fallback fonts are backup fonts that are used when a specific font is not available or cannot be displayed on a device or web browser.

Fallback fonts are selected based on their similarity in style or design to the desired font, ensuring that the text remains readable and maintains some semblance of its intended appearance.

Some of the examples for fallback fonts are as follows:

• Arial: Commonly used fallback font that resembles Helvetica.

• Times New Roman: Designed for easy readability and is commonly used in print and digital media.

• Verdana: Verdana is a sans-serif fallback font that is designed specifically for readability on screens.

• Georgia: This serif fallback font is commonly used for body text on the web.

• Courier New: Often used for monospaced text, Courier New is a fallback font commonly chosen when a fixed-width font is required.

CSS Fonts - Summary

Following is the list of CSS properties of styling fonts: