Web Design Is 95% Typography – And in Mobile?

IMG_1168The first statement is from Oliver Richentstein, iA, in his article Web Design Is 95% Typography.

Richetstein’s article is a jewel. But how can we use it in Mobile design?

The postscript «- And Mobile?» is reflecting Nick Babich article in Medium: Mobile UX: Great Typography Enables Clear Communication.

The latter is a brilliant article, also leaving some rules to help us in our daily work to make our communication clear. I even inspired me to write this post!

Here are the rules of Babich that I’ll try to use:

  • Number of characters per line: «…use 30–40 characters per line for mobile.»
  • Line Space: «A good place to start is in the 10 to 20 percent range.»
  • Contrast: «Small text should have a contrast ratio of at least 4.5:1 against its background.»
«Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.»
  • Style size: Text isn’t smaller than 11 points, even when the user chooses the extra-small text size.
Text always uses either regular or medium weight; it doesn’t use light or bold because light and bold weights don’t read well at small sizes.

These rules go well with what I’ve learned before. In the earliest nineties, Magne Kvalbein, a typographer in Hamar, Norway, taught me the principles he had used in setting books. I used them to create the cards holding the user manual of my first minimalistic accounting program.

Kvalbein’s rules I’ve used have been:

  • 7–9 words per line
  • Left straight margin and right flushing margin
  • More space between lines

In the last year, I’ve been practicing and learning typography every day. How? – By using iA Writer on Mac and iPhone. Just working in a typographic editor help you to sharpen the sense of typography.

I recently tried to apply the rules in a GitHub pages project web I’ve sat up for a local discussion group in Villajoyosa, Spain. I used the Pixyll theme for Jekyll. In the file _variables.scss I changed the following features:

  • increased the default font-size from 14 to 15
  • the line-height from 1.5 to 1.6.
  • the page-width from 42rem to 35rem

You can see the source code after my changes here

This screenshot from an iPhone 6s Plus is quite readable.

What’s missing

I wish I could set the CSS to set up Babich’s rules automatically.

I also would like to reduce the margins to facilitate larger and more readable style-size.

iPhone 6s Plus could be the reading machine ever

I expect Apple to increase the screen slightly without increasing the iPhone size. Together with a CSS version of Babich rules, it could make the iPhone ideal for reading – also for speed reading – and even for people with slight reading problems.

Call to Action: Create a «Babich» CSS for Jekyll Github Pages!

I’ve read enough CSS to call others to try this challenge. I’ll give it all the support I could do in definition, specifications, and marketing.