CoderTools Web site

CSS Font - font-size

Description


Use font-size to change the text size of text within html elements. You can use relative values e.g. a percentage, x-small, x-large etc. These values are relative to the default or inherited value. Alternatively you can specify a specific value using points e.g. 12pt, or pixels e.g. 12px or em value e.g. 1.2em.

Note: Of the specific values it is recommended that using em or percentage is best as for points as points are measured in 1/72 of an inch for each point and there is mapping between inches and pixels on a monitor.

The default is medium
    
    font-size: xx-small; 
    font-size: x-small;
    font-size: small; 
    font-size: medium; 
    font-size: large; 
    font-size: x-large; 
    font-size: xx-large; 
    font-size: smaller; 
    font-size: larger;
    font-size: length   /*  e.g. 12pt or 1em or 10px */
    font-size: percentage   /*  e.g. 50% */
    
    
See also: font, font-family, font-variant, font-weight.

Examples for font-size

Example 1:

Simple example using font-size of xx-large.

test text test text test text test text
    <style>
        #test { font-size: xx-large; }
    </style>

    <div id="test">test text test text test text test text</div>

Example 2:

Percentage example:

test text test text test text test text
    <style>
        #test2 { font-size: 75%; }
    </style>

    <div id="test2">test text test text test text test text</div>

Example 3:

An example using em units:

test text test text test text test text
    <style>
        #test3 { font-size: 1.2em; }
    </style>

    <div id="test2">test text test text test text test text</div>

Values for font


Name Values Description
font-size em e.g. 1.3em
% e.g. 150%
pt e.g. 14pt

xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
Specifies the size of the font/text.
font-style normal|italic|oblique normal is the default. On most browsers oblique is the same as italic.
font-weight normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
normal is the default. 400 is the same as normal. 700 is the same as bold
font-family family-name
generic-family
Specifies the font name alternatively you can specify the generic name family name of the font/text.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

10/17/2017 7:04:28 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP