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.
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.
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.
Type Setting Tests
See the Pen Type Set Test by kccnma (@kccnma) on CodePen.
Good Job!
If you completed these exercises, nice work! Setting and styling type with code is fun, right? 🙂