Default Font Family and Font Size

This section provides a tutorial example showing default font family and font size used by Web browsers to display text in HTML 'P' tags.

In order to manage the appearance of an HTML document displayed on screen or printed on paper, you need to understand how how the browser determines sizes of HTML basic content types like text, or images. Let's start with text first in this tutorial.

When you publish a new HTML document on the Internet, the first question you may ask is "What font family and font size will be used to render text contents?".

The answer depends on which Web browser the viewer is using and on which operating system the browser is running. Technically, HTML technology has no way to control which font family and which font size to use for displaying your document. You may add CSS properties to your HTML document to suggest font settings. But it is up to the Web browser who decides which font family and which font size to use.

Most Web browsers will display HTML text contents using "Times New Roman" as the default font family, and "12pt" as the default font size. This assumes that most operating systems support "Times New Roman" font.

Here is example HTML document that displays some text contents in <p> tags with default font properties and other CSS suggested font properties:

<!DOCTYPE html>
<!-- Default-Font-Settings.html
 - Copyright (c) HerongYang.com. All Rights Reserved.
-->
<html>
<head>
<title>Default Font Settings</title>
</head>
<body>

<h4>Font Settings Comparison with <p> Tag:</h4>
<table border="1">
<tr>
<th>Font Setting</th><th>Text Displayed</th>
</tr>
<tr>
<td>Default</td>
<td><p>The quick brown fox jumps over the lazy dog.</p></td>
</tr>
<tr>
<td>Times New Roman, 12pt</td>
<td><p style='font-family: "Times New Roman"; font-size: 12pt;'>
The quick brown fox jumps over the lazy dog.</p></td>
</tr>
<tr>
<td>Times New Roman, 11pt</td>
<td><p style='font-family: "Times New Roman"; font-size: 11pt;'>
The quick brown fox jumps over the lazy dog.</p></td>
</tr>
<tr>
<td>Times New Roman, 13pt</td>
<td><p style='font-family: "Times New Roman"; font-size: 13pt;'>
The quick brown fox jumps over the lazy dog.</p></td>
</tr>

<td>Arial, 12pt</td>
<td><p style='font-family: "Arial"; font-size: 12pt;'>
The quick brown fox jumps over the lazy dog.</p></td>
</tr>
</table>

</body>
</html>

The picture below shows you how the above HTML document is displayed in Safari Web browser on a macOS computer. As you can see, the Safari uses "Times New Roman, 12pt", as the default to display text paragraph, if no suggestions are given from the CSS properties.

Default Font Family and Font Size
Default Font Family and Font Size

As you can from the picture, the text with default font settings is displayed exactly as "Times New Roman, 12pt".

If you display the above HTML document and see different result, then your Web browser is using a different default font family or font size. You can change styles in the HTML document to figure what are the default setting in your browser.

Of course, you can alway provide CSS font properties to control the appearance of text contents in your HTML documents.

Table of Contents

 About This Book

 Introduction of HTML

 Introduction of HTML5 Features

 HTML Document Structure and Content

 HTML Document and Elements Syntax

Displayed and Printed HTML Documents

 Differences between Displayed and Printed HTML Documents

Default Font Family and Font Size

 Display Size of Image

 Printed Width of HTML Document

 Printed Height of HTML Document

 Text Paragraph Block Size and Overflow

 Pagination Control of HTML Documents

 Responsive Design of Web Pages

 References

 Full Version in PDF/EPUB