Set the Font Size
By Stephen Bucaro
Use the font-size property to set the text size. Units of measurement for
the font-size value can be Absolute or Relative. Absolute units
are related to printing. Don't rely on absolute units for screen display of webpages
because their actual size depends upon the users screen size and resolution setting.
The example below shows the font-size property used with the points (pt)
unit of measurement. In printing there are 72 points to the inch.
<p style="font-size:12pt;">Font size 12 points</p>
Font size 12 points
The example below shows the font-size property used with the pixels (px)
unit of measurement. Although pixels is an absolute unit of measurement, I feel it
is the best unit of measure for webpages because webpage elements like images have
dimensions in pixels.
<p style="font-size:12px;">Font size 12 pixels</p>
Font size 12 pixels
Relative units can be used to set the font size relative to the font size of an element's
parent element. To use relative units, you might set the font size of the BODY element,
and then set other webpage font sizes relative to that font size. If you don't set a
font size for the BODY element, you will be setting the font size relative to the browsers
default font size. Modern browsers have a default font size of 16 pixels.
The example below sets the font size as a percentage of the font size of an element's parent element.
<p style="font-size:80%;">Font size 80% of parent elements font size</p>
Font size 80% of parent elements font size
Another relative unit of size for fonts is the em. An em is the width of a
capital M in the elements parent element.
On older webpages you may see the use of the <font> html tag. The font size was
set using , for example, <font size="4"> and a default font size for the webpage
was set using, for example, <basefont size="4">. The problem with the <font>
tag was that it allowed only values ranging from 1 to 7, as defined by the browser. The
reason I'm writing in past tense is because the <font> tag was deprecated in HTML
4.0 in favor of style sheets.
More CSS Quick Reference:
• CSS Units of Measurement
• Use an Embedded Style Sheet
• Use an External Style Sheet
• position:relative
• Context selectors
• Use word-wrap Property to allow Line Breaks in the Middle of Words
• Set a Background Image's Position
• Use Image for List Item Bullets
• Set the Text Color
• Set The Cursor Style
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
