|
Home | Contact Us | Client Testimonials |
Portfolio
|
 |
Using relative font sizes in web pages
The two most common ways of setting font sizes with CSS
are using points (pt) or pixels (px), but you can use
also relative font sizes, either using ems (being an em
the height of the element's font) or the predefined size
keywords (xx-small, x-small, small, medium, large,
x-large and xx-large). This has the advantage of
allowing Internet Explorer users enlarge or shrink the
font size of the page through the IE font size menus
(other browsers allow font resizing also for points and
pixels).
Despite the fact of being of "relative size", the fonts
should look identical in any standards compliant browser
(IE6, Firefox, Opera, Safari...) and also in IE 5.x
(taking advantage of the CSS parsing bug described in
the box model hack). See the CSS code of this page for
details.
Anyway, you could find some problems with the way the
browsers round some font size's written in em's. It
seems that IE rounds up some values that other browsers
rounds down. In the following example you will see that
the second paragraph look identical as the third one in
IE, but it will look like the first one in Firefox,
Opera 7/8 and Safari 1.x:
1) Sample <p> with the style: font-size: 1.2em
2) Sample <p> with the style: font-size: 1.25em
3) Sample <p> with the style: font-size: 1.3em
Note: Firefox font rendering may vary in other O.S. like
Linux.
Of course the solution is changing the font size a bit a
until all browsers round it in the same way: in the
previous example we should use either 1.2em or 1.3em
(depending on the font size you prefer), which look the
same in all browsers.
|
| |
Web design South Africa, Web Design Johannesburg, web design Sandton - African web design company
Web design South Africa web design company, web re-design professional web design and hosting including free web design consultation and web search engine optimisation.
|
|