CSS Font Property

Akshima Sharma's photo
Akshima Sharma
·

6 min read

Table of contents

In CSS, fonts are controlled using a variety of properties that allow you to specify font family, size, weight, style, and more. Here are some common CSS properties related to fonts:

1. Font Family

The font-family property specifies the font for an element. You can list multiple font names as a fallback system.

body {
    font-family: "Arial", "Helvetica", sans-serif;
}

Here, if the browser does not support “Arial”, it will try “Helvetica”, and if that’s not available, it will use a generic sans-serif font.

2. Font Size

The font-size property sets the size of the font. You can use different units like pixels (px), em, rem, percentages (%), etc.

p {
    font-size: 16px;
}

h1 {
    font-size: 2em; /* 2 times the size of the parent element's font size */
}

body {
    font-size: 100%; /* Typically the same as 16px */
}

Units for Font Size

Pixels (px)

  • A fixed unit where 1px equals one device pixel on the screen.

  • It does not scale with the size of the viewport or user settings.

p {
    font-size: 16px;
}

Ems (em)

  • A relative unit that is based on the font size of the parent element.

  • 1em is equal to the current font size, so 2em would be twice the current font size.

body {
    font-size: 16px;
}
p {
    font-size: 1.5em; /* 1.5 times the body font size, which equals 24px */
}

Rems (rem)

  • Similar to em, but relative to the root element (typically the <html> element).

  • Useful for maintaining consistency across different elements regardless of their nesting level.

html {
    font-size: 16px;
}
p {
    font-size: 1.5rem; /* 1.5 times the root font size, which equals 24px */
}

Percentages (%)

  • Another relative unit where the size is calculated as a percentage of the parent element’s font size.
body {
    font-size: 16px;
}
p {
    font-size: 150%; /* 150% of the body font size, which equals 24px */
}

Viewport Units (vw, vh)

  • Relative to the size of the viewport.

  • 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height.

p {
    font-size: 2vw; /* 2% of the viewport width */
}

Absolute-size Keywords

  • Keywords such as xx-small, x-small, small, medium, large, x-large, and xx-large that correspond to specific font sizes.
p {
    font-size: large; /* A predefined font size that is larger than the default */
}

Relative-size Keywords

  • Keywords like larger or smaller that adjust the font size relative to the parent element's font size.
body {
    font-size: 16px;
}
p {
    font-size: larger; /* Increases the font size relative to the body font size */
}

3. Font Weight

The font-weight property specifies the weight (or boldness) of the font.

Keywords

The keywords for font-weight are:

  • normal (default value, equivalent to 400)

  • bold (equivalent to 700)

  • bolder

  • lighter

Numeric Values

Numeric values range from 100 to 900, where 400 is considered normal and 700 is considered bold. The available weights are typically in increments of 100.

strong {
    font-weight: bold; /* Keywords: normal, bold */
}

h1 {
    font-weight: 700; /* Numeric values range from 100 to 900 */
}

4. Font Style

The font-style property sets the style of the font (normal, italic, or oblique).

Values

The font-style property can take the following values:

  1. normal: The default font style. The text is displayed in a standard, upright font.

  2. italic: The text is displayed in an italic font. If an italic version of the font is not available, the browser will simulate an italic version.

  3. oblique: The text is displayed in an oblique font. This is similar to italic, but while italic fonts are specifically designed to be slanted, oblique fonts are typically slanted versions of the normal font.

em {
    font-style: italic;
}

5. Font Variant

The font-variant property controls the usage of alternate glyphs, such as small-caps.

h2 {
    font-variant: small-caps;
}

6. Font Stretch

The font-stretch property allows you to make text narrower or wider.

p {
    font-stretch: expanded; /* Other values: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, extra-expanded, ultra-expanded */
}

7. Line Height

The line-height property sets the amount of space between lines of text.

p {
    line-height: 1.5; /* Can be a number, a length, or a percentage */
}

8. Text Transform

The text-transform property controls the capitalization of text.

h3 {
    text-transform: uppercase; /* Other values: none, capitalize, lowercase, full-width */
}

9. Letter Spacing

The letter-spacing property sets the space between characters.

p {
    letter-spacing: 0.1em; /* Can be specified in units like px, em */
}

10. Word Spacing

The word-spacing property sets the space between words.

p {
    word-spacing: 0.2em; /* Can be specified in units like px, em */
}

11. Text Decoration

The text-decoration property adds decoration to text (like underline, overline, line-through).

a {
    text-decoration: underline; /* Other values: none, overline, line-through */
}

12. Text Shadow

The text-shadow property adds shadow to text.

h1 {
    text-shadow: 2px 2px 4px #000000; /* offset-x, offset-y, blur-radius, color */
}

13. Font Shorthand Property

The font shorthand property sets all the font properties in one declaration.

p {
    font: italic small-caps bold 16px/30px "Times New Roman", serif;
}

Order of values in font shorthand:

  1. font-style

  2. font-variant

  3. font-weight

  4. font-size/line-height

  5. font-family

14. Font Feature Settings

The font-feature-settings property controls advanced typographic features in OpenType fonts.

p {
    font-feature-settings: "liga" 1, "dlig" 1; /* Enables discretionary ligatures */
}

15. Font Variant Alternates

The font-variant-alternates property controls the usage of alternate glyphs in an OpenType font.

 {
    font-variant-alternates: historical-forms; /* Keywords: normal, historical-forms, stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation() */
}

16. Font Variant East Asian

The font-variant-east-asian property controls the usage of alternate glyphs for East Asian languages.

p {
    font-variant-east-asian: ruby; /* Keywords: normal, ruby, jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width */
}

17. Font Kerning

The font-kerning property controls the usage of kerning information stored in the font.

p {
    font-kerning: auto; /* Keywords: auto, normal, none */
}

18. Font Variant Ligatures

The font-variant-ligatures property controls which ligatures are used.

p {
    font-variant-ligatures: common-ligatures discretionary-ligatures; /* Keywords: normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures */
}

19. Font Variant Numeric

The font-variant-numeric property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

p {
    font-variant-numeric: lining-nums; /* Keywords: normal, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions */
}

20. Font Variant Position

The font-variant-position property controls the usage of alternate glyphs for superscript and subscript.

p {
    font-variant-position: sub; /* Keywords: normal, sub, super */
}

21. Web Fonts Using @font-face

To use custom web fonts, you can include them using the @font-face rule.

@font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff2') format('woff2'),
         url('MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

22. Using Google Fonts

To use fonts from Google Fonts, include them in your HTML and then use them in your CSS.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
    font-family: 'Roboto', sans-serif;
}
HTML5CSSCSS3HTMLWeb DevelopmentWeb Design