Typography Specimen Tests

Are you my Type? Let’s find out…

Quick Hands-on Google Docs Exercise

Check out the two Google Docs examples below: one containing raw, unset type and the other stylized using Google Fonts. Using Google Docs, create your own type specimen test starting from (almost) scratch using the raw unset text. Take advantage of Google Doc’s support of Google [web] Fonts by experimenting with different font families, weights, and styles.

Google Docs Example of Raw Unset Text

Open in Google Docs

Google Docs Example of Set and Styled Text

Open in Google Docs

Quick Hands-on Coding Exercise

Try to solve the challenge below by doing the following: in the first code example below, click on the “edit in codepen” button in the upper right, then format (set) the type using html markup, then style it using css and Google Fonts.

Code Example of Text Without HTML Markup or CSS Styling

See the Pen Typography Specimen Test – Incomplete by kccnma (@kccnma) on CodePen.0

Note how the browser ignores line breaks.

Code Example of Text With HTML Markup and CSS Styling

See the Pen Typography Specimen Test – Example #1 by kccnma (@kccnma) on CodePen.0

Note the use of Google Fonts.

Go Further!

Having fun? Here are two more test exercises for you to try: 1) multiple type pairings (in one doc/pen) and 2) multiple type specimens (in one doc/pen):

Type Pairing Tests

See the Pen Type Pairing Test by kccnma (@kccnma) on CodePen.0

Type Setting Tests

See the Pen Type Set Test by kccnma (@kccnma) on CodePen.0

Good Job!

If you completed these exercises, nice work! Setting and styling type with code is fun, right? 🙂