Table of Contents

Subscribe to our blog

Want to Outshine Competitors?

Sizing the font according to the demand is an art of its own. Size of the font seems trivial with respect to the other factors on the webpage. However, it is quite significant in deciding the impact of the words. People use absolute and relative font sizing with CSS, pertaining to their need. There are several options to choose while using CSS to define font properties.
• Relative Font Size Units
• em

Keeping the initial measure as the alphabet ‘m’, this is the default font size already available in the user preferences.
• ex

In this, the parent element is the letter ‘x’, and the x-height of a font or the size of the lowercase.
• pixels

The relative font size unit, pixel is determined in relation to the viewing device resolution.
• percentage

It specifies the value in proportion to the parent element.
• Absolute Font Size Units

In absolute font sizing, the units are used in the measure of centimeters, inches, millimeters, points etc.

’em’ and percentage units are primarily influenced by the CSS cascade and based upon the parent element. While the font size keywords are based on the browser default font size. Relative font sizing approach is popular as it allows font scalability or flexibility among the users. CSS font keywords are easy to use than percentages as the cross browser compatibility is higher. This practice is user-friendly than absolute font sizing as it provides greater flexibility for the visitors.
There are different ways to size the font.

• Initiating a font base with CSS
• Adding CSS relative font sizing to the footer
• Designating heading font sizes with CSS relative font sizing
• Deciding a contrasting font family and color for impact
• Keeping into view CSS and typography

Apart from local testing, the markup and CSS have been thoroughly tested. Also the markup and CSS are based on the guidelines of W3C. Hence, CSS relative font sizing is always helpful in web development work.

2 thoughts on “How to size text with CSS

  1. The information given is good for those who are in the learning process.

    @ Bahrdwaj….there are others as well who may not know this such as beginners….

Leave a Reply

Your email address will not be published. Required fields are marked *