The 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.
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.