In our on-going pursuit of trying to improve readability and usability of digital products and services, one thing that’s always struck us as odd is the way typography of email applications has been left untouched since the early days of the internet. Even modern applications released in the post-pc era mostly forget about this, focusing on new ways of managing your inbox, various forms of social integration, or on the appearance of a flat surface instead.

We believe that email is about two things. Reading and writing. And that focusing on these two is what would truly move email to where it deserves to be. What we propose here is not a redesign of any particular email application. Neither is it a suggestion as to how we think an email application should be visually styled. It’s an experiment of how email could be functionally improved through the use of better typography, based on the premise that structure is more important than surface.

Opening up most of todays email applications, desktop or web, will look somewhat like the image pictured below. Just as in the case of our previous article, the text here really isn’t optimized for comfortable reading. There was a time when 12 px fonts made sense because pixels were bigger and screens smaller, meaning text would render larger and lines would automatically break at somewhat appropriate lengths. But 15 years later the pixels are smaller, the monitors bigger, and digital typography needs to catch up with technology in order to be functional again.

Since we prefer to construct our grids based on typography rather than the other way around, we set out by defining the body with a 700 px wide paragraph set in Minion Pro 22 px. This gives us a perceived text size similar to that of a regular printed textbook, and a comfortable measure of around 12 words per line. We also add a simple baseline grid based on the leading of 32 px. The baseline grid will help us keep the vertical rhythm while adding the rest of the elements and buttons.

Secondly we start to add additional elements like reply, delete, and compose buttons, sender and date, to complete the functions of a basic read view while still keeping the actual text as the main focus area.

Going further we add a basic inbox to the left, following the same baseline grid and vertical rhythm. The top menu is separated from the rest of the UI, and the text view is horizontally centered with fluid margins on each side that would either shrink or grow depending on the screen size.

Putting our experiment in context, we quickly realize that without having sacrificed much, we are presented with an email experience that is highly familiar, yet more approachable and certainly much easier to read.

The write view uses the same open typography as the read view, staying clear of boxes and input fields and focusing completely on the words instead. Quoted text is automatically greyed out to not interfere with the rest of the text.

Readability is especially improved for longer texts who benefit even more from being properly formated. Scaling down the window would wrap the text to shorter lines. Making it bigger would not make the lines longer, but rather increase the margins, keeping the lines at 75 characters.

An approach like this could be applied to virtually any email application, native or web, and would work no matter what visual style was ultimately desired. Applications like iA Writer, and websites like Medium have already taken the first big steps towards bringing interactive type up to date with technology, and we can’t wait to see how other text oriented products and services will follow along, focusing on what really matters.