Last time, I talked a bit about the different classes of typeface that exist. Specifically, I talked about the difference between serif fonts, sans-serif fonts, and script fonts. I also separated what I called fancy fonts, but these typically fall into either serif or sans-serif families. This week, I would like to dive into how to use font styles within your website.

First, I want to clarify something from last time. The choice of a font family affects those with reasonably good vision. It is a fact that some fonts are harder to read than others. Some fonts also create an impression about a site. For example, if you went to the Internal Revenue Service to get information on how to file your taxes and the pages used Comic Sans Serif as the default font, would you really take the site seriously? What about a site in which each page on the site used a different font because the web designer did not want to confine their creativity to a single font family. Consider whether on a large site with dozens or hundreds of pages each web designer should be allowed to use their own favorite font? My opinion is, ‘No they should not.’ A site must look like all of the pages belong together. That means in part that the pages should use the same font family and font style. In addition, a large web site should use a common format or layout of their pages for the same reason. This means using a limited number of page templates. Now some web designers might think that limits their creativity. However, there are other ways to be creative. A common look and feel across all pages in the site is essential. If a web designer on a large site cannot live with that, perhaps they should find another site to work on, maybe a new small site that allows them to showcase their creativity.

With that said, let’s look at font style next.

Font Style

Most people do not worry much about font style and default to normal. Other common styles are bold, italic, underlined, and strikethrough. Each style has a good reason to be used, but they should never be used as the default style for the entire page. They are mean to emphasize portions of the text.

Bold text is often used to emphasize the title of a page, or headers on a page. These page elements are also often displayed in a larger font size. For example, if most of the text on the page is 12 pt text, a title might be 18 pt and headers might be 14 pt or 16 pt.

Point (or pt) size of text defines a typographical unit of measure that goes back to the old days of typesetting and printed documents. Each point is equivalent roughly to 1/72 of an inch in height. Obviously, the larger the point size of a font, the bigger the text is. Most websites use a font size of between 10 and 14 pt for the majority of their text. Smaller fonts can be difficult to read and larger fonts greatly reduce the amount of text that can appear on a line or even on the screen at one time. However, using a larger font size to emphasize titles and headers is very common. Most browsers today allow the user to adjust the zoom factor when displaying pages so that even pages with small fonts can still be enlarged and read by nearly everyone.

Does this mean that when using a 12 point font that you can display 6 lines per inch. Not exactly. The font size is measured from the top of the ascenders on letters (e.g., ‘b’ or ‘d’) to the bottom of the descenders (e.g., ‘j’ or ‘p’). However, that ignores the additional space needed between lines of text which if not for that, letters in one line could touch letters in the next line. In fact, there is a term called, leading, which measures the vertical height from the baseline of one line of text to the next line. (Okay, the term baseline refers to the horizontal line that all letters sit on.) Typical leading for a 12 pt font might by 14.4 pt. This means that you might only get 5 lines of text per vertical inch. Less space between lines may make it harder to read the text keeping your eye on the same line as you read across the page. More space between lines may make it confusing to tell where paragraphs begin and end unless extra vertical space defines the start, the end, or both of a paragraph.

Okay, that may be more detail than you need or want.

Italic style text is typically used to emphasize text that is perhaps important or perhaps when displaying quote from someone. Italic text is simply normal text that has a slight slant to it which typically angles the top of the characters a little to the right. I suppose an italic style could also slant the tops of characters to the left, but this is rare. Often the italic style is used along with the bold style or even a color change to help the text stand out. Note, however, color should never be used alone to highlight text due to issues with people having low color vision.

So I mentioned the bold style. This style simply makes the letter strokes a bit thicker than normal so that the text stands out. Bold is often used in titles, headers, and to call attention to specific words within the text. That brings up the point that the use of all caps for a word, unless it is an acronym, should not be used as it implies that you are shouting. So unless you really mean to shout, just stick with normal upper and lower case text.

Underlined text is common style used in printed material for titles and headers and to indicate important text. However, on a web page, underlined text implies to most people that the underlined text is a hyperlink to another place in the page, another page within the site, or an entirely different site. While most hyperlinked text is displayed in a different color as well as being underlined, you should never assume that underlined text of the same color as other text is simply emphasized text and not a hyperlink. Therefore, the Americans with Disabilities Act define other rules for hyperlinked text. For example, moving your mouse over the text should change the color of the text. Hovering over a hyperlink can also make the underline appear or disappear. I once saw a page in which the hyperlinks were not underlined, and the color was either the same or similar to the color of the other text. While the hyperlink did change colors when a mouse hovered over it, you should never try to turn your page into a game in which the user has to find the hyperlinks (like those pairs of images you see in the paper where you have to find the 10 differences). Therefore, I strongly recommend using underlined text only for hyperlinks and find other ways to emphasize text that is not a hyperlink.

Finally, there is strikethrough text. This is text which displays a horizontal line through the middle of the text. It is often used for legal documents, contracts, and other documents to show text that is no longer needed but cannot be simply deleted. Rather, strikethrough shows the text as it originally appeared in the document but which has now been removed. So does the government take this a step further when it redacts information in a document (such as the latest UAP report) by changing both the text and background of the redacted text to black. Actually, no. Screen readers can still read text from the HTML no matter what the font and background colors are. Black text on a black background may appear redacted to visual visitors to your site, but the text is read clearly by screen readers. To truly redact information from a document, you must replace the text with solid blocks of color (typically black).

Well, that was a brief introduction to font style. Next time, I will talk about color theory.