CSS font: size MCQs Quiz | Class 10

Welcome to your quiz on Class X, Subject: Computer Applications (Code 165), Unit: Unit 2: HTML. This quiz focuses on the Topic: CSS font: size MCQs, specifically covering important concepts related to Font size. Test your knowledge, then submit your answers to see your score and download a detailed PDF answer sheet.

Understanding CSS `font-size` Property

The CSS font-size property is fundamental for controlling the size of text within web documents. It allows designers and developers to ensure readability, hierarchy, and aesthetic appeal of typography across different devices and user preferences. Understanding its various units and how they behave is crucial for creating robust and responsive web designs.

Units for `font-size`

There are several types of units you can use with the font-size property, broadly categorized into absolute and relative units:

Absolute Units:

  • px (Pixels): An absolute unit that defines font size based on pixels on the screen. It is fixed and does not scale with the user’s browser settings or parent elements. While simple to use, it can sometimes lead to accessibility issues if users have different default font settings or need to scale text.
  • pt (Points): Historically used in print media, 1pt is equal to 1/72 of an inch. While still supported, it’s generally not recommended for web use as it doesn’t adapt well to different screen resolutions.

Relative Units:

Relative units are generally preferred for web design because they provide more flexibility and responsiveness:

  • em: Relative to the font-size of the parent element. For example, if a parent element has font-size: 16px;, then 1em for its child will be 16px, and 1.5em will be 24px. This unit is useful for scaling text proportionally within a component.
  • rem (Root em): Relative to the font-size of the root HTML element (<html>). If the root font size is 16px, then 1rem will always be 16px, regardless of parent elements. This makes it easier to manage typography consistently across a large website and for global scaling.
  • % (Percentage): Relative to the parent element’s font-size. Similar to em, but expressed as a percentage. For example, 150% is equivalent to 1.5em.
  • Viewport Units (vw, vh, vmin, vmax):
    • vw (Viewport Width): 1vw is 1% of the viewport’s width.
    • vh (Viewport Height): 1vh is 1% of the viewport’s height.
    These units are excellent for creating typography that scales directly with the browser window size, making it highly responsive. For example, font-size: 2vw; means the font will be 2% of the browser window’s width.

Keywords:

CSS also provides several keywords for font-size:

  • Absolute Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These are predefined sizes that correspond to typical browser defaults.
  • Relative Keywords: smaller, larger. These scale the font size relative to the parent element’s font size by a factor specified by the user agent (browser).

Inheritance of `font-size`

The font-size property is inherited. This means if you set font-size on a parent element, child elements will inherit that size unless explicitly overridden. This is a key concept when using em and % units, as their computed value depends on the inherited size.

Best Practices for Responsive Font Sizes

For modern, responsive web design, a common practice is to set a base font-size on the <html> element using px (e.g., 16px) or a percentage (e.g., 100%, which defaults to 16px), and then use rem units for all other typography. This allows for easy scaling of the entire text hierarchy by just changing the root font size. Combining rem with media queries or CSS clamp() function for fluid typography (e.g., font-size: clamp(1rem, 2vw + 1rem, 2.5rem);) offers even more control.

Quick Revision Points

  • font-size controls text size.
  • px is an absolute unit, fixed to screen pixels.
  • em is relative to the parent’s font size.
  • rem is relative to the root (<html>) font size, best for global scaling.
  • % is similar to em, relative to parent.
  • vw (viewport width) makes text scale with browser window width.
  • Keywords like medium, smaller provide predefined or relative adjustments.
  • font-size is an inherited property.
  • Use rem for consistent, scalable typography and responsive design.

Practice Questions

  1. What is the primary advantage of using rem units over px for font sizing in responsive design?
  2. Explain how em units can lead to compounding font sizes in nested elements.
  3. If the HTML root element has font-size: 20px;, what would be the computed font size for an element with font-size: 1.2rem;?
  4. When would you typically use vw for font sizing?
  5. What is the default font-size value for most browsers, and what is its unit?

Author

  • CBSE Quiz Editorial Team

    Content created and reviewed by the CBSE Quiz Editorial Team based on the latest NCERT textbooks and CBSE syllabus. Our goal is to help students practice concepts clearly, confidently, and exam-ready through well-structured MCQs and revision content.