June Rockwell

11 Things I Didn’t Know About Typography Before

Coming from a Computer Science background, I never had any education about Typography. I’ve never even heard of it even when I was already making complex websites. When I finally heard about it repeatedly, I didn’t really know that it’s an important part of making an app or a website since I didn’t know what it was all about in the first place. So I never paid much attention. I thought it was just about nitpicking fonts and exaggerating user interface design. But then again I always had this thinking in the back of my mind that somehow it plays a really good role in the design process. So I decided to buy this book On Web Typography written by Jason Santa Maria. I waited for a month for the paperback version to be published to get my hands on it. While I was waiting, I thought I wouldn’t learn much because it might be too complex to learn and most of it might be unnecessary. So I figured I’d just take the super important stuff and learn that. But I was so dead wrong! This book blew my mind just after reading the first two chapters! I learned more than I ever imagined about Typography. That’s why I’m claiming myself as a Type Nerd and I feel very happy for that. Here’s a list of what I learned and why I think I’m now a Type Nerd.

1. People don’t read the way you read, or the way you thought they read.

Depending on where our readers are determines their availability. Just like how we don’t get to decide which screen size our readers read from, we don’t get to decide where they read our content. Our readers might be in a bus-stop reading with their iPhone 4 or a bigger screen phone like Samsung Galaxy S4 or an HTC One. They might be at their office desk multitasking in front of a computer having a 13” screen or bigger. One example from the book is that the reader might be in a loud coffee shop getting distracted by other patrons. How people read also depends if they’re specifically looking for something, how fast they want to find that something that they might be just scanning what we’ve written without reading everything we’ve slaved to write. There’s a huge possibility that they’re not actually reading everything.

2. The Legibility of a word or sentence doesn’t make it readable.

This is true from personal experience. I’ve dabbled with letterings as a hobby. I even write in cursive, all caps, shorthand, and longhand. I just write however I feel like writing on a certain day. Whenever I do any of those, I always try to make what I write legible. So I thought people could read what I write. But when they do read it, they apparently misread at least one word. That used to bother me back in high school because I thought the other kids were just messing with me or my teacher was just giving me a hard time. But no, as Jason said, “just because something is legible doesn’t mean it’s readable.”

A photo posted by June Rockwell (@junerockwell) on Aug 8, 2014 at 12:32pm PDT

3. There’s a difference between typefaces and fonts

I’ve heard these two words before and I thought they were both interchangeable. But Typefaces are the style or a family of styles. Verdana and Lucida Grande are examples. A Font, on the other hand, is the format of that design. The binary, if you will. Examples are .woff, .ttf, and .eot

4. When we read our eyes do two things

One of the things is called Saccades. It’s the “lightning fast hops across a line of text.” Jason had another definition but this one works for me. The other thing is Fixation. It’s when “our eyes stop for a fraction of a second.” I never knew those. I always just read with my eyes quiet or out loud, concentrating or frivolously getting entertained. I didn’t know our eyes perform Saccades and Fixation. I thought we just read straight across the line or sentence.

5. Typography is how we communicate

We can’t always just use images all time especially when we’re blogging or writing a story. If you wanna write, don’t just put stuff together. You gotta show what you mean. I used to just put stuff together. Fiddle around with CSS line-height, font-size, etc. If it was legible and clean and maybe even colorful, it worked for me. I wasn’t doing typography though. Typography is an art form, an expression through text. You gotta show what you mean so that you can keep your reader reading or guide them through. Express your point rather than just giving adjectives and adverbs.

Just as different musicians perform the same song differently, we can take a variety of approaches to the way we deliver a message.Page 15

We also wanna make our users engaged. If we’re trying to tell a story, our readers can’t really see our facial expression and can’t hear our voice as if we’re there while they’re reading out loud. We wanna give our voice and emphasis on the text as if we’re reading the story to them out loud and engaging them. Two good examples would be from J. K. Rowling on the Harry Potter Series of Books. She uses different typefaces to show Harry Potter’s perspective like if Harry’s reading a letter or a newspaper or magical writings on the wall.

J. K. Rowling demonstrates a situation by italicizing some words in sentences.A page from Harry Potter and the Prisoner of Askaban.

6. I now know what to call serifs, san-serifs, slab, scripts, etc.

There’s also the existence of Blackletter, Old Style and Modern. All of these are called classifications. Finally! I kept saying font families but always felt a strong feeling that they’re not just called that. So now I know what to say when I’m going to talk to a client, a professional typographer or a graphic designer who knows a lot more typography than me. Because honestly, if I’m strongly unsure of what to call something or what I’m talking about, I don’t feel good about it. It’s like misleading someone. It can create miscommunication with others too. Or I have to be detailed and visually explain it to others. But mostly I get this switch turned on in my head that I have to know what this is.

