Rodrigo Osornio
Product designer
Explorations about ux, ui, illustration and code.

Product design & typography.

Why product designers should be typography maestros?

I mean, being a typographer is a profession that requires experience, it combines technical skills, knowledge of history, passion for details and aesthetic intuition, not-so-easy abilities to acquire. Most probably as a ux-ui you wont be creating new typographies, nevertheless being able to select the correct fonts and styling them correctly can radically improve the quality of an interface.

Let’s make a parenthesis to talk about the fuzzy line between the ux and the ui design. The user experience approach does not necessarily have to solve every problem with a digital interface. Other outputs like audio, VR and haptic design are starting to become relevant, but it’s true that nowadays a vast majority of the ux projects lead up to visual interfaces. Having said that, probably it’s more accurate to relate the typography skill to the ui, but if you are also a ux that loves the language in general, knowing the basis about typography will certainly help you appreciate the written language.

Probably you have seen one of those books or magazines that in combination with a good content, create a delightful experience using correctly the typography -perfectly synchronized styles, precise font size, proper text emphasis, proportional line-height, suitable indents and bullets, decorators and the very important white space⁠- probably you weren’t consciously aware, but for sure the reading experience was good, if you look carefully you will find a great composition created only with pure text and empty spaces. This same situation may be replicated in websites and blogs, and there are a lot of great examples out there, but the truth is that a large number the website and apps creators, in terms of typography basically drive only according to the rules of not using Comic sans and styling the titles bigger. In practical terms this may work, sometimes you can even use Comic sans, but if you want to create delightful and functional interfaces that contain text, you may want to immerse yourself in this knowledge, that will certainly improve your creations.

In my case, since I was a child I have always loved the books, all kind of books, novels, technical, illustrated, poetry, etc. My father used to have a big collection that lived all around the house, not all the time I read them, sometimes I just took one of them and look at their construction, the materials and of course the text and its layout. At the beginning I wasn’t consciously aware of this details, when I started to define my career in visual arts and design i started becoming more conscious about this. A little bit by accident I enrolled in a course of typography in the university and it was like stepping into a big drawer of knowledge. Learning about the serifs, the ligatures, the obliques, the kernel, the history of how the humans have used the text during time and basically knowing that there are people who spend their time creating typefaces was amazing.

At the same time while practicing my back-then-hobby, I learned about html and styling with css, I realized that the creators of the html and css did cared about typography and text styling, because they provided a great tool for typography lovers, that in most of the cases is underused. I don’t mean that there aren’t people using incredibly typefaces, there are several typography masters around making wonderful digital things. This text is just to highlight this relation and tell my personal story with these topics.

Finally, I would like to suggest two books that have been very useful for me in this field. First, The elements of typographic style by Robert Bringhurst a great book that tackles the history and the technical knowledge of the typography and also gives some advises about how to use, combine and style typefaces. The second one is Making and breaking the grid by Timothy Samara, this one is not fully focused on typography but I think that the big picture of text compositions are the grids and the interaction with other types of content like images and empty spaces.

So take advantage of typography and enjoy when you find a nice application of it!