Which css property controls the text size

You can use the CSS property, font-size to set or change the text size on your website.

The text visibility on a website is one such factor that contributes to a good user experience. The CSS property font-size can accept various types of values to set the size of a text. Different types of values have different impacts on text visibility settings.

In this tutorial, you will learn about the CSS font-size property. You will also learn about the types of size values that work with this property.

The syntax and a coding example

The general syntax of the CSS property font-size is as below

Let’s start by seeing an easy example —

 html> body> p style="font-size: 20px;"> Hello World p> body> html>

The above example uses the CSS property font-size to set the size of a text to 20px .

Absolute size values

The CSS property, font-size can accept absolute values.

An absolute value refers to a fixed numeric value. Thus an absolute value sets text size to a fixed size.

You can set the text size to an absolute value using any of the followings —

Absolute keyword Values

You can use any of the below keywords to set the CSS property, font-size to an absolute value.

medium — Sets text size to the default value of the browser.
small — Sets the text size to a value smaller than medium.
x-small — Sets the text size to a value smaller than x-small.
xx-small — Sets the text size to a value smaller than XX-small.
large — Sets the text size to a value larger than medium.
x-large — Sets the text size to a value larger than x-large.
xx-large — Sets the text size to a value larger than xx-large.

Absolute length values

The CSS property, font-size accepts absolute length values. You can use any of the below units to set the size of a text.

mm — Specifies the size in millimeter.
cm — Specifies the size in centimetre. 1 cm = 10 mm .
in — Specifies the size in inches. 1 in = 2.54 cm .
pt — Specifies the size in points. 1 pt = .0353 cm .
pc — Specifies the size in picas. 1 pc = 12 pt .
px — Specifies the size in pixel. 1 px = .0104 in .

Web developers prefer to use px units and keywords for website texts. Other units are popular for print style sheets.

A coding sample for setting text sizes using absolute values

Here comes an example that sets CSS property font-size to some absolute values

 html> body> p style="font-size:xx-large"> Sample Text 1 p> p style="font-size:18px"> Sample Text 1 p> p style="font-size:x-small"> Sample Text 1 p> p style="font-size:18pt"> Sample Text 1 p> body> html>

You can run this HTML file in a browser and see the outputs. You can also try other unit values to gain more knowledge.

The absolute values don’t allow users to adjust text sizes through browser settings. Thus the good programming practice is not using absolute values unless unavoidable.

In the next section, you will learn about relative values and how to use them.

Relative Values

A relative value is a specific type of value that the system calculates based on another value. For example, a percentage value is a relative value.

The use of relative values in text sizes, helps users to grow or shrink the website texts in proportion. User changes browser’s default font size to have such cascading effects.

You can set the size of a text to relative value using below —

Relative keyword values

Below are two relative keywords you can use to set the size for a text to a relative value —

smaller — Sets text size to smaller keyword value than the current value.
larger — Sets text size to larger keyword value than the current value.

Relative length values

Below are few length units that can set relative values —

Percentage(%) — This is the percentage of the font size in the parent element.
rem — Relative to root font size. 1 rem = The font size of the root element.
em — Relative to the font size in the parent element. 1em = The font size in the immediate parent container.

A coding sample for setting text sizes using relative values

The below example shows how can you use relative values to set the size of a font.

You can write or copy the below HTML source code in the index.html file

 html> body> div class="container"> p class="para2"> Sample Sentence 2 p> div> body> html>

You can write or copy the below CSS source code in your style.css

.html< font-size: 62.5%; > .container < font-size: 3rem; > .para1 < font-size: 2rem; >

You can run the HTML file in a browser to see the output.

In this example, Let’s consider, the browser’s default font size is 16 px .

The root font size is set to 62.5% of the browser’s default font size. Thus in this example, the root font size or a single rem unit equals 10 px .

The font size of the element with class, container is 3 rem or 30 px .

The em unit is relative to the font size of the parent element. Thus here 1 em corresponds to the font size in the parent element, that is 30 px .

The second paragraph with class, para1 has a font size of 2 em or 60 px .

Thus we have used all types of relative values in this example to see how they work. The browser recomputes all these values if a user changes the browser’s default font size.

Responsive Values

The relative units allow users to tweak the sizes of texts. They can’t make the size of a text respond to screen sizes. You need to use any of the viewport units to set the size of a text to make it responsive to screen sizes.

There exist four viewport units that you can use to set the size of a text —

Viewport Width or vw — Relative to screen width. 1 vw equals 1% of the screen width.
Viewport Height or vh — Relative to screen height. 1 vh equals 1% of the screen height.
Viewport Minimum or vmin — Relative to the smaller dimension of the viewer’s screen. 1 vmin equals 1% height or width of the screen whichever is smaller.
Viewport Maximum or vmax — Relative to the larger dimension of the viewer’s screen. 1vmin equals 1% height or width of the screen whichever is larger.
Texts may become extra-large or small on screens with extreme dimensions. You can use a media query to restrict texts from becoming too large or small.

A coding sample for setting text sizes using responsive values

Here comes an example that uses viewport values to sets sizes of texts. You can write or copy the below HTML source code in your index.html

 html lang="en"> head> title> A Sample Web Page title> link rel="stylesheet" href="style.css"> head> body> p class="Sample1">Sample Sentence 1p> p class="Sample2">Sample Sentence 2p> p class="Sample3">Sample Sentence 3p> p class="Sample4">Sample Sentence 4p> body> html>

The CSS file, style.css should have below source code

.Sample1 < font-size: 5vw; > .Sample2 < font-size: 5vh; > .Sample3 < font-size: 5vmin; > .Sample4 < font-size: 5vmax; > @media screen and (max-width: 400px) < .Sample1, .Sample2, .Sample3, .Sample4 < font-size: 1rem; > > @media screen and (min-width: 900px) < .Sample1, .Sample2, .Sample3, .Sample4 < font-size: 4rem; > >

This example sets the sizes of all texts with viewport units. This example uses two media queries to ensure texts are never too large or small.

Summary

You can use the CSS property, font-size to set the sizes of texts on a website.
The CSS property, font-size can accept absolute, relative, and responsive values.
An absolute value refers to a fixed numeric value.
Browser calculates relative values based on other values. Examples of such other values include font size or in parent element or root element, etc.
The use of relative values as the sizes of texts allows users to grow or shrink all website texts in proportion. This is the reason relative values and units are more preferable.
The viewport units make text responsive to screen dimensions. It would be best if you enforced some checks to restrict texts from appearing too large or small.

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript

Источник

CSS font-size Property

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

CSS Syntax

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

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 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.

Источник

Which css property controls the text size