A Book Apart: On Web Typography

09 Aug 2014

My notes from A Book Aparts’s latest publication—On Web Typography by Jason Santa Maria.

On Web Typography

Just because something is legible doesn’t mean it’s readable. Legibility means that text can be interpreted, but that’s like saying tree bark is edible. We’re aiming higher. Readability combines the emotional impact of a design (or lack thereof) with the amount of effort it presumably takes to read. You’ve heard of TL;DR (too long; didn’t read)? Length isn’t the only detractor to reading; poor typography is one too. To paraphrase Stephen Coles, the term readability doesn’t ask simply, “Can you read it?” but “Do you want to read it?”

Most people are short on time. By not caring, by not attending to your typography, you might as well close the browser window for them.

Two common terms you’ll see thrown around when talking about typography are typeface and font. Typeface is the name for the design in full, whether it’s a style or family of styles. For example, Helvetica is a typeface. Font refers to the format or storage mechanism for that design. Helvetica.ttf is a font.

Typefaces can be made up of numerous font files. No matter how many files there are, it’s still one typeface. Nick Sherman gave us a great analogy to remember the distinction: a typeface is to a font as a song is to an mp3.

When it comes to web fonts, a type designer’s intent has big implications for your design. Each web font you choose means a little more wait time for users as browsers load the font file. Some browsers handle that wait by displaying content as assets are still loading. When that happens, you may briefly see page content in a default font and then see it redrawn in the correct font when it’s ready. The effect is a FOUT, or flash of unstyled text.

Proper quotation marks are often overlooked, but it’s important to know the difference. Curly quotes, usually called smart quotes, commonly look like filled-in 6s and 9s. Straight quotes, often called dumb quotes, are usually straight and vertical.

Punctuation is a system. That’s why proper quotation marks and apostrophes look like they’re part of the same family as commas, periods, colons, semicolons, and more, whereas straight quotes don’t.

As soon as you get that reputation among friends and family, they will inevitably ask you the same question: “What’s a good font to use?” It’s a difficult question, because typefaces don’t exist in a vacuum. If you decided to make a painting, you probably wouldn’t start by asking an artist friend, “What color should I use?”

Good fonts cost money because they take a lot of work to become good fonts. They can stretch your budget, but consider this: a type designer’s work provides tools for us to use to make money, and our money gives them the means to keep making tools. We get paid for our work, and they get paid for their work. It’s that simple.

Without contrast, we don’t have hierarchy, and without hierarchy, the typography feels indistinguishable and our readers are left without a map.

Claude Debussy once said that music is the space between notes. Similarly, good typography is as much about the space between the letters as the letters themselves.

Cleaning the homescreen

06 Aug 2014

A couple of weeks ago I did a little decluttering of my iPhone’s homescreen and I’m pretty happy with the outcome.

iPhone Homescreen

My idea was to single out all the apps I use on a daily basis and place them directly on the homescreen; the rest is dropped in the ‘Utilities’ folder where they’re accessed by using the splendid search functionality in iOS 7. The result is this.

  • Runkeeper’s the app I use to track down walks, swimming, bicycling and hiking trips.

  • I use RSS to collect my favorite blogs and my app of choice for reading them is through Reeder.

  • Everything of my digital life goes into Evernote. And with that I mean everything. I used Evernote for years without realizing its full potential. Now it functions as kind of my own personalized database.

  • Safari is my browser of choice.

  • The alarm clock I’m using to get up in the morning is Rise. Beautiful and simple. Design at its best.

  • My preferable choice of listening to music is still through the native app. The organization and overview of the collection is outstanding.

  • Even with the introduction of control center, I still find myself flipping through the Settings app at least once a day.

  • Sunrise is the simple calendar app that I enjoy glancing at to get a quick overview of my day.

  • Mailbox is Dropbox idea of how e-mail software should look and work like. I agree.

  • Todoist is my todo app of choice where I put everything that has to get done. Using it both for personal and work related tasks.

  • Drafts is amazing. When I discovered it, it completely changed the way I do input on the iPhone. Everything that needs to be written—I do it through Drafts, then process it to the correct app—be it to Evernote, Todoist, email or sending a text.

A new home

29 May 2014

This website has been many things over the years. A portfolio, a blog, a landing page for a newsletter and lately it’s been next to nothing. It was time for a refresh.

What I wanted this time was a home. Since I’ve been downgrading a lot on my social media appearance in the last couple of years, I wanted to have a central spot where I could present myself, collect my thoughts, show my projects/experiments and list the great resources I find on the web.


I went for a simple look. I started by defining the navigation and really wanted to avoid using the hamburger menu on a narrow screen. If it’s possible, it’s just so more convenient to let go of that extra tap to reach the navigation items. I also wanted to take advantage of a bigger screen estate if available so the wrappers reach out at 1640px in some places.

New design

I’ve had some kind of love for this purple/pink color I’ve used in recent years and I relate it to the way I am presenting myself. I use it in my keynotes and everywhere I could attach a color to myself. So I just kept riding that wave. The typeface being used is FF Meta Serif Pro. One of my favorites.


WordPress has always been my standard of choice for my personal websites earlier but this time I wanted to go for something more lean and lightweight. My choice fell on Octopress and I am really happy with how it works. Having all my posts and pages as collected markdown documents makes writing and maintenance a joy. Everything in one place. The website also feels so much faster when there is no dependency on a database and deploying new stuff is a blast.


So here it is. My new home for the rest of 2014. There are still many things to come and some things I want to change but I am happy now that I have a great flexible foundation to further build upon.