In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > fontSize

fontSize style property

Browser support:

Specifies or returns the font size of the text.

Syntax:

object.fontSize;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: font-size

Possible values:

The type of this property is string.

One of the following values:

size in non-negative length

The size of the font in length units. For the supported length units, see the length page.

size in non-negative percentage

The size is the specified percentage of the parent element's font size.

xx-small

Equivalent to a value of 1 for the size property of a font tag.

x-small

Equivalent to a value of 2 for the size property of a font tag.

small

Equivalent to a value of 3 for the size property of a font tag.

medium

Equivalent to a value of 4 for the size property of a font tag.

large

Equivalent to a value of 5 for the size property of a font tag.

x-large

Equivalent to a value of 6 for the size property of a font tag.

xx-large

Equivalent to a value of 7 for the size property of a font tag.

larger

Increase the text size by one relative unit.

smaller

Decrease the text by one relative unit.

-webkit-xxx-large

Equivalent to the 48px font-size.

inherit

Takes the value of this property from the computed style of the parent element.

Default: medium.

Example HTML code 1:

This example illustrates the use of the font-size property:

<head>
    <style>
        .font12 {
            font-size: 12px;
        }
        .font24 {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <span class="font12">font-size: 12px;</span><br />
    <span class="font24">font-size: 24px;</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the fontSize property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeFont (selectTag) {            
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected options values
            var selectState = selectTag.options[whichSelected].text;

            var fontTest = document.getElementById ("fontTest");
            fontTest.style.fontSize = selectState;
        }
    </script>
</head>
<body>
    <span id="fontTest">
        Sample multiline text <br />change it!
    </span>

    <br />
    <select onchange="ChangeFont (this);" size="9">
        <option />xx-small
        <option />x-small
        <option />small
        <option />smaller
        <option selected="selected" />medium
        <option />larger
        <option />large
        <option />x-large
        <option />xx-large
    </select>
</body>