HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
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) 2009 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.
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
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
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