Goal

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.

Objective

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.

Reading

• Rob­bins, Ch 5, p 71–94 and Ch 12, p 203–232
• https://webdesign.tutsplus.com/articles/taking-the-erm-out-of-ems–webdesign-12321
• https://j.eremy.net/confused-about-rem-and-em/
• http://​snook​.ca/​a​r​c​h​i​v​e​s​/​h​t​m​l​_​a​n​d​_​c​s​s​/​f​o​n​t​-​s​i​z​e​-​w​i​t​h​-​rem
• http://​www​.alistapart​.com/​a​r​t​i​c​l​e​s​/​r​e​a​l​-​w​e​b​-​t​y​p​e​-​i​n​-​r​e​a​l​-​w​e​b​-​c​o​n​t​e​xt/
• http://​www​.google​.com/​w​e​b​f​o​nts
• http://​www​.fontsquir​rel​.com/
• http://​type​-scale​.com
• http://​pxtoem​.com

Exercise:

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

Materials

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