CSS font-size Property: The Font Size Property

The CSS font-size property specifies the size of the font for HTML elements. It plays a crucial role in web design and web development, impacting how readable and visually balanced your layout appears.

How to Use font-size in CSS

The font-size property specifies the size of the font in CSS and works with any text-based HTML element. You can use it in any CSS selector, whether styling a <p>, <h1>, or a custom class inside a div.

p { font-size: 16px; }
h1 { font-size: 32px; }

<p>This is a paragraph with a font size of 16 pixels.</p>
<h1>This is a heading with a font size of 32 pixels.</h1>

This syntax sets a clear and predictable appearance, especially when defining a default font size for your site. If no font-size is set, the default value usually comes from the browser's stylesheet.

When to Use font-size in CSS

Improving Readability

You can adjust the font-size property to enhance readability, especially for lengthy articles or instructions.

.article-text { font-size: 18px; }

Adjusting font size is particularly useful when working with JavaScript-driven content that gets inserted dynamically, ensuring users can still read comfortably.

Responsive Design

Using relative units like ems or percentages, you can adjust text sizes based on parent elements or global settings. Doing so helps you create responsive designs on your web pages.

.responsive-text { font-size: 1.2em; }

You might also combine font-sizing with properties like box-sizing or text-align for more refined control.

Highlighting Sections

You can use larger font sizes to highlight headings or important blocks of text, helping them stand out on the page.

.highlight { font-size: 24px; font-weight: bold; }

When combined with opacity effects, you can draw or soften attention to certain text blocks.

Examples of font-size using CSS

Basic Paragraph Styling

Setting a comfortable font size for paragraphs ensures good readability across different devices. By using a suitable line height, the text remains legible even in long articles or instructions.

p {
    font-size: 16px;
    line-height: 1.6; /* Improves readability and spacing */
}

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere, mauris vel interdum scelerisque, libero justo fermentum risus, a posuere turpis sapien ac nisi.
</p>

Adaptive Text for Devices

Using viewport units allows the text size to dynamically adjust based on the screen size. For instance, a title can scale up or down on smaller or larger screens using viewport units. A media query fixes the font size once the screen width exceeds a certain size.

.title { font-size: 4.5vw; }

@media (min-width: 600px) {
    .title { font-size: 32px; } /* Fix size on larger screens */
}

<h1 class="title">Responsive Title Based on Screen Size</h1>

Emphasis in Text

Applying larger sizes to specific words or phrases creates emphasis or attraction. By combining font size with color or font weight, you can further highlight important information within the text.

em {
    font-size: 1.25em;
    color: red;
    font-weight: bold;
}

<p>
    Regular text with <em>emphasized text</em> highlighted to draw attention.
</p>

Highlighting Headings

Using a significantly larger font size helps headings stand out and visually organize the content. This is particularly useful for blog articles, documentation, and other structured text.

h1 {
    font-size: 48px;
    font-weight: bold;
    color: #333;
}

h2 {
    font-size: 36px;
    font-weight: normal;
    color: #666;
}

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>
    Supporting paragraph under the subheading that describes relevant content.
</p>

Learn More About font-size in HTML and CSS

Different Units for font-size

Understanding different units for setting font-size is important for effective typography. Absolute units like pixels (px) are the same across devices and screen sizes. Relative units like ems (em), percentages (%), and viewport units (vw, vh) can adapt to different situations.

• Pixels (px): Pixels are absolute units that provide precision and don't change with browser settings or other contextual factors. They are ideal for exact font sizing, such as in UI elements or icons. However, they don't scale with screens, potentially impacting accessibility.

  Copy Code

  p { font-size: 16px; }
  

• Ems (em): Ems are relative units based on the font size of the parent element. If a parent element has a font size of 20px, 1em equals 20px for child elements. The em unit is ideal for creating scalable layouts but can lead to compounding effects in some cases.

  Copy Code

  h1 { font-size: 2em; } /* Twice the parent font size */
  p { font-size: 1.5em; } /* 1.5 times the parent font size */
  

• Rems (rem): Rems (root em) are relative units based on the font size of the root element (<html>) of a web page. Unlike em, the rem unit are consistent across the entire page, making them predictable and easier to control. For example, if the root font size is 16px, 2rem is equivalent to a font size of 32px.

  Copy Code

  body { font-size: 16px; }
  
  h2 { font-size: 2rem; } /* Twice the root font size (32px) */
  p { font-size: 1rem; } /* Same as the root font size (16px) */
  

• Percentages (%): Percentages are also relative to the parent element’s font size. They are helpful for scalable designs and inherit styles but require careful parent sizing.

  Copy Code

  body { font-size: 100%; } /* Base size: 16px */
  h1 { font-size: 150%; } /* 1.5 times the parent size (24px) */
  

• Viewport Units (vw, vh): Viewport width (vw) and viewport height (vh) are units relative to the viewport size. They make font sizes responsive to screen size, enabling automatic scaling. For example, 1vw equals 1% of the viewport's width and 1vh equals 1% of the viewport's height.

  Copy Code

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

• Absolute-Size Keywords: CSS provides absolute-size keywords that map directly to specific font sizes. Absolute-size keywords range from xx-small to xxx-large, with medium as the default size.

  Copy Code

  p { font-size: medium; }
  small { font-size: small; }
  h1 { font-size: x-large; }
  

• Relative-Size Keywords: Two special relative keywords, larger and smaller, adjust the font size relative to the parent element.

  Copy Code

  h1 { font-size: larger; } /* Larger than the parent font size */
  small { font-size: smaller; } /* Smaller than the parent font size */
  

Inheritance of font-size

HTML elements inherit the font-size property from their parent elements unless you explicitly set a font size. You can leverage this behavior to set a base size on a parent element and adjust child elements relatively.

body { font-size: 16px; }

h1 { font-size: 2.5em; } /* 40px if body font-size is 16px */
h2 { font-size: 2em; } /* 32px if body font-size is 16px */
p { font-size: 1em; } /* 16px if body font-size is 16px */