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 to2em
, 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 to1.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 to150%
, 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.