Web Typography Basics - HTML

Fonts basically consist of glyphs, which are the actual machine-based descriptions of individual members of a font family. These descriptions are based on either a vector-based outline or a pixel-based bitmap. Each font exists on an invisible grid called an em square, which forms the boundaries that a font description relies on. For a description of a glyph’s properties.

Glyph attributes.

Glyph attributes.

As you can see the em square determines the height boundaries that a font can meet on the grid. Print-based typefaces, such as PostScript, determine exact widths and heights by breaking the em square up into smaller pieces (1,000 pieces for PostScript, 2,048 for TrueType). OpenType, which is found on both Web-based fonts (see the section towards the end of this chapter on downloadable Web fonts), also breaks an em square up into 2,400 parcels. Machines then use these parcels as ways to exactly measure distance within an em square and the existence of different parts of a font glyph. For example, say the bottom of a g is measured within the scope of those divisions. The positioning based on those divisions is what gives each font its unique characteristics.

The wrong way to describe fonts
It may seem a little heavy-handed to say that just because the W3C has deprecated an element (meaning that the element is discontinued and is no longer part of any formal specification) you shouldn’t use it. But when you realize that its use leads to extremely tedious maintenance issues, the argument suddenly seems a bit less heavy-handed. These maintenance issues arise because of the very nature of how a font element works.

You can use the font element to render font attributes. The font element has been deprecated, and you won’t even find it in the XHTML 1.1 specification. The theory behind its use was that it would control the way a font looked. In practice, ghastly things happened. For example, users might set a font size to 1 that on some screens is so tiny as to be unreadable, or a font size at 3, which on a screen whose user has poor vision takes up the entire screen for a couple of words because the user’s browser preferences are set with large font sizes. Still, you might work for a large site that continues to insist on using this dinosaur, so here are this element’s attributes:

  • SIZE=CDATA (font size adjustment)
  • COLOR=Color (font color adjustment)
  • FACE=CDATA (font face adjustment)
  • HTML 4.0 core attributes
  • HTML 4.0 internationalization attributes

You can see these attributes at work in the following example:

<font size=“1” face=“Helvetica, Arial, Verdana, sans-serif” color=“blue” lang=“en-US” class=“.small” style=“font-family: Times, serif;” id=“confusingElement”>This is an HTML deprecated element!</font>

Load the code from your browser and you’ll see something.

Using the Font Element to Name a Font Family

The attempt to style a string of characters using the font element fails.

The attempt to style a string of characters using the font element fails.

You’ll notice several things First, no matter what fonts you have installed on your system, if you’re testing in a modern browser, you won’t see sans-serif fonts rendered even though you call for them in the font element. This is because you’re using a stylesheet, which overrules font element attribute information in CSS-compliant browsers. To make the font element’s attributes work, you must be certain that no style sheet rules are in conflict with your intentions. So delete the style sheet information and the class attribute so that the font element looks like this:

Your browser window will now display.

A string of characters successfully styled by using the font element.

A string of characters successfully styled by using the font element.

If you name a font family with spaces between characters, you need to enclose the name in single quotes, as shown in bold in the following:

<font size=“1” face=“ ‘Helvetica Narrow’, Arial, Verdana, sans-serif”>This is an HTML deprecated <span style=“fontsize: 28px;”>element!</span></font>

The right way to describe fonts
If you examine, which creates the screen rendered in that figure, you’ll immediately see the benefits of working with the right way of managing fonts, which is CSS.

A table of different font sizes shows a lack of consistency without CSS.

A table of different font sizes shows a lack of consistency without CSS.

Creating Font Sizes with CSS and the Font

Notice the consistency of the sizes in the fourth column. If you open the file in your browser and change your browser’s text size settings, you’ll see that the fonts in the fourth column remain the same size, whereas the sizes in the first three columns, which don’t use CSS for style formatting, all vary wildly.

Hopefully, you’re now convinced of the need to use CSS for styling your fonts. It’s time to examine just how to do that. You can style several aspects of a font to make it bolder, italicized, add space between each character in a word, make it larger or smaller, make a font fatter or thinner, and add space between lines of text.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics