Typography

I’m creating graphics for my Game Programming Physics book. I’m using principles of typography to turn important words into graphics that express their own meaning. I write my books for everyone from a smart eight year old to a fifty year old like me who like to learn new things. My main focus when I write anything though is my high school students. My students are curious and like to have fun with their learning. They don’t enjoy lectures, worksheets, or tests. Most of my students read at a high school level but around a quarter of them speak and read english as a second language. With my books, I like to create graphics that help explain tricky physics topics. Writing a page can take ten minutes, but making the page beautiful can sometimes take a couple days. Using typography to teach is something new to me though and It’s an exciting tool to add to my work.

The opening graphic in the typography chapter of Creating Graphics for Learning and Performance by Linda L. Lohr shows words that “communicate the meaning of different tools, actions, and perceptions (Lohr 2008, p. 210).” For example, the word Organization was chunked up into “Orga, niz, at, and ion” that were all organized into little boxes. The structure of the word was used creatively to also teach the meaning of the word and make the meaning memorable to a learner.

The first graphic I created was the word Force. A force in physics is a push or a pull and I wanted the word to express that. So I imagined what would happen if the word was pushing on something. The letters would get pushed together and a bit deformed.

Image of the word "force" with the letters mashed together.

I used a san serif font called Tahoma because it was just a plain font with a consistent stroke thickness throughout the characters. My thoughts on this graphic were that it was ok, but simple. When I showed all my graphics to my wife, she liked this one the most because it “portrays the meaning of the word the best.”

The second graphic I created was the easiest to create. It took about five minutes to find the right font (Bauhaus 93 Regular) and ten seconds to flip the V and make it bigger to look like an arrow. I think it’s the best of the four due to its simplicity.

The word "Vector" that looks like an arrow.

The next graphic took the longest. I envisioned the word “Forces” with the letters containing arrows pointing in all directions. I had the vision in my head, so I had to go for it. This meant not only using text, but creating text. So I can now add fontographer to my portfolio. I call this font “Forces.”

image showing the word "Forces" with arrows making up the letters.

Kerning is “the action of increasing or decreasing the horizontal letter spacing between individual characters or letters in a word. (Lohr 2008, p. 234). The “o” in the word forces gave me some issues as it just doesn’t take as much space as the “F” next to it. I had to move it over to try to visually center it between the “F” and the “r,” but the “r” is so narrow that it still looks like it needs a little adjustment.

My last graphic transforms the word “code” into a graphic containing code. I used Helvetica bold for this because it has horizontal terminals and has a consistent stroke thickness so the character could be filled with text. My wife Cheryl said that she liked the break-up of the text inside the letters. I spent so much time trying to get rid of the break-up between lines but that is what she liked the most. I think I could improve the image by adding more spaces in the inner text to make the letters break up more. I could also make important programming words larger than the rest.

Image showing the word "code" with computer code making up the letters

References:

Lohr, L. (2008). Creating graphics for learning and performance (2nd ed.). Upper Saddle River, NJ: Pearson Education.

You may also like...