html css font size,CSS font-size

CSS font-size

Run

Stack editor

Unstack editor

Example

p {

color: hotpink;

font-size: 1.5em;

}

.lg { font-size: 150%; }

.sm { font-size: 70%; }

Auctor augue mauris augue neque gravida in fermentum. Euismod elementum nisi quis eleifend. Nec ultrices dui sapien eget mi proin sed libero. Praesent semper feugiat nibh sed.

The CSS font-size property is used for specifying the size of a font.

You can specify the font size as an absolute size, relative size, length, or percentage. See below.

Also see the font-size-adjust property to ensure that any fallback fonts are rendered at an appropriate size.

Syntax

font-size: | | |

Possible Values

absolute-size

This allows you to specify an absolute font size using a keyword. The absolute keywords available are:

xx-small

x-small

small

medium

large

x-large

xx-large

These absolute keywords refer to an entry in a table of font sizes computed and kept by the user agent. When you use an absolute keyword, the user agent looks up the table and calculates the font size accordingly.

relative-size

This allows you to specify a relative font size using a keyword. The relative keywords are:

larger

smaller

These relative keywords move the font size through the list of absolute font sizes above. For example, if the parent element has medium, a value of smaller against the current element will make its font size small. If the parent's font size doesn't match an absolute keyword, the user agent will compute it either by picking a size between absolute keyword values, or rounding it off to the nearest one. If the size is outside the range of absolute keyword values, the user agent will extrapolate the size accordingly.

Specifies an absolute font size using a valid length value (for example, 18px, 1.5em, 14pt, etc). This value is independent of the user agent's font table. Negative lengths are illegal.

Using a percentage value specifies an absolute font size relative to the parent element's font size.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value

medium

Applies To

All elements

Inherited?

Yes (the computed value)

Media

Visual

Animatable

Example Code

h1 {

font-size: 24px;

}

p {

font-size: 1em;

}

blockquote {

font-size: 120%;

}

nav {

font-size: smaller;

}

Absolute-Size Reference

Here's a rough guide as to mappings between CSS absolute sizes and HTML heading and absolute font sizes.

Note that the actual value may vary, depending on the value of font-size-adjust, and the unavailability of certain font sizes.

CSS absolute-size valuesxx-smallx-smallsmallmediumlargex-largexx-large

scaling factor3/53/48/916/53/22/13/1

HTML headingsh6h5h4h3h2h1

HTML font sizes1234567

Limitations of the font-size Property

Different fonts have different x-heights. So one font may look bigger at a given size than another font. This is fine if you're only dealing with one font. But on the web, we usually deal with a list of fonts — starting with our first choice font, then one or more "fallback" fonts, in case the user doesn't have our preferred font.

This is typically done with code that looks something like this:

font-size: 18px;

font-family: Optima, IrisUPC, sans-serif;

The assumption is that, as developers, we will have the first choice font (Optima) installed on our computer. So when we test the font size in the website, we will be testing with the first choice font.

But what about users who are unable to use our first choice font? They will get the second choice (if it's available), or the third choice if neither of those are available, and so on.

In many cases, the second or third choice fonts will be rendered at a different x-height than the first choice font. What this means is that your second choice font may look bigger or smaller than intended. In some cases this might not be a problem, but in other cases you might find that the fallback font is rendered much too small or much to large — to the point where the text becomes illegible. This can prove to be quite frustrating, as it can be difficult finding suitable fallback fonts.

Fortunately, CSS provides a way to deal with this problem.

CSS includes the font-size-adjust property for dealing with this precise problem. Basically, it allows you to specify that all fallback fonts use the same aspect ratio as the preferred font. When you do this, the fallback font is rendered at a very similar size to the preferred font. Be sure to check it out.

Official Specifications

CSS Fonts Module Level 3 (W3C Candidate Recommendation 3 October 2013)

CSS Level 2.1 (W3C Recommendation 07 June 2011)

CSS Level 1 (W3C Recommendation 17 Dec 1996)