User:Gen2ly/Web browser font type and size

From ArchWiki
< User:Gen2ly
Revision as of 14:17, 28 March 2015 by Gen2ly (talk | contribs) (Font type: Reword serif description for partiality.)
Jump to: navigation, search

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 serif typefaces cannot accurately reproduce serif fonts that will improve their readability. San-serif typefaces are still used by 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 more easily reviewed.

When choosing a font keep in mind that tastes are personal, deciphering what is best on how the user reads is the primary consideration. Also, keep in mind to, choose a font that works good for readability and not just one that grabs attention. See the examples below to compare various font types.

Note: The overall effect one will experience when defining a font type will vary per user because many web pages define their own font types. 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. Other typefaces are occasionally placed together so sizing them physically alike can ease reading transitions.

Defined typefaces example

This table is a representation of the defined typefaces and their sizes. To get an accurate one, be sure 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

Tango-inaccurate.pngThe factual accuracy of this article or section is disputed.Tango-inaccurate.png

Reason: The rendering of the table depends on the fonts being available on the reader's system. The only portable "preview" method is using raster images, which can't be hosted on ArchWiki. (Discuss in User talk:Gen2ly/Web browser font type and size#)

Common font type representations are given below in CSS measured small, medium, and large values.

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