Typography

Legibility vs Readability
Legibility refers to how a typeface is designed
and how well one individual character can be
distinguished from another.
Readability refers to the way in which words
and blocks of type are arranged on a page.

Legibility
Different typefaces were designed for different
uses context
Display faces were designed to be large when
used used for headlines
Example: Arial

Text(body) faces were designed to be used for

smaller text in a larger space
Example: Georgia

Legibility
x-height
Applied to body text sizes
Determined by measuring the height of the
lowercase x for a given font
Larger x heights are typically more readable

Readability
Size
consider age of audience
different text sizes for different devices may make
sense
10pt for print, 13pixels for web

Letter Spacing
distance between the letterforms in a word or block
of text

Readability
Spacing/Line Height
Margins in block text
Related text and subheadings not grouped together
visually
Proper spacing allows the reader to scan the text
and access it at the desired points

Readability
Contrast
Color Contrast
can have too much or not enough
can use grey scale to determine

Hierarchy
can be achieved by using a different typeface, a
contrasting color, white space or size
Important visual elements should be prominent

Web vs Print
Print Design allows your eyes to search the information,
letting you select information objects and using spatial
position to enhance and explain page elements.
Web Design is a transient experience based on the users
movements and is expressed through an interaction with
user movement through clocking and scrolling.
Computer monitors come in different sizes whereas pages
are fixed.
Monitor color and contrast settings can affect how colors are
rendered on their screen, unlike print.

Web Fonts Vs Print Fonts

Font type
Its still important to use fonts that are optimized for
on-screen readability.
Georgia and Verdana are good for on-screen use.
Serif typefaces are the most commonly used typestyle

Font size
Print publications 10- or 11-point type
Web font sizes of 12- or even 14-point to make articles
reader-friendly.

Cascading Style Sheet Font

Selection

CSS is how a web page formats its content text, images ect

Through CSS and web fonts, designers are able to carefully control a full range of
typographic elements. Web fonts work with the following typographic-related CSS
commands:

text-decoration
font-size
font-variant (small cap, etc)
text-transform (uppercase, lowercase)
font-weight
letter-spacing
word-spacing
line-height

CSS will describe a font to be used. A web font is a font which does not have to be
installed on ones computer, it exists on the web. The font that is displayed is
guaranteed to be the same for all users.
Using Goodles web fonts will make ones webpage more standard and is free.

Bad Typography

Bad /Good Typography

Does the Typeface of a Resume Impact Our Perception

of the Applicant?

Does the Typeface of a Resume Impact Our Perception

of the Applicant?

Readability Of Websites With Various Foreground/Background

Color Combinations, Font Types And Word Styles

Question
What colors would you use when designing a
website?

References
Hill, A., & Scharff, L. V. (1997). Readability of websites with various
foreground/background color combinations, font types and word styles. In
Proceedings of 11th National Conference in Undergraduate Research (Vol.
2, pp. 742-746).
Using Google Web Fonts to Make the Web More Beautiful (and Functional) A.
Dawn Shaikh, Senior User Researcher, Google, Inc. Issue 13.1
Does the Typeface of a Resume Impact Our Perception of the Applicant?By
Shaikh, A. D. & Fox, D.