How to size text with CSS


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.

 

Advertisements

One thought on “How to size text with CSS”

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s