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 webpages because their actual size depends upon the users screen size.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact Advertise on Bucaro TecHelp Advertise Here RSS News Feeds News Feeds

HTML5 Solutions: Essential Techniques for HTML5 Developers

Essential Techniques for HTML5 Developers

HTML5 brings the biggest changes to HTML in years. Web designers now have new techniques, from displaying video and audio natively in HTML, to creating realtime graphics on a web page without a plugin.

This book provides a collection of solutions to all of the most common HTML5 problems. Every solution contains sample code that is production-ready and can be applied to any project.

Click Here

Set the Font Size

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.

Web Design Sections

RSS Feed RSS Feed

CSS Quick Reference
How to Define and Apply a Style Class
CSS Properties Index
Use Inline Style
Use an Embedded Style Sheet
Use an External Style Sheet
Context selectors
How to Use a CSS ID Selector
CSS Units of Measurement
Specifying Color
Set the Text Color
Set the Text Alignment
Set the Letter Spacing
Set the Word Spacing
Set the Line Spacing
Highlight Text
Indent the First Line of Text
Set the Text Decoration
Set Text Justification
Set the Text Case
Set the Font Family
Set the Font Style
Set the Font Boldness
Set the Font Size
Set the Font Variant
Style the First Letter
Style the First Line
Set the Background Color
Set a Background Image
Set a Background Image's Position
Set a Fixed Background Image
Set the Background Properties
Set the Border Properties
Set the Border Style
Set the Border Width
Set the Border Color
Set the Border Collapse
Set the Type of Bullet Used in List
Use Image for List Item Bullets
Set List Bullets Position
Set List Properties
HTML, XHTML, and CSS Bible
Web Designer's Reference
position:relative
position:absolute
position:fixed
Set an Element's Clipping
Set an Element's Display Property
Set an Element's Float
Set an Element's Margin
Set an Element's Overflow
Set an Element's Overlap
Set an Element's Padding
Color the Scrollbar
Set an Element's Visibility
Vertical Align an Element
Define CSS Rollover Effects


[Site User Agreement] [Advertise on This site] [Search This Site] [Contact Form]
Copyright©2001-2011 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268