Scribd
Upload
48 views10 pages

CSS Font Size

Uploaded by

Heba Adel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views10 pages

CSS Font Size

Uploaded by

Heba Adel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

 Menu   

Dark mode

Dark code
  HTML CSS   

#TheBestOperatorInEgypt
Join Emerald, the most
flexible family tariff in the market and receive...
#TheBestOperatorInEgypt
Join Emerald, the most flexible famil
tariff in the market and receive your monthly E-coins to use in y
SPONSORED BY ETISALAT EGYPT Learn More

CSS Font Size


❮ Previous Next ❯

Font Size
The font-size property sets the size of the text.

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 <h1> - <h6> for headings and <p> for paragraphs.

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

Absolute 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

Relative size:

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
h1 {
  font-size: 40px;

h2 {
  font-size: 30px;

p {
  font-size: 14px;

Try it Yourself »

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
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */

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

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

Try it Yourself »

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.

ADVERTISEMENT

#TheBestOperatorInEgypt
Join
Emerald, the most flexible family tari…
SPONSORED BY
ETISALAT EGYPT Learn More

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 <body>
element:

Example

body {
  font-size: 100%;

}
h1 {
  font-size: 2.5em;

h2 {
  font-size: 1.875em;

p {
  font-size: 0.875em;

Try it Yourself »

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
<h1 style="font-size:10vw">Hello World</h1>

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

❮ Previous Next ❯
 

ADVERTISEMENT

#TheBestOperatorInEgyp
Join Emerald, the most
flexible family tariff in…
#TheBestOperatorInEgypt
Join
Emerald, the most flexible family tariff
in the market and receive your…

SPONSORED BY ETISALAT
Learn More
EGYPT

NEW

We just launched

W3Schools videos
Explore now

COLOR PICKER




Get certified

by completing

a CSS

course today!

school
w3 s
2
CE

02

TI 2
R

FI .
ED

Get started

CODE GAME
Play Game

ADVERTISEMENT

ADVERTISEMENT
‫عرض يزغلل‬
‫لحق عرض زغلله الصيف ده واكسب لحد‬
‫تاجه تعمل مشترياتك بكريديت كارد البنك‬
‫حركات ألف جنيه ومضاعفاتها عشان يكون‬

SPONSORED BY NATIONAL BANK OF EGYPT (NBE)

ADVERTISEMENT

‫عرض يزغلل‬

SPONSORED BY
NATIONAL BANK OF
Learn More
EGYPT (NBE)

Report Error

Spaces

Pro

Buy Certificate

Top Tutorials
HTML Tutorial

CSS Tutorial

JavaScript Tutorial

How To Tutorial

SQL Tutorial

Python Tutorial

W3.CSS Tutorial

Bootstrap Tutorial

PHP Tutorial

Java Tutorial

C++ Tutorial

jQuery Tutorial

Top References
HTML Reference

CSS Reference

JavaScript Reference

SQL Reference

Python Reference

W3.CSS Reference

Bootstrap Reference

PHP Reference

HTML Colors

Java Reference

Angular Reference

jQuery Reference

Top Examples
HTML Examples

CSS Examples

JavaScript Examples

How To Examples

SQL Examples

Python Examples

W3.CSS Examples

Bootstrap Examples

PHP Examples

Java Examples

XML Examples

jQuery Examples

Get Certified
HTML Certificate

CSS Certificate

JavaScript Certificate

Front End Certificate

SQL Certificate

Python Certificate

PHP Certificate

jQuery Certificate

Java Certificate

C++ Certificate

C# Certificate

XML Certificate

FORUM |
ABOUT

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.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.

You might also like