HTML Font Size Code
In HTML, font size is specified using CSS (Cascading Style Sheets). Font size is specified using the font-size property.
The actual value of the font-size property can be specified in different ways. You can specify font size in any of the following ways:
- Absolute Size
- Relative Size
- Fixed Size
- Percentage
Option 1: Absolute Size
Absolute size refers to an entry in a table of font sizes that is calculated, and kept by the browser (or other user agent). Because of this, the text will always be displayed at the same size regardless of its surrounding elements. This is because the sizes are pre-calculated by the browser/user agent.
Here's an example of setting font size using absolute sizes:
<p style="font-size:xx-small;">Absolute size - xx-small</p><p style="font-size:x-small;">Absolute size - x-small</p><p style="font-size:small;">Absolute size - small</p><p style="font-size:medium;">Absolute size - medium</p><p style="font-size:large;">Absolute size - large</p><p style="font-size:x-large;">Absolute size - x-large</p><p style="font-size:xx-large;">Absolute size - xx-large</p>Option 2: Relative Size
Relative size allows you to set the font size relative to the parent element. This means that different text with the same (relative) value could actually appear in many different sizes - even on the same page. It all depends on the text's parent element. There are two possible values: 'smaller' and 'larger'.
xxxxxxxxxx<p style="font-size:smaller;">Font size specified using relative values - smaller</p><p style="font-size:larger">Font size specified using relative values - larger</p>Option 3: Length Value
A length value allows you to specify an absolute font size, regardless of the surrounding elements. There are eight possible values.
Relative Values:
- em (the 'font-size' of the relevant font)
- ex (the 'x-height' of the relevant font)
- px (pixels, relative to the viewing device)
Absolute Values:
- in (inches -- 1 inch is equal to 2.54 centimeters)
- cm (centimeters)
- mm (millimeters)
- pt (points -- the points used by CSS2 are equal to 1/72th of an inch)
- pc (picas -- 1 pica is equal to 12 points)
Examples of Relative Values
xxxxxxxxxx<p style="font-size:1.2em;">Font size specified at 1.2em</p><p style="font-size:1.4em;">Font size specified at 1.4em</p><p style="font-size:1.8em;">Font size specified at 1.8em</p><hr /><p style="font-size:2ex;">Font size specified 2ex</p><p style="font-size:3ex;">Font size specified at 3ex</p><p style="font-size:4ex;">Font size specified at 4ex</p><hr /><p style="font-size:12px;">Font size specified at 12px</p><p style="font-size:14px;">Font size specified at 14px</p><p style="font-size:18px;">Font size specified at 18px</p>Examples of Absolute Values
xxxxxxxxxx<p style="font-size:0.12in;">Font size specified at 0.12in</p><p style="font-size:0.18in;">Font size specified at 0.18in</p><p style="font-size:0.25in;">Font size specified at 0.25in</p><hr /><p style="font-size:0.35cm;">Font size specified at 0.35cm</p><p style="font-size:0.45cm;">Font size specified at 0.45cm</p><p style="font-size:0.6cm;">Font size specified at 0.6cm</p><hr /><p style="font-size:3.5mm;">Font size specified at 3.5mm</p><p style="font-size:4.5mm;">Font size specified at 4.5mm</p><p style="font-size:6mm;">Font size specified at 6mm</p><hr /><p style="font-size:10pt;">Font size specified at 10pt</p><p style="font-size:12pt;">Font size specified at 12pt</p><p style="font-size:16pt;">Font size specified at 16pt</p><hr /><p style="font-size:0.8pc;">Font size specified at 0.8pc</p><p style="font-size:1pc;">Font size specified at 1pc</p><p style="font-size:1.2pc;">Font size specified at 1.2pc</p>Option 4: Percentage Values
Percentage values specify an absolute font size relative to the parent element's font size.
xxxxxxxxxx<p style="font-size:90%;">Smaller font size specified using percentage values - 90%</p><p style="font-size:150%">Larger font size specified using percentage values - 150%</p>More Font Properties
Here are more CSS font properties you can use on your text:
- font
- font-family
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-weight
- letter-spacing
- line-height
- color
- background-color
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties
