Home » Frontend » How to size text with CSS

How to size text with CSS

Reading Time: 2 minutes

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.

Varun Bhagat is a technology geek and works in PixelCrayons as a Sr. Technology Consultant. He possesses in-depth knowledge of different web development technology and helps our clients to choose the best technology as per their needs.

Are you ready to turn your idea into reality? Contact Us Now

More from PixelCrayons Blog:-

Reset style sheet: An Opine

Reset style sheet: An Opine

Preferences of using CSS reset style sheets differ with different people. Many individuals find the approach ineffective while others are convinced with the features […] - Read More

When Code Doesn’t Meet Standards

When Code Doesn’t Meet Standards

Ever since the World Wide Web Consortium, popularly known as W3C came into being, there has been a tide of agreements and disagreements. It lays down standards for […] - Read More

How to write Better CSS Code

How to write Better CSS Code

Before coming to the main point, it would be better to have some brief description regarding CSS so that it will be better to learn how to write better CSS code. Well […] - Read More

3 Tips to Decide Your PSD Slicer

3 Tips to Decide Your PSD Slicer

Who doesn’t want to keep his hands full of projects and few more projects on hold? Emails coming in, people calling continuously, asking you for website design. With […] - Read More

  • AJ

    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….

  • bharadwaj

    tell us what we dont know… please