1. Between the Lines

    Since we wrote about grids and how we work with typography, a few people have asked us why we tend to place text between (or sometimes straight on) the baselines, rather that on top of them. There are two main reasons for this which we’ll quickly explain below.



    The first reason is that if we want to keep a consistent vertical distance between objects above and below the text while still aligning those objects to the grid, placing the text on top of the lines would make this impossible, as shown below.



    Placing the text between the lines instead will keep the vertical distances equal, or at even multiples of the baseline height, while still keeping all objects perfectly aligned to the grid.



    The other reason is that if we use buttons or similar objects which contains text within the shape, we want both the shape itself and the text inside of it to align to the grid. By placing the text either between (or straight on) the baselines this can be achieved, as shown in the first column, while placing it on top of the baselines would either misalign the text from the button shape (column 2) or the button shape from the grid (column 3).



    That pretty much sums it up! If you have any input on the subject, feel free to drop us a mail or give us a shout on twitter. The original article on grids from typography can be found here.

     


  2. A Typographic Approach to Email

    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.

    image


    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.

    image


    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.

    image


    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.

    image


    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.

    image


    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.

    image


    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.

    image


    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.

    image


    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.

     


  3. Recommended Reading

    We love to read about design and have earned much of our theoretical knowledge through books and online recourses. This list contains some of our favorites, that have in one way or another affected how we run our business or practice our craft.

    image


    On the Craft

    - Logo Design Love (David Airey)
    - The Design Method (Eric Karjaluoto)
    - Thinking With Type (Ellen Lupton)
    - Graphic Design Referenced (Bryony Gomez-Palacio)
    - Graphic Design School (David Dabner)
    - Graphic Design Rules (Peter Dawson)
    - Less and More (Klaus Klemp)
    - Dieter Rams - As Little Design as Possible (Sophie Lovell)


    On the Business

    - How To Be a Graphic Designer (Adrian Shaughnessy)
    - How to Think Like a Great Graphic Designer (Debbie Millman)
    - Work for Money, Design for Love (David Airey)
    - Studio Culture (Adrian Shaughnessy)
    - Insanely Simple (Ken Segall)
    - Steve Jobs (Walter Isacsson)
    - Jonathan Ive (Leander Kahney)
    - Everything I Know (Paul Jarvis)


    Online Resources

    - Logos, Flags, and Escutcheons (Paul Rand)
    - A Reader First Internet (Paul Jarvis)
    - Responsive Typography: The Basics (Oliver Reichenstein)
    - Butterick’s Practical Typography (Matthew Butterick)
    - Thinking With Type (Ellen Lupton)

     


  4. A Readable Wikipedia

    We love Wikipedia. The idea of a constantly updated knowledge base where everyone is welcome to read and contribute is staggering, and we dip into this great pool of content on an almost daily basis at 1910. However, having spent the last three years learning more about typography has made us aware of its limitations. While Wikipedia is great for learning, it simply does not provide the best possible environment to do this.

    While big parts of the internet have gone through an amazing journey in terms of typography these last years, Wikipedia’s reading experience is still stuck in the 90’s. We wanted to take a few days and propose a direction through which Wikipedia could move forward, focusing on articles and reading without necessarily having to change too much of what it is and should continue to be.

    We do realize that this humble experiment of ours is uninformed, and that what we propose here would have to be reconsidered if done for real, but for the sake of getting the point across we wanted to focus on one thing only – making Wikipedia readable.

    image


    Wikipedia Today

    Wikipedia today is great in terms of content but not in terms of presentation. For a site with the core purpose of delivering articles to readers, the reading experience just isn’t what it should be. The text is too small, the lines are too long and the leading is too tight. Pictures are tiny and the general layout includes a lot of visual noise that distracts you from the actual reading.

    image


    Constructing the Grid

    As always when constructing grids we like to start with the typography. We wanted to push the content to the center, use a readable text size, fix the measure at an appropriate length, increase the leading, make the images bigger, and provide a proper structure with adequate white space and an easy to follow hierarchy.

    On desktop, we wanted to make room for the main text paragraph and an additional side-bar including images and tables to the right. We also wanted a design that could easily adapt from desktop, to tablet and mobile, without requiring additional apps or mobile versions of the site.

    Starting with the text size (as described in detail here) we eventually ended up with an 8 column grid where the body would span over the first four. The grid would then scale down to 4 columns on tablets and 2 columns on phones, moving side-bar content below it’s corresponding paragraphs.

    image


    The Desktop

    With the primary body column and side-bar already in place, populating the rest of the page was relatively straight forward. We wanted the header to focus on search and made the old side-menu horizontal and placed as a secondary header, not to distract you from the reading while scrolling down the page.

    The rest of the elements were basically left unchanged apart from being adjusted to fit the new grid and structure. The typefaces and colors were left similar. The result is a page that still looks and feels very much like Wikipedia, but is much easier to read.

    image


    The Tablet

    The tablet version scales the grid down to four columns, moving the side-bar content below it’s corresponding paragraphs. Other than that not much is changed. The second header menu is hidden and accessible from a menu button in primary header.

    image


    The Phone

    The mobile version scales the grid down to two columns with shorter lines to keep the text at a readable size. Secondary sections are closed by default and oped by tapping the headline, to make articles less heavy to scroll through.

    image


    Conclusion

    While these sketches are far from feature full, we do think they provide an insight into how big of a role typography and grid structure plays in making the web accessible today. This is the Wikipedia we ourselves would like to use, and we greatly look forward to see how Wikipedia will develop in the following years, in regards to making the site more pleasant to read.

     


  5. Purpose as Process

    Approaching new projects we have a set of core beliefs guiding us through the process. We believe that design needs to pinpoint and focus on a primary goal in order to be effective. We believe that unnecessary distractions weaken the experience of a product and diminishes it’s perceived value. We believe that design needs to be structured from the ground up to serve a primary idea in order to become truly intuitive and long lasting.

    Ultimately we believe that what’s best for the user is what’s best for the product, and that faithfully letting design focus on the single most important goal is the best way to achieve this. Following these beliefs, here is a simplified rundown of our basic process for approaching new projects at 1910.


    1. Determine the function of the product from a user standpoint. This might not always align with what the client initially asks for so make sure to fully understand what actual value the service has to offer before automatically following the brief.

    2. Remove or minimize all unnecessary elements, leaving only what’s vital to accomplish the essential goal. This might again not follow the initial brief so make sure to always explain and motivate why such a thing is important.

    3. Construct a foundation (i.e. a grid) tailored to keep the essentials in focus and the path to accomplishment as short as possible. Removing steps means removing frustration and in the end, keeping users happy.


    That’s really all there is to it. A happy user is a loyal user, and loyal users are what ultimately build brands. If you’d like to read more about how we go on constructing our grids you can do so here.