Exercise 13.10: Intermediate Web Typography


To develop the sim­i­lar­i­ties and dif­fer­ences of typo­graphic attrib­utes in print and dig­i­tal deliv­ery media.


Cre­ate a sim­ple web­page that demon­strates the tech­niques and pit­falls of using type in an HTML and CSS document.



Know­ing how HTML and CSS han­dles the var­i­ous tech­niques for typo­graphic selec­tion and siz­ing is key to cre­at­ing an acces­si­ble and aes­thetic page. Each sys­tem has its place and pit­falls, so cre­at­ing a page with these in situ will pro­vide an easy point of com­par­i­son. 

Part One

Cre­ate a sam­ple type spec­i­mens sheet. Add a Google font and cre­ate a sim­ple Type Spec­i­men Sheet using the pro­vided tem­plate. 

Com­press the HTML, CSS file and sub­mit to the appro­pri­ate D2L Drop­box. 

Part Two

Using the pro­vided tem­plate, adapt the HTML and CSS to ful­fill the fol­low­ing con­di­tions as marked on the template:

  1. Default (no, or browser default)
  2. Pix­els
  3. Ems
  4. Rems 
  5. Per­cent

Open the HTML file in a browser to test. Cre­ate a screen shot rep­re­sent­ing all the sec­tions demon­strat­ing the dif­fer­ences of each. Com­press the HTML, CSS and screen shot files and sub­mit to the appro­pri­ate D2L Dropbox.


  • The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading


com­puter, web browser, Adobe Dreamweaver, text editor


As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.