Goal

To under­stand 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 font spec­i­men sam­ple using HTML, CSS and web com­pat­i­ble fonts.

Reading

• Rob­bins, Ch 5, p 71–94 and Ch 12, p 203–232
• http://​web​ty​pog​ra​phy​.net/​i​n​t​ro/
• http://​sixre​vi​sions​.com/​c​s​s​/​f​o​n​t​-​f​a​c​e​-​g​u​i​de/
• 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://​web​fontspec​i​men​.com/
• http://​www​.google​.com/​w​e​b​f​o​nts
• http://​www​.fontsquir​rel​.com/

Reading

• Rob­bins, Ch 5, p 71–94 and Ch 12, p 203–232
• 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://​web​fontspec​i​men​.com/
• http://​www​.google​.com/​w​e​b​f​o​nts
• http://​www​.fontsquir​rel​.com/
• http://​type​-scale​.com
• http://​pxtoem​.com

Exercise:

Visit http://​www​.google​.com/​w​e​b​f​o​nts and http://​www​.fontsquir​rel​.com/ and select a type­face from each. Then visit Web Font Spec­i­men http://​web​fontspec​i​men​.com/ and down­load the “wfs” file folder. Replace the default code using the accom­pa­ny­ing direc­tions for each font. Test your files in Apple Safari and either Mozilla Fire­fox or Google Chrome. Use the Grab app to take a screen shot of browsers tested. Upload the “wfs” folder for each font (two total) and the screen shot images to the appro­pri­ate D2L dropbox.

Exercise:

Using skills learned in pre­vi­ous lessons and the sup­plied tem­plate files, cre­ate a series of typo­graphic spec­i­men sheets demon­strat­ing var­i­ous type­set­ting sys­tems asso­ci­ated with HTML and CSS. Please select an accept­able web font that is respect­ful of readability.

Part One

Using the base HTML file, link to the type_ems.css file plus the pro­vided com­ments and spec­i­fi­ca­tions noted in the HTML file, reset the type to cre­ate a spec­i­men sheet. You are required to use the out­dated “pix­els to ems” sys­tem ref­er­enced in the “Font Siz­ing with Rem” arti­cle ref­er­enced above.

Part Two

Using the base HTML file, link to the type_rems.css file plus the pro­vided com­ments and spec­i­fi­ca­tions noted in the HTML file, reset the type to cre­ate a spec­i­men sheet. You are required to use the “rems” sys­tem ref­er­enced in the “Con­fused About REM and EM?” arti­cle ref­er­enced above.

Assessment

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

Materials

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

Deadlines

Tues­day, Octo­ber 3, 2017. Exer­cise Given.

Tues­day, Octo­ber 3, 2017. All parts due in the appro­pri­ate D2L dropbox.