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

font-size: value;

Let’s start by seeing an easy example -

<!DOCTYPE html>
<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
  • Absolute length values

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. 1cm = 10mm.
  • in - Specifies the size in inches. 1in = 2.54cm.
  • pt - Specifies the size in points. 1pt= .0353cm.
  • pc - Specifies the size in picas. 1pc = 12pt.
  • px - Specifies the size in pixel. 1px = .0104in.

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

<!DOCTYPE html>

<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
  • Relative length values

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. 1rem = 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

<!DOCTYPE html>

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

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

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

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

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

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. 1vw equals 1% of the screen width.
  • Viewport Height or vh - Relative to screen height. 1vh equals 1% of the screen height.
  • Viewport Minimum or vmin - Relative to the smaller dimension of the viewer’s screen. 1vmin 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

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> A Sample Web Page </title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <p class="Sample1">Sample Sentence 1</p>
      <p class="Sample2">Sample Sentence 2</p>
      <p class="Sample3">Sample Sentence 3</p>
      <p class="Sample4">Sample Sentence 4</p>
   </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