How I chose a typeface
I needed to find a typeface for our product, for our communications and for our brand Red Sift. As a designer I have worked for many years with typography and studied the fundamentals at Central Saint Martins, however choosing a typeface for a brand presented an opportunity to dig deeper and discover how they came to exist and how choosing one can affect a product and business.
Red Sift is a platform that uses intelligent Sifts (think of them as Apps for Data) and Bots to deliver insight from your data so you can focus on what matters.
For Red Sift to effectively deliver insight, we use data visualizations. They sit alongside other data in places such as Gmail or Slack and can also be viewed in our dedicated dashboard. Furthermore we have a catalogue to help discover the most appropriate Sifts for you and a website to attract and inform customers.
A large part of communication across all of these areas relies on typography. Letters, words, numbers and symbols that annotate the visualizations as well as, headings and body copy. Our product is digital and cloud based delineating various decisions for choosing appropriate typography.
In order to make informed and educated decisions on which typefaces are most useful for a product it is helpful to look back and understand the history. Appreciation for the evolution of typeface gives one a solid context to make decisions from. A method to narrow down the choice for effective results.
Origins of script
A script or orthography, is a convention for representing the units of a spoken language by making marks. The earliest evidence of this is Cuneiform and Hieroglyphics.
Cuneiform was created by the Sumerians of Mesopotamia in the city of Uruk around 3200 BCE. They are phonograms (representation of sound).
Hieroglyphs were created by the ancient Egyptians also at around 3200 BCE. They are phonograms, ideograms (representation of ideas) and determinatives (to help make words clearer and mark the end of words, as there were no gaps). Only around 3% of the population were literate. Hieroglyphics were later simplified into Demotic, Coptic and Semitic languages. (Semitic alphabet evolution Known as Abjads.)
The Rosetta stone contains Hieroglyphic, Demotic and ancient Greek scripts, it was instrumental in understanding the evolution of typography and the transition to modern scripts.
Greek script is an evolution from Abjads and differs by introducing vowels as well as consonants. This later developed into the latin Alphabet, which was later refined by the Roman Empire and has since become the most used script globally by around 4.9 billion people.
(The rest of this article will focus on Latin type as Chinese, Arabic, Russian and Indian scripts along with the many others that exist would need an article each to go through their respective design and use.)
These letters and numbers were carved in Roman imperial capitals, painted in Rustic capitals and written in Roman cursive for everyday use. During the fourth and fifth centuries CE the Roman empire fell but writing was kept alive by the church in monasteries throughout Europe, mostly by copying the new testament.
Charlemagne the first recognised emperor of western Europe (after the fall of the Roman empire) promoted scholarship, and gathered a crowd of scribes. Alcuin a great scholar, was invited by Charlemagne to become a teacher at the Carolingian court where he remained a figure in the 780s and ’90s. Alcuin developed the style of calligraphy known as the Caroline, which evolved into Gothic Script in the 11th century in order to fit more characters on a page helping people produce more books.
Writing books by hand was a lengthy process, limiting the spread of knowledge. The need to speed up the process was identified and a solution would soon be discovered.
Origins of typeface
Wooden movable type by Bi Sheng in China was the first instance of a typeface in around 1040 CE. However it was abandoned due to the unevenness of the wood after being soaked in ink. Wooden moveable type was also briefly used in Europe from around 1400 CE until Gutenberg invented the printing press in 1440 using the popular Gothic Script.
The Gutenberg printing press used a set of metal letters that were placed into a block, rolled in ink and pressed into a piece of paper. The metal allowed detail to remain constant over a long period of use even under the high pressure that was needed for this printing technique. The proliferation of books created a dramatic increase in literacy especially in Europe. Literacy being fundamental to informed decision-making increases the rate of progress both personally and communally and this is evident in Europe as it was brought out of the dark ages.
Scribes were no longer needed and the technology now available allowed for a greater control between thick and thin strokes. Old Style was created as an easier to read typeface which reintroduced the serif that was originally seen in the Roman empire. The reasons for the original serifs (tails on the end of letters) is not documented but many believe that the Romans would paint the letters before carving them and just as a painters brush would leave tails at the end of letter the masons would copy this in their carving. An alternative explanation is that the serifs help to join the letters and therefore the flow of reading is eased. Serif design and overall typography design was standardised with industrialisation, a set of standards for topographic anatomy was created.
In the early 1814’s the industrial revolution brought about the steam powered press, mass communication and mass production followed, creating a need for new fonts. The creation of signage, posters, newspapers and mass produced products meant it was increasingly challenging to catch people’s attention with text. To address this typefaces increased in sizes and more elaborate styles were created. Slab Serif, and Egyptian typefaces were some of the most common during this period.
In 1883 the Linotype machine was invented in the USA, it could compile a line of type mechanically speeding up the printing process considerably. However there was no room for error as once set it could not be changed. The conception of the independent matrix machine came shortly after in 1885 which fixed this issue.
The art of typography
The boom in typography production during the 19th and 20th century mirrored soaring of global literacy. A vast number of fonts were made to cater to each and everyone’s varied tastes and styles. The need to stand out in the ever going crowded typographic space had never been greater. With this mix of styles it became an art form to create and choose the appropriate one and to understand the strengths and weakness of each. The reasons for using one over another or using more than one at a time. This moment in typography is epitomised by the infamous Eric Gill essay in 1931.
During the early 20th century a myriad of typefaces came from everywhere as the printed word became the ubiquitous way to communicate. During the mid 20th century the television (CRT display) became the first widely used screen to display text but mainly in the broadcasted images.
Digital
Early computers used large, low quality typefaces due to the limitations of the screens and graphics processing, displaying only uppercase ASCII using a set bitmap typeface.
As graphics processing increased and screens improved, the clarity of the typeface that could be displayed was refined. Through the late 20th century, the availability of fonts to use on computers rapidly increased. However the design quality implemented in graphical user interfaces on computers was varied. Apple lead the way in design including in the use of typefaces. Steve Jobs took classes in calligraphy and believed the average man not just specialists could have a favourite font, carrying this mantra through to his computers he introduced font menus.
At the turn of the century typeface use on computers was either simplistic or haphazard. Amazon opened in 1994 with a web page design that by today’s standards would be considered not only dated but questionable. People were keen to use the internet but the connection speed and graphical power of computers was still growing. In the early 21st century, computers improved, the internet speed up and so the ability to inject sophisticated design and typography was possible.
Early mobile phones that had displays had monochrome ones, with screens only capable of displaying low resolutions originally similar to calculators and then only lower than early computers, making font incredibly simplistic and pixilated. In the last 15 years there has been an explosion of technological improvements at an exponential rate. Moving screen technology to the point of near perfect clarity. Computer power being more than capable of displaying the most complex of content even on relatively inexpensive mobile devices.
For a while typography was somewhat of a lost art in the digital space (mainly due to limitations) and only basics were implemented. However in the last few years we have seen the resurgence of the art of typography, filling our digital worlds with well thought through, well crafted and well displayed typographic content.
Choosing typefaces for Red Sift
Choosing a typeface for your product has always been important, a key method to communicating effectively as part of broader design choices. Typography can when chosen carefully enhance the message being delivered. Our aim at Red Sift is to deliver insight from your data. Finding the best typeface for our product has been a key part of the design process. The more effectively we can deliver the insights, the better our products will be and we aim to make the best products possible.
Data visualizations are the key communicating element of our product and a distraction free minimalist environment, allows the user to easily and quickly absorb the insights. Our data visualizations consist of predominantly primary shapes and angular elements as these are the easiest to read. The Red Sift design style revolves around our data visualizations, echoing their shapes and angles.
The key elements for choosing fonts are therefore angular and minimalist, to ensure all the elements work harmoniously alongside each other. This style can then cascade out around our product to constantly reinforce the focus creating a brand identity that will be recognisable on any of our touch points. Of course the legibility is also paramount and a great deal of research has gone into the legibility of typography and the impact it has on effectively communicating.
Google’s font project aims to deliver “beautiful, readable, accessible and open” source fonts for everyone to use on all projects both personal and commercial, completely free. It delivers great font design easily and reliably to anyone using text on the web. When choosing fonts to use on the web there is no need to consider the limitations of print however one does need to understand and appreciate the limitations and opportunities of screen resolution and size. Google’s font project takes into consideration how and where fonts are likely to be displayed on the web and aims to provide ideal designs. We have therefore decided to make use of this service to streamline our font integration.
Headings for Red Sift
Our headings will be used predominantly as major headline navigation or on top of imagery on hero elements. Usually in plenty of space.
The criteria:
- Sans-serif to compliment the data visulizations.
- Angular to echo our style
- Bold to stand out on images
- Large proportions to work well in large spaces.
- Work well at multiple sizes
The short list was:
- Orbitron
- Electrolize
- Sarpanch
- Aldrich
Of these Electrolize had the most distinctive memorable character with the least number of unusual elements, and angles that best matched our designs and echoed our minimalist style.
Body copy
This font is predominantly for annotating the data visualizations and brief descriptions of our products. A need for minimalism and utmost clarity is paramount. Major factors affecting clarity and legibility are as follows.
The criteria:
- Sans-serif to scale well at small sizes and on lower resolution displays.
- Large X height especially for smaller sizes
- Distinguishable characters
- Wide proportions
- Loose letter spacing
- A balanced stroke contrast.
- Work well at multiple weights
The short list was:
- Avant Garde
- Helvetica
- Raleway
- Roboto
The winner:
Of these Raleway had the best balance of all our requirements, especially fulfilling them without losing a sense of character.
Monospaced numbers
The primary function is legibility as these will be heavily used in our data visualizations. Using a monospaced font will allow labels and tables will line up properly and the wide proportions increase legibility. As it will be used heavily in the key element of communication it was also important to find a font that would reinforce our character and brand.
The criteria:
- Monospaced.
- Incredibly legible
- Minimalistic in style
- Wide proportions
- Work perfectly at multiple sizes
The short list was:
- Inconsolata
- PT Mono
- Source Code Pro
- Ubuntu Mono
Of these Source Code Pro was the easiest to read and closest to our brand identity.
Fallback fonts
We needed a fall back font due to potential browser and mobile limitations, this still needed to fulfill our criteria but also needed to be a font supported by all browsers and guaranteed to work without fail.
The criteria:
- Sans-serif to scale well at small sizes and on lower resolution displays.
- Large X height especially for smaller sizes
- Distinguishable characters
- Match well to our body font
- Work well at multiple weights
The short list was:
- Arial
- Helvetica
- Tahoma
- Trebuchet MS
Of these we chose Trebuchet MS as the closest to our primary font of Raleway.
Implementation
We have implemented the aforementioned fonts across our product on the basis of research and hypothesis that it will work best for us. Through testing and evaluation we will reassess and adapt accordingly, making modification where necessary, re-testing and so on, constantly improving our product.
Conclusion
Digging deeper and discovering the story of typography, significantly helped to shape decisions when choosing a typeface for Red Sift. This process produced a reasoned methodology on how to chose a typeface. Establishing the need, outlining a criteria and choosing a short list. Once this was in place, I felt confident to make informed and well thought through decisions.
