Typography A Key Element in Design A

Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page. Includes changes in: Font faces, families/styles, sizes Line length Leading Letter spacing

FONT Definition: A font is a complete set of characters in a specific face, style, size, and spacing. EXAMPLE: Arial Typeface ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ,:;’‘!?$& Each set includes upper- and lowercase letters, numerals, and punctuation.

FACE Definition: Face is the design of the character. Each design has a name and is intended to convey a specific feeling. There are three basic types of faces: Serif: has lines or curves extending from the ends of the letters. Example Sans Serif: without lines or curves extending from the ends of the letters.Example Script: displayed like cursive handwriting. Example

Font Family or Style Definition: Font family or style refers to the slant and the weight of the letters within a specific font face. Example of font families or styles are: regular, italic, bold, and bold italic. Times New Roman Regular Times New Roman Italic Times New Roman Bold Times New Roman Bold Italic

SIZE Definition: Font size generally refers to the height of the font, measured in points or HTML size 1 – 7 (+ and -). There are 72 points per inch. This is 10 point type. This is 12 point type. This is 18 point type. This is 24 point type. This is 36 point type. This is 48 point type.

SPACING Definition: Spacing refers to the amount of horizontal space each character gets on the line within a specific font face. Fonts are categorized as: Monospaced: each character gets the same amount of horizontal space on the line. Proportional: each character gets a different amount of horizontal space on the line depending on its specific width. Example: Monospaced Proportional

Typography rules and tips

Typography tips: The following tips should be used to achieve effective communication with text on your Web page. Be consistent with fonts throughout your site Headings same face, size, and color, etc. Regular text same face, size, and color, etc. Use font faces that can be viewed on all users computers. The designers job is to ensure that the Web site’s message jumps off the page and into the reader’s mind.

Match the job: Select a typeface that matches the document content. To choose an appropriate typeface, generate adjectives that describe the mood or feeling that you want achieved. (Ex: masculine, strong, elegant, romantic, friendly, dramatic, etc.) Then choose a typeface with a personality that matches the adjectives. Remember that the typeface must be compatible with the content of the words and the document message. Example: BULLDOZER (appropriate) Bulldozer (inappropriate)

Legibility/readability: Readers want information that is easy to read, understand and use. Choose legible typefaces appropriate for the subject matter Ensure readability by making sure the type: –is big enough to read –is set at a line length that is not too long or too short –provides a contrast to the background Use no more than two type faces per document!!!!! Styles highlight important words as well as help clarify and add contrast and interest. Horizontal serifs help lead the eye along the lines of type, making it easier to read. Serif typefaces are formal so they are typically used for long passages of text. Sans Serif typefaces are informal and are often used for shorter text and headlines. Use text appearance changes to make visual transitions. When using text appearance changes don’t set long blocks of text in italics bold or all caps.

elements