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/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s