So these classifications, or groupings, narrow one’s search in picking out typefaces. Yay.

…if I’m looking for a typeface to set my new tagline across the top of a website, I may look at more decorative or distinct typefaces first. Page 24

If I’m designing a website that has articles, I’m generally looking at typefaces for running text.Page 23

7. Typefaces have Anatomy

Seriously, I didn’t know this. How can each letter have a part? Before, to me a letter was just one whole thing, but I totally see it differently now. And there are a lot of parts. It reminds me of the dizzying latin words for each part of the human muscular and skeletal system back in my senior high school Anatomy and Physiology class. That class was so hard, we had to memorize and name them off the top of our heads. I guess typographers are letter doctors(?). Haha, just kidding! Anyways, knowing the anatomy helps in understanding typefaces. So instead of me looking at a whole sentence or a word at once, I look more closely, super closely, on letters now. I’m starting to appreciate the styles more differently this way and it feels good. Knowing how to identify the anatomy helps when discussing typography so everyone’s on the same boat bringing “more productive discussions.”

8. I’ve grasp the importance of Typeface Contrast

This contrast helps me describe a typeface. A font has low-contrast because you don’t see any difference in each letter. They all look the same in stroke thickness: They’re uniform. If the letters have a combination of thick and thin, they’re more pronounced or fancy so they’re good for big headings or titles. I like the idea of low contrast for a paragraph but as Jason warns, having very little contrast doesn’t help readers read all the time. I’ve kept that in mind. Incorporating different weights and styles in just one typeface can create contrast too.

9. There’s such a term called X-Height.

Sounds very mathematical, very algebraic. I like math but this term has an easier non-math explanation. X-height applies to lower case letter’s height. There’s a baseline that these letters reach. So if the x-height is quite high, the letters like h and n would become indistinguishable. If the x-height is too low, there’s a lot of contrast between letters which sometimes isn’t too good on running text. This is knowledge I can use when choosing a typeface. It’s important because I don’t want to create too much contrast that readers can’t easily read, and I don’t want to use typefaces with high x-heights because it won’t be readable.

10. Numerals apparently have lower case and upper case.

I thought lower case and upper case only applied to letters. But nope! I think I never knew this because I never got into typography that much, like I said before. But the real big reason is because all the typefaces I’ve seen on any word editor, on any operating system, or any sort of websites, didn’t display this diversity. So I thought they never existed.

11. Each Typeface has a personality

Each typeface has its own personality because each has its their own x-height, stroke weights, em box, apertures, terminals, etc. I mean just by looking at typefaces that look similar to each other, we can see that there’s a difference in each of them. So spelling a word using a selected typeface can give a personality impression from the letters. If we want to go further and understand a typeface’s personality, we can look into its historical background. By learning the history of a typeface, we get to know it’s purpose of existence and why there are so many revivals and remakes. But unlike movies, if we can’t look at the anatomy of typefaces, we can’t sometimes tell the difference between the original typeface and others that inspired it. Take Garamond for example, there are so many revivals and remakes for it. Some of the remakes and revival names have Garamond in it. But don’t confuse them to be the same. I used to back when I didn’t care.

My Conclusion

Typography is awesome and I hope you enjoyed me nerding out! I now have a totally new point of view on Typography. Don’t get me wrong though, I’m not about to start designing typefaces like Typographic artisans such as Hoefler & Frere-Jones and the creative and friendly Jessica Hische. I’m a Type Nerd because I now understand what Typography’s all about and how to apply it to my projects. Lately every time I think of typefaces or when looking at any typefaces that I see in books, billboard signs, logos, or websites, I start looking at x-heights, descenders, stroke contrasts, counter, spine, boxi-ness, roundness, and so on. I just get so aware and excited about it! What gets me even more excited is that I now have a few guidelines or ideas on how to choose typefaces and pair them instead of the good ‘ol days where I just pick Helvetica or Garamond. I actually choose with conscious decisions now based on my new acquired knowledge of typography! One real life example is when I had to design the splash screen of the Neon To Nature App by combining serifs and sans-serifs to create simplicity and harmony. It was hard though.

The Splash Screen of Neon To Nature App.

Oh yeah, don’t let the title On Web Typography fool you. As long as you understand what Jason’s talking about, you can apply this to your mobile apps as well.

Subscribe via Email

Subscribe to RSS Feed

Common Topics

About Me

Hi, I'm June Rockwell. I design & develop websites & mobile apps, preferably for modern browsers, iOS & Android. Since 2010, I've used the LAMP stack with jQuery. But my current favorite is the MEAN stack. Starting 2012, I've made apps using Native iOS & Android SDK's. But as of 2013 I've been
using cross-platform tools such as Titanium SDK & Ionic Framework. I hope that my blog can help anybody out there!