Typography Examples (Assignment 3)

CP3170 Assignment 3: Typography

Two examples of each of: a serif font, a sans serif font, a proportional font, a monospaced font. (Eight examples total)

Serif font: Times New Roman
Serif font: Georgia

Sans serif font: Arial
Sans serif font: Tahoma

Proportional font: Arial
Proportional font: Verdana

Monospaced font: Courier New
Monospaced font: Lucida Console

Choose a font. Check the default font size for your browser. Display an example of a font size that is 50% smaller and a size that is 50% larger. Do this is four ways for each: using pixels, using points, using percentages, and using em units. (Eight examples total)

Pixels- 50% smaller
Pixels- Default
Pixels- 50% larger

Points- 50% smaller
Points- Default
Points- 50% larger

Percentages- 50% smaller
Percentages- Default
Percentages- 50% larger

Em- 50% smaller
Em- Default
Em- 50% larger

Choose a font and a size. Show an example of the default line height, a larger line height that you still consider pleasing, a larger line height that you consider too big, a smaller line height that you still consider pleasing, and a line height that you consider too small. (Five examples total)

Default line height

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel euismod eros. Ut mauris quam, suscipit finibus metus non, semper vulputate nibh. Nunc ornare luctus diam quis ultricies. Vivamus cursus posuere risus, sit amet tristique purus congue vitae. Maecenas sed tempor quam, vel fringilla arcu. Phasellus mattis ullamcorper dolor, quis scelerisque ipsum sollicitudin ut. Sed ornare, leo eu lacinia condimentum, est risus blandit odio, non volutpat mauris felis ullamcorper nulla. Proin convallis posuere enim.

Larger line height - Pleasing

Larger line height - Too big

Smaller line height - Pleasing

Smaller line height - Too small

Choose a font and a size. Show an example of the default letter spacing, a larger spacing that you still consider pleasing, a larger spacing that you consider too big, a smaller spacing that you still consider pleasing, and a smaller spacing that you consider too small. (Five examples total)

Default letter spacing

Larger letter spacing - Pleasing

Larger letter spacing - Too big

Smaller letter spacing - Pleasing

Smaller letter spacing - Too small

Choose a font and a size. Display an example of a paragraph using a liquid layout and an example of a paragraph using a fixed layout. Test the layouts by resizing the browser. (Two examples total)

Liquid layout

Fixed layout

Show one example of each of the CSS properties: font-style, font-weight, font-variant, and text-align. (Four examples total)

Font-style: italic

Font-weight: 800

Font-variant: small-caps

Text-align: center

Show one example of each of: a light-on-dark text block that you like, a light-on-dark text block that you don't like, a dark-on-light text block that you like, and a dark-on-light text block that you don't like. (Four examples total)

Light-on-dark text block - Pleasing

Light-on-dark text block - Not pleasing

Dark-on-light text block - Pleasing

Dark-on-light text block - Not pleasing

*** THE END ***