ART258: Typography Test Using Google Doc, CodePen, and Google Fonts

Web Typography Design

Today’s class was about how to select fonts for headings and paragraph combinations.

First, we open a new Google doc and create lots of combinations. Example.

Second, we used Codepen.io to look the fonts on the web. Example.

<pre>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio vel lectus tempus porttitor nec sit amet augue. Proin at justo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim nec justo sed consectetur. Nulla porta vitae neque eget cursus. Fusce vitae dolor id turpis commodo pulvinar in vel massa. Donec semper ipsum in orci condimentum tincidunt.</p>

<h1>Lorem ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis odio vel lectus tempus porttitor nec sit amet augue. Proin at justo turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi dignissim nec justo sed consectetur. Nulla porta vitae neque eget cursus. Fusce vitae dolor id turpis commodo pulvinar in vel massa. Donec semper ipsum in orci condimentum tincidunt.</p>

</pre>

Type Specimen

reliablepsd.com from Melisa’s ART249 resource

Check leading Heading (1) Text (1.5) etc.

TypeWolf

http://play.typedetail.com/

loading https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900&amp;subset=japanese%27 and

http://play.typedetail.com/