subject: Absolute and Relative font sizing control | Advantages & Disadvantages of font size in relation to browsers | CSS web design [print this page] Absolute and Relative font sizing control | Advantages & Disadvantages of font size in relation to browsers | CSS web design
Absolute Font Sizing:
(Example: is in pixels or points)
p (font-size: 12pt) OR h1 (font-size: 40px) OR h4 (font-size: 1pc)
One of the advantages of specifying absolute font-size is that a web designer knows how browsers (all the main ones) will display pages.
Points and picas (pt/pc) are best used for printing (points & picas are media units).
Pixels give you an exact measurement for display so is handy (precision) for calculations on layouts.
I believe Font-Size plays a small role in SEO. Reason based around h1 tags, bold (strongtext), user readability and Font-Size relationship to those factors.
Disadvantages of absolute sizing are that Internet Explorer as well as other browsers cannot scale (resize) type set in absolute units.
When a user changes font size from view menu within browsers the size of exact words varies, resulting in a huge accessibility problem because the browser ignores user preferences.
Most CSS supporting browsers get them wrong. Choosing pixels gives no real value for printing your document; size is left up to the device.
If you use pt (picas) units a page will render inconsistently across platforms. This is also a disadvantage of this method.
Relative Sizing:
(Example: is in percentages or ems)
li (font-size: 90%) OR h2 (font-size:1.875em) OR body (font-size:100%)
Ems and percentages are considered the best overall. Text can be resized by all browsers if size is set using ems. This advantage offers better accessibility for visually impaired users (also users with high resolution monitors) as they can have control through the browser (view menu/text size) to re-size font.
Another advantage is that when using CSS, a designer (example) has the option of changing or setting font-size in the body {font-family: arial; font-size: 1em;}, letting the user control the text size proportionally.
Overall the advantage of using Relative is that all text scales proportionally.
Text size remains relative and is adaptable to user preferences when setting browser size (from the view menu). It helps internet users to do less scrolling and keeps the font looking good.
Disadvantages include some of the dangers associated with using Relative method which are: font sizing is inherited so nested items become vulnerable if care is not taken in initial coding (specificity). Be careful, descendant elements inherit baseline size and the effect is compounded. Nested elements can cause problems if not careful as font may change to very small size because of inheritance.
Another problem that may arise is when users set (View Menu in browsers) size too high as they may "break" a CSS page coded with "floating-columns" resulting in unusual display. I have actually noticed this myself on several occasions (surfing) but did not understand why. It's becoming clearer now.
Ex units (similar to ems) are not recommended for browser use as this unit is not supported.
Important also when using CSS is Specificity which determines the hierarchy sequence of CSS markup code. Explanation &
