User:Gen2ly/Web browser font type and size

A professional typesetter knows the importance of a good font. For centuries they have evolved fonts to provide the general ease of reading that we know today. Having a similar replication in a web browser can help the experience — the right font type and size can reduce the strain on the eyes, especially if used quite a bit.

To define the web browser's font settings involves these steps:

1. install the common web browser fonts on to the system
2. choose the fonts that are good for one to read with
3. adjust the fonts to an appropriately viewable size

Thereafter, so that they may be judged, an example is given that displays the font type and size of the current settings.

Font availability

To have a web page feel as the designer had in mind, the fonts that a page requires should be available to the browser. A typical desktop creation may only requisite a few fonts to be installed. Any missing fonts that are made available to a web page can have an influence on the design and have a emotional affect that may not have been realized before.

To help discover any missing fonts, one way to discover what they are would be to use an add-on or plugin. Various web browser extensions exist that can do this; for instance, Firefox has as add-on named Context Font that when a web page font is selected, right clicking on the font will display the its type and size.

A majority of web pages define their fonts with Microsoft's fonts, typically Arial. Some web pages define their fonts with Apple's versions, and some web pages define their fonts with others. Microsoft fonts are available for download in many Linux distribution's software repositories or they can be done so directly. See Fonts for noted font packages that may be of use.

Note: There are other fonts on a web page that may be discovered but are not required to be installed. These fonts are attached to the web page and get downloaded along with it. FYI for those that are interested, for the web browers and web pages that allow it, these fonts can be downloaded (typically from the right-click menu).

Font type

Most web browsers have the ability to define three font types, called typefaces. These are generic typefaces are called serif, sans-serif, and monospace.

A serif typeface has short lines at the end of each main stroke of the character. The extra flourish is called the serif and its purpose is to further define characters to help their recognition. This typeface can improve readability and is the one commonly used in books.

A sans-serif typeface is without serifs. Because a number of monitors have a lower resolution, sans-serif typefaces are used because on these type of monitors serif typefaces cannot be accurately reproduced (and hence, readable). San-serif typefaces are still used on a good number of web pages.

A monospace typeface defines all its characters as an equal width. Monospace typefaces are typically seen when writing programming code. They make the formatting more structured which makes the code easier to review.

When choosing a font keep in mind that tastes are personal. Deciphering what font to use based on how the user reads is the primary consideration. Also keep in mind to not choose a font that just grabs the attention. See the examples below to compare various font types.

Note: The overall effect when defining web browser typefaces will vary on the pages the user views — many web pages define a specific font type rather than a generic typeface. Though this behavior can be overridden it is usually recommended to use the font the web page has defined as the design itself may have an effect on readability.

Font size

To get a good idea of what to use for the font size, take a look at a book. Books vary a bit but a book held at a comfortable length while sitting down will give a good approximation. If screen real-estate is a consideration (that it is preferable that fonts take up less space), go one or two sizes below. If doing a considerable amount of reading, pick the size that feels most comfortable.

Additionaly, when picking the font size, try to match the physical font size to that of the other typefaces. Occasionally different typefaces are placed together so sizing them physically alike can help reading transitions.

Defined typefaces example

This table displays the defined typefaces and their sizes. To be sure and get an accurate representation, check that the default zoom level is used on the web page.

·Typeface·	·Example·
Serif:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non arcu a ante feugiat vestibulum. Suspendisse potenti. Suspendisse potenti. Phasellus lacinia iaculis mi. Sed elementum, felis quis porttitor sollicitudin, augue nulla sodales sapien...
Sans-serif:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non arcu a ante feugiat vestibulum. Suspendisse potenti. Suspendisse potenti. Phasellus lacinia iaculis mi. Sed elementum, felis quis porttitor sollicitudin, augue nulla sodales sapien...
Monospace:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum non arcu a ante feugiat vestibulum. Suspendisse potenti. Suspendisse potenti. Phasellus lacinia iaculis mi. Sed elementum, felis quis porttitor sollicitudin, augue nulla sodales sapien...
Very-small:	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
One-liner:	Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet

Common fonts example

These tables displays the common font types in various sizes. The CSS values of small, medium, and large are used.

New Times Roman	Arial	Courier New
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
DejaVu Serif	DejaVu Sans	DejaVu Mono
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
Liberation Serif	Liberation Sans	Liberation Mono
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
FreeSerif	FreeSans	FreeMono
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown	!@#$1234—The quick brown
Open Serif	Open Sans
!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown
!@#$1234—The quick brown	!@#$1234—The quick brown