MSPTC_Logo_small.jpgTYPE_PTC605_Image.jpg


TYPOGRAPHY


Definition

According to Wiktionary, typography is defined as "that by which something is symbolized or figured …,". Translated from Greek to English, it simply means “to write.”
Letterform_Basics2.jpg


In typography, a sans-serif typeface is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without".

Sans-serif fonts tend to have less line
width variation than serif fonts.
(Sans-Serif In Wikipedia. Retrieved September 2014 http://en.wikipedia.org/wiki/Sans-serif)

Serif Typefaces - date from the earliest days of typography, are generally considered more formal than san serif ones. Variations on the standard pointed serif look also exists: slab serif or Egyptian typefaces, in which the are rectangular rather than pointed, as well as semi-serif and semi-sans typefaces which blunt the serifs to yield midway between serif and sans serif.

(Schlatter and Levinson (2013) Visual Usability, Principles and Practices for Designing Digital Applications)


Letterform_Alignment.jpg

BASELINE - The line below the b, o, x, represents the baseline of the letterforms, the point upon which the main body of each letter will always rest.

MIDLINE - The line above these letters represents the midline, the point that typically identifies where the main body of each letter begins.

ASCENDERS - Letter elements that extend above the midline, such as the top part of the b, are called ascenders.

DESCENDER - Letter elements that extend below the baselines, such as the tail of the y, are descenders.

X-HEIGHT - The distance between the baseline and the midline, or base size for the typeface. X-heights are not standard across typftypefaces. For example, Helvetica's x-height is larger than Times New Roman's.


250px-HelveticaSpecimenCH.svg.png
Beautiful Women

A well-chosen font can make all the difference in a design. One of the most successful, common fonts is Helvetica. It is the King Kong of typeface, and is used on everything from airplanes to advertisements. Helvetica was created by Swiss designer Max Miedinger in 1957.

Corporate Use of Typefaces
A typeface should reflect the company’s image and branding. Large corporations tend to adopt clear, sans-serif typefaces. If a company is conservative, it should use serif typefaces, such as Times New Roman: these typefaces reflect classical designs. All website text, not just for corporate websites, should be readable. A Web designer should take into consideration the different browser rendering engines; text fonts are not displayed the same way across browsers.

With large corporate websites, usability plays an increasingly large role in typography design. A company should also care about its users with disabilities who can only read with the help of a screen reader, etc. It isn’t always a good approach to embed text in images and not include <alt> tags, because screen readers can’t read the text. Sadly, the majority of large organizations are still struggling with this issue.

Today, examining and applying typography covers a wide spectrum of modern communications, which include, but are certainly not limited to, the following:
  • typesetting and type design
  • calligraphy
  • graffiti
  • inscriptions
  • advertisements
  • professional logos
  • abstract art



Elements of Typography
When designers create typefaces, they make decisions about the appearance of letter attributes. Learning and understanding the proper terminology can help designers and typographers develop a greater understanding and sensitivity to the visual harmony and complexity of the alphabet.

Ascender - type strokes that rise above the x-height.
Baseline - the imaginary line defining the visual base of the letterform. All letterforms sit on the baseline.
Bowl- the curved stroke within a letter.
Bracket - a curving joint between the serif and the stroke.
Cap height - the height of the upper case letter in a font, taken from the baseline to the top of the character.
Counter - the negative space within a letter either fully or partially enclosed.
Descender - type strokes that fall below the baseline.
Font - a specific variation of a typeface in a specific point size.
Sans serif - typefaces that lack the strokes at the ends of the letters.
Serif -ending strokes of characters; short cross lines at the ends of main strokes; typefaces with strokes on the ends of the letters
Stem - the main upright stroke of a letter.

Wikipage_pic_2.jpg

Typeface - a particular style of type design including the full range of characters, in all sizes.
X-height - height of the body of lowercase letters, not counting ascenders and descenders.
typography.jpg

Serif Typefaces

Serif typefaces guide readers for longer text lines (large publications such as novels, textbook, encyclopedias,
etc) and text blocks because the serifs guide a reader’s eyes through a document.

See the example at right of a novel that uses serif for its title and author:



Sans Serif Typefaces

Since sans serif typefaces don’t have strokes, text in that form are appropriate for brief reading for the sake of receiving information quickly, in which only a few words or sentences are utilized; words printed on road signs or used as publication titles, for example, are in sans serif.

Consider the font used on this book cover and how it is used in conjunction with the visual elements and the book's subject.

external image book-cover-1984-copy.jpg

Legibility - a typeface’s degree of letter recognition.

Readability - how easily a text line can be read, depending on typeface selection.

X-height - large letter body with shorter ascenders and descenders and space in between the letters.

White Space - a balanced amount of space is taken up by the typeface. The text is not so cluttered that letters are practically overlapping eachother, neither is the text too spaced to make it difficult for the reader to scan and read properly line by line.

Type Size - the size of the typeface, which should align with the audience and mission of your text.

For example, see below how a children’s storybook has large font that well accompanies simple-syllable words,
making it easier for young readers as they develop literacy:

Wikipage_pic_3.JPG

Compare this to a thicker novel for adults, such as the one below:

Wikipage_pic_4.jpg

Typeface Variations - Incorporate text variations such as italics, bold, and capital lettering for brief lines of texts to draw attention and inform the reader quickly.

Personality – the typeface evokes the desired emotions and initial impression of the audience.

Wikipage_pic_5.JPG

What kinds of emotions and expectations would a viewer have when visiting the web page shown above?
How does the typeface on this web page attract the viewer?
Does the typeface convey the desired message that the Disney Corporation hopes for?


Resources: