Resources
helping you along the way
Knowledge is the foundation of all wisdom...
Resources >> Web workshops >> CSS Fonts Explained
CSS Fonts Explained
CSS is very handy when it comes to specifying the size of
your text. You can specify it in a number of formats depending on the application
you want it for. On the surface font sizing seems quite simple but it is
actually quite a complicated topic.
One of the first things to remember is that ultimately the size of the
text should be left up to the visitor to decide as we all have different eyesight
requirements. Most modern browsers will allow you to change the size of the text
from the main menu. In IE this would be from the View menu and then select Text
and the options are as follows:
Largest
Larger
Medium
Smaller
Smallest
These sizes are sizes that the visitor can use irrespective of the size that
you have set in your mark up. Well that's the way it should be but unfortunately
if you specify your size in pixels, IE will not allow the above user menu to
work and the text will remain exactly the same size. (Mozilla and other browsers
however will size the text as required.)
Here is the list of available font units:
pixels
points
in
cm
mm
Picas
ems
exs
%
and a list of available keywords:
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
We shouldn't use Points either unless the output is to the printer. Points are a fixed size that will not scale and are ideal for printed output. The same goes for in cm and mm as these are sizes that won't scale but are ideal for printing or for fixed size content.
Therefore we are left with % (percentage) and ems. Percentages as explained by the W3C are as follows:
"A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets."
An em is the equivalent to the letter M in the parentfont-size and ex 's are equivalent to the small letter x of the default font size. Both of these can be used to set size that is relative to the standard. Em and Ex sizes are based on a size defined with the CSS body style.
For instance, you'll see in the style sheet for this page body { font-size: small}. That means that 1 em is equal to the size "small."
So if a normal size is 1 em or 100% we can set text that is twice the size by specifying 2em or 200%. In this way the size will be relevant to the screen size and font size that is used and therefore should be consistent among compliant browsers.
More resources which should help clarify things:
http://diveintoaccessibility.org/da...font_sizes.html
http://www.thenoodleincident.com/tu...font/index.html
http://www.bigbaer.com/css_tutorials/css_font_size.htm
