W3.CSS Defaults

W3.CSS pages are easy to read, even for people with slight reading disabilities.

• The default font-size is 15px
• The default font is Verdana, which has a good letter spacing
• The default line-spacing (1.5) is also very good

HTML Headings —

By default, W3.CSS styles HTML headings this way:

Example

Heading 1 (36px)

Heading 2 (30px)

Heading 3 (24px)

Heading 4 (20px)

Heading 5 (18px)

Heading 6 (16px)

Font-Size Classes

Headings should be used for what they are: Headings.

With W3.CSS, font sizes can be set by the following w3-size classes:

Example

Overriding the W3.CSS Defaults

Overriding the W3.CSS default settings is very easy.

You have at least three options:

1. Override the default settings in the section of your page
2. Add your own CSS file after W3.CSS
3. Download and change the content of the W3.CSS file

Override in

Add your own CSS

Change W3.CSS

Changing the Default Font

In the head of your web page (or in your style sheet), after loading W3.CSS, change the style of html and body:

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS font-size Property

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

Property Values

Value	Description	Demo
medium	Sets the font-size to a medium size. This is default	Demo ❯
xx-small	Sets the font-size to an xx-small size	Demo ❯
x-small	Sets the font-size to an extra small size	Demo ❯
small	Sets the font-size to a small size	Demo ❯
large	Sets the font-size to a large size	Demo ❯
x-large	Sets the font-size to an extra large size	Demo ❯
xx-large	Sets the font-size to an xx-large size	Demo ❯
smaller	Sets the font-size to a smaller size than the parent element	Demo ❯
larger	Sets the font-size to a larger size than the parent element	Demo ❯
length	Sets the font-size to a fixed size in px, cm, etc. Read about length units	Demo ❯
%	Sets the font-size to a percent of the parent element’s font size	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Font Size

Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like — for headings and

for paragraphs.

The font-size value can be an absolute, or relative size.

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h2 font-size: 1.875em; /* 30px/16=1.875em */
>

p font-size: 0.875em; /* 14px/16=0.875em */
>

In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.

Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.

Use a Combination of Percent and Em

The solution that works in all browsers, is to set a default font-size in percent for the element:

Example

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

Responsive Font Size

The text size can be set with a vw unit, which means the «viewport width».

That way the text size will follow the size of the browser window:

Hello World

Resize the browser window to see how the font size scales.

Example

Hello World

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Источник