RGD - Web Typography Lesson

 

Web Typography Lesson

Typography Image Includes topography elements of: Caption Meanline Baseline Beardline Bar Counter Bowl Shoulder Ascender Serif Stem Descender X-height

Font Type

Typography is the art and skill of arranging type in order to make your language noticeable so that your web audience believes and gives value to the message shared on the web page.  The appearance of the text plays a major role in determining if your audience will take the time to read the content.

You discovered in the Styling with CSS module that the web browser determines how the font is displayed on the screen for your audience. If you desire to specify a font type, instead of allowing the browser to use its default font setting, you should specify the desired font. It is a good practice to indicate several font family names so that if the browser cannot display the type, another type is available. The most common font families are:

    • Arial
    • Helvetica
    • Times New Roman
    • Verdana

It is recommended that you also include one of the following generic font families so font is properly displayed regardless of the make and model of your audience's computer.

    • Serif
    • Sans serif
    • Cursive
    • Fantasy
    • Monospace

In addition to assigning the font family name, you can also specify the font size.

Font Size

The style declaration selector {font-size; value} is used to specify the size of the font. The size of each font size keyword is determined by the browser, not by the style rule.  So even though you define x-large for the font size, it may look different in size depending on the browser used. For that reason, it is always a good practice to access several browsers when viewing your web sites.

Line Height

You should also consider the line height when constructing your web pages.  Line height is the amount of space between each line within the paragraph. You would need to use the line-height property to define the amount of space between lines of a paragraph.

Character Space

It is possible to increase or reduce the amount of spacing between letters and words. To do so, you would use one of the properties noted below.

word-space: value;       letter-spacing: value;

Other Text Options

You can also manipulate text by applying bold formatting, italic, changing case size, adding color, applying text decoration such as overline, strike-through, and other applications. Avoid using the underline option since that designation often indicates a hyperlink.

IMAGES CREATED BY GAVS