Typography is the art of transporting ideas. Not by attracting attention to the text, but the message itself.
When done right – typography becomes invisible.
General approach
Typeface
One of our foundational approaches is minimalism, and do as much as possible with as little as possible. To achieve this, we require a typeface that is flexible enough to handle a wide variety of situations, while elegant enough to always feel like it belongs.
We use Neue Haas Unica.
Weights
Continuing the idea of minimalism, we want to reduce variations as much as possible. Instead of using two, three or even four different weights – all our typography is set in regular weight.
Emphasis
To change the tone of a specific word or sentence - to add emphasis - we use italic to make it stand out.
Highlight
To draw attention to an important phrase we enable the option of using a highlight color. This should be done sparingly only.
Type Groups
Typography can be separated into 3 distinct groups: Paragraphs, Titles, and Buttons. These groups have individual and unique purposes and features. Each group comes with a set of variations that should be used accross the website.
Title
Titles intend to draw attention, be visually impactful and create hierarchy.
Paragraph
Paragraphs are the main elements to communicate content. Also they are tailored for readability of longer texts.
Button
Buttons are our interactive elements, helping users navigate and collect information from our digital experiences.
Rich texts
Titles, paragraphs and media combined to a longer piece of content is what we call rich texts. The article you are reading right now is an example of a rich text.
Each element within a rich text has a whitespace defined towards the element placed on top of it. That whitespace equals the lineheight of the element rounded up to a value from our space array.
Type Size Array
All 3 type groups use font sizes predefined in our type size array. In other words, any typography you see on our website should have one of the following font sizes:
Note: these values apply for large devices with full layout container size. For smaller devices, see Responsiveness .
Elaboration
Typography is a powerful tool that is invisible when done correctly – it conveys a message without drawing attention to itself.
Great typography is timeless. Timeless typography is great.
Kisi is growing, but we’re not large. We’re ambitious, but we value economy. It’s important for us to be efficient; to deliver products, services and information to our clients as quickly as possible. The fastest way of doing so (typographically) is by limiting our options, reducing the time spent designing and deciding whether thin, light, regular, medium, bold or black font weight is appropriate.
Our typography is created to be as simple as possible yet as effective as possible. Instead of using two (or three) typefaces, we use only one. Instead of using all weights available, we use only one.
Tracking
To communicate our company vision to connect people and spaces, we track our heading typography tightly – moving the characters physically closer together.
Tracking is the adjustment of space between letters. It is used to create proportional and harmonious spatial relationships between letters. Depending on the typography group, tracking is specified differently. For example, a paragraph should – for readability – be set with more generous tracking (space between letters) than for example a headline. If a paragraph is set with too much tracking, it becomes loose and it feels insecure. If it’s set with too little tracking, the letters flow together and feel as if the typographer ran out of space.
The effect of tracking is what is called blackness. It’s a term that refers to the visual blackness (or lightness) of typography. For a paragraph set in pure black text, changes in tracking changes the appearance color of the text. With little tracking the text will appear darker and with more tracking it will appear lighter. Tracking is therefore used to adjust the blackness of typography.
When setting typography for digital screens, pure black typography on a pure white background is straining to the eye because of the high contrast between black and white. For improved reading comfort we increase the tracking to decrease the blackness, making the reading experience more harmonious.
For headlines, which in nature is shorter than paragraphs, the factor of readability is less important. Headlines can then be set with less tracking, moving the letters closer together thus strengthening the wordmark.