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
Keeping the initial measure as the alphabet ‘m’, this is the default font size already available in the user preferences.
In this, the parent element is the letter ‘x’, and the x-height of a font or the size of the lowercase.
The relative font size unit, pixel is determined in relation to the viewing device resolution.
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.
- CSS External Demonstration Project (mrhennings.typepad.com)
- Dynamic Page Height (daniweb.com)
- CSS Font size (brandonunderwood11.wordpress.com)
- How to use the Font panel in OS X (reviews.cnet.com)
- CSS Font-Size: em vs. px vs. pt vs. percent (iamramondiaz.wordpress.com)
- em and rem (torichao.wordpress.com)
- CSS Font-Size: em vs. px vs. pt vs. percent (roach592.wordpress.com)
- How to increase the font size in iOS (reviews.cnet.com)
- Weekly Readings – Week 7… (nbsimmons.wordpress.com)
- Enable experimental support for sub-pixel font scaling (chromiumcodereview.appspot.com)