How to control print font size with CSS

How to Control Print Font Size with CSS

In this article, we’ll explain how to control the font size in printed pages using CSS. The font size on a printed page may differ from the font size on screen because the printing process needs to take paper size and readability into account. By using CSS, we can easily control the font size of printed pages to ensure that printed documents are well-readable.

Read more: CSS Tutorial

Print Style Sheets

Before we begin exploring how to control the font size for print, let’s first understand print style sheets. A print style sheet is a CSS style sheet that’s applied only when printing. We can use a CSS file as a print style sheet by adding a <link> tag to our HTML document.


<link rel="stylesheet" href="print.css" media="print"> 

The above code applies a CSS file named print.css to printed pages. We can define print styles in the print.css file that differ from screen styles.

Controlling Print Font Size

To control the font size of printed pages, we can use the font size unit in pt (points) or mm (millimeters).

Using the pt unit

In CSS, we can use the pt unit to specify font size. 1pt is defined as 1/72 of an inch, which is approximately equal to 0.35 millimeters. Here’s an example:

@media print {
body {
font-size: 12pt;
}
}

The above code sets the font size for printed pages to 12pt. We can use different values ​​to adjust the font size. Note that the font size may vary slightly when printed due to differences in printing devices and paper sizes.

Using the mm unit

In addition to the pt unit, we can also use the mm unit to specify the font size for printed pages. Here’s an example:

@media print {
body {
font-size: 4mm;
}
}

The above code sets the font size of the printed page to 4mm. Similarly, we can use different values ​​to adjust the font size as needed.

Using Relative Units

In addition to absolute units (pt and mm), we can also use relative units to control the font size of printed pages. Here are some commonly used relative units:

  • em: Relative to the parent element’s font size. For example, if we set the font size to 2em, it means the font size is twice the parent element’s font size.
  • rem: Relative to the root element’s font size (<html>). For example, if we set the font size to 1.5rem, it means the font size is 1.5 times the root element’s font size.
  • %: Relative to the parent element’s font size as a percentage. For example, if we set the font size to 150%, it means the font size is 150% of the parent element’s font size.

By using relative units, we can achieve responsive print font sizes to accommodate different printing devices and paper sizes.

Example

Let’s use an example to demonstrate how to control print font size.

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="print.css" media="print"> 
<style> 
@media print { 
h1 { 
font-size: 18pt; 
} 
} 
</style> 
</head> 
<body> 
<h1>This is a heading</h1> 
<p>This is the body of the text. </p> 
</body> 
</html> 

In the example above, we include a print stylesheet named print.css in the <head> tag and set the font size of the h1 tag to 18pt. On the printed page, the font size of the h1 tag will be displayed according to the value we set.

Summary

Using CSS, we can easily control the font size of printed pages. We can specify font sizes using absolute units (pt or mm), or we can use relative units (em, rem, or %) to achieve responsive print font sizes. By judiciously applying these techniques, we can ensure that printed documents are highly readable.

Leave a Reply

Your email address will not be published. Required fields are marked *