Tutorials


CSS font-size property


The font-size Property in CSS

The font-size property in CSS is used to set the size of the font for text within an element. It determines how large or small the text appears and can be specified using various units or predefined values. The font-size property is crucial for typography, readability, and overall design of a webpage.

Values of font-size

  1. Absolute Length Units

    • px (Pixels): A fixed-size unit that sets the font size in pixels. It's a commonly used unit for precise control over text size.
      .font-px {
  font-size: 16px;
}
    • pt (Points): A traditional print measurement unit where 1 point is approximately 1/72 of an inch.
      .font-pt {
  font-size: 12pt;
}
    • cm (Centimeters), mm (Millimeters), in (Inches): Physical units that are less common for screen display but used for print styles.
      .font-cm {
  font-size: 1cm;
}

  2. Relative Length Units

    • em: A relative unit that is based on the font size of the parent element. For example, 1em equals the font size of the parent.
      .font-em {
  font-size: 2em; /* 2 times the font size of the parent element */
}
    • rem (Root em): A relative unit that is based on the font size of the root element (<html>). Useful for maintaining consistent sizing throughout a site.
      .font-rem {
  font-size: 1.5rem; /* 1.5 times the font size of the root element */
}

  3. Percentage

    • %: A relative unit where the size is based on the parent element's font size. For example, 100% is equal to the parent’s font size.
      .font-percent {
  font-size: 120%; /* 120% of the parent element’s font size */
}

  4. Keywords

    • xx-small, x-small, small, medium, large, x-large, xx-large: Predefined keywords that correspond to different sizes, often used for quick styling.
      .font-keyword {
  font-size: large; /* A predefined size larger than the default size */
}

  5. Viewport Units

    • vw (Viewport Width): Font size relative to the width of the viewport. 1vw is 1% of the viewport width.
      .font-vw {
  font-size: 5vw; /* 5% of the viewport width */
}
    • vh (Viewport Height): Font size relative to the height of the viewport. 1vh is 1% of the viewport height.
      .font-vh {
  font-size: 5vh; /* 5% of the viewport height */
}

Examples

  1. Fixed Size Font

    .fixed-size {
  font-size: 18px; /* Fixed size in pixels */
}

  2. Relative Font Size

    .relative-size {
  font-size: 1.2em; /* 1.2 times the size of the parent element's font */
}

  3. Percentage Font Size

    .percent-size {
  font-size: 150%; /* 150% of the parent element’s font size */
}

  4. Keyword Font Size

    .keyword-size {
  font-size: x-large; /* A larger predefined size */
}

  5. Viewport Units Font Size

    .viewport-size {
  font-size: 4vw; /* Font size relative to the viewport width */
}

Explanation

  • Fixed Size: px and pt provide precise control but may not be responsive.
  • Relative Size: em and rem allow for scalable and responsive text sizes, making it easier to adjust sizes relative to parent or root elements.
  • Percentage: Offers a way to set sizes relative to the parent element’s size.
  • Keywords: Provide a quick way to apply predefined sizes without specific measurements.
  • Viewport Units: Allow for font sizes that scale with the viewport dimensions, useful for responsive designs.

Use Cases

  • Readability: Ensure text is legible across different devices by using appropriate units and sizes.
  • Responsive Design: Use relative units and viewport units to create designs that adapt to various screen sizes.
  • Hierarchy and Emphasis: Control text size to establish visual hierarchy and emphasis within a webpage.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about