1910: Typography / by john cheng

Typography is an extremely important element when approaching design. 1910 has a wonderful crash course break down of using type properly with a functional perspective.

1. Text Size

The base premise is to let the content shape the grid rather than the other way around, so we usually start by deciding on a text size for the body copy. We approach this not as a visual or stylistic decision, but rather one based on functional requirements such as reading distance (between user and device) and type of application (webpage, desktop UI, console UI, etc.).

The idea is that since text is meant to be read, our task is to make the process of reading it as comfortable as possible. This means that whoever reading should be able to do so without straining their eyes or having to move closer to (or further from) the screen. Just as if they were comfortably reading a book from their favorite armchair.

To achieve this we need to make sure that the perceived text size (taking the viewing distance into account) rather than the metric text size makes sense. The further away from the screen, the bigger the text needs to be. Currently we find between 18 and 22 px to be reasonable for desktop webpages, 12 to 16 px for complex desktop UI’s, and 24 to 28 px for console UI’s.

If in doubt, just grab a camera and take a picture of the text from the desired viewing distance and compare this to a picture of a page from a regular textbook taken from 30 to 40 cm away. Alternatively hold the book somewhere between yourself and the screen while keeping one of your eyes closed. If the digital text is smaller than the printed one you’ll want to go bigger.

2. Measure

The second thing to do is deciding on a preliminary measure for the body. We’ll come back to set the exact value later (matching it to our columns), but before we can calculate the columns we’ll need to know roughly what kind of measure is desired. At least to the point of knowing if the text will span over one or more columns, or (in the case of certain user interfaces) if it won’t be running long at all, but rather consist of single words, buttons or labels.

For reference, optimal measure for running text is usually considered to be between 55 to 75 characters for one column, or between 40 to 50 characters for multiple columns.


If you like what you've read so far and want to read more about Leading, Base Units, Columns & Gutters, go to the 1910 blog!



Source: http://blog.weare1910.com/