Web Designers usually like to specify page font sizes in pixels because this corresponds easily with the mock ups they prepare in Adobe Photoshop or Adobe Fireworks. But as a font size for the web, pixels have one big disadvantage - they cannot be resized in Internet Explorer.
As monitor resolutions increase, it’s not only the visually impaired who may want to increase the font size in your design, so what can you do to improve the accessibility of your sites?
At QBS PC Help we like to use percentages and ems for our designs.
Ems and Percentages are considered the "best" units for sizing fonts and layouts in CSS. They are re-sizeable in all Web browsers that support resizing and they are specified relative to the user's font size preferences, and can therefore adapt to the viewer's screen.
If you’re unfamiliar with ems units, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet (medium text), an em is roughly equivalent to 16 pixels.
As the default size for 'medium text' in all modern browsers is 16px many web designers begin by setting the html,body size to 62.5%.
html,body {font-size: 62.5%}
They do this, because this percentage setting makes one em equal to ten pixels (16px x 62.5% = 10 px). So you can now equate pixel sizes to ems directly. For example, if you want to set a font size of 12 pixels you should use 1.2em (12/10) ; a type set as 16 pixels becomes 1.6em (16/10); 9 pixels becomes 0.9 em (9/10) and so on.
Using this method suits both the designer who is used to working in pixels and the site users who can resize the text in most of the modern browsers available today.
Forms, tables, lists, widths, height, margins and padding can also be styled using ems.
Although the above works for most browsers there are a few problems with the Opera browser. At 75% and lower Opera goes to a nice small size (just readable), but Firefox (Mozilla) and Internet Explorer change hardly at all.
Experience has taught us that 76% is as small as you can go and stay the same across all the modern browsers. To solve this the html,body font size needs to be set at 76%.
This of course messes up the maths a bit as the default browser font size of 16px now equates to a point size of 12.16 (16px x 76% = 12.16).
For example, if you want to set a font size of 14 pixels you should use 1.15em (14/12.16) ; a type set as 16 pixels becomes 1.31em (16/12.16); 9 pixels becomes 0.74 em (9/12.16) and so on. Its best to round to two decimal places when calculating these figures.
A good range of text sizes for this 76% html,body size are:
html,body { font-size: 76%; }
h1 { font-size: 2.2em; /*roughly equal to 26 pixels*/
h2 { font-size: 1.8em; /*roughly equal to 21 pixels*/
h3 { font-size: 1.4em; /*roughly equal to 17 pixels*/
h4 { font-size: 1.21em; /*roughly equal to 14 pixels*/
h5 { font-size: 1.1em; /*roughly equal to 13 pixels*/
h6 { font-size: 0.9em; /*roughly equal to 10 pixels*/
p { font-size: 1.1em; /*roughly equal to 13 pixels*/
A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for Internet Explorer.
INPUT, SELECT, TH, TD { font-size:1.6em /*roughly equal to 19 pixels*/ }
If you are laying out your document using CSS (which you should be if you want your site to be truly accessible) you will have a few div's set up to group together related elements which can each have separate text sizes.
Here you can see a working, but very basic, two column layout with header and footer, using percentage and ems rather than pixels. This is fully XHTML and CSS compliant.
Feel free to use the template for your own project. Get the the CSS here.
If you prefer to use ems only, with no percentage setting, this can be achieved but you will need a couple of extra body rules to stop Microsoft's Internet Explorer form messing up your design.
body { font-size: 0.75em; }
html { font-size: 100%; /* IE hack */ }
table { font-size: 100%; /* IE hack */ }
This same IE issue occurs with Selects and Inputs as well. This can also be solved by adding a font-size: 100%; /* IE hack */ to them in the CSS.
Read more articles about PC repairs, Web design & SEO...