CSS Tutorial

CSS Font Size

The CSS font-size property controls the size of the text within an element. It plays a significant role in readability and the overall aesthetic of a webpage. Properly chosen font sizes ensure that the content is easy to read across various devices and screen sizes.

Key Points on CSS Font Size:

font-size can be defined using absolute values (e.g., px, em, rem, vw) or relative values (e.g., %).
px (pixels) is an absolute unit and is commonly used for precise font size control.
em and rem are relative units. em is relative to the parent element’s font size, while rem is relative to the root (html) element's font size.
% allows for font sizes to be specified as a percentage of the parent element’s font size.
vw (viewport width) allows the font size to be responsive based on the width of the viewport.
Font size can be adjusted for different screen sizes using media queries for a more responsive design.
Use line-height to control the space between lines of text for better readability.
The font-size-adjust property allows you to fine-tune font size scaling for different font families.

Syntax for CSS Font Size:

Syntax Example

/* Font size syntax */
        .element {
            font-size: value;
                 }
        
        /* Example */
        p {
            font-size: 16px;
          }

Examples of CSS Font Size:

The following examples demonstrate how to use font-size in various units:

Code Example: Font Size in Pixels


            p {
            font-size: 18px;
        }

Output

This paragraph has a font size of 18px.

Code Example: Font Size in Em


             p {
             font-size: 2em;
               }

Output

This paragraph has a font size of 2em, which is relative to its parent element’s font size.

Code Example: Font Size in Rem


             p {
             font-size: 1.5rem;
               }

Output

This paragraph has a font size of 1.5rem, which is relative to the root element’s font size.

Code Example: Font Size in Percentage


             p {
             font-size: 120%;
               }

Output

This paragraph has a font size of 120%, which is relative to the parent element’s font size.

Code Example: Font Size in Viewport Width (vw)


             p {
             font-size: 5vw;
               }

Output

This paragraph has a font size of 5vw, which is relative to the viewport width.

Common Font Size Properties:

font-size: Specifies the size of the text in various units (e.g., px, em, rem, %, vw). Use px for fixed sizes and em or rem for scalable typography.
font-size-adjust: Adjusts the font size in relation to the chosen font-family to maintain a consistent appearance across different fonts.
line-height: Controls the vertical spacing between lines of text, ensuring legibility when using large font sizes.
letter-spacing: Adjusts the spacing between characters, especially helpful for large font sizes or headlines.

Selecting the right font size is crucial for readability. Ensure that your font sizes are scalable for responsive design, and provide an accessible experience by using relative units like em or rem instead of fixed units like px.