Typography is the art of transporting ideas. Not by attracting attention to the text, but the message itself.

When done right – typography becomes invisible.

Principles

Functional

The essence of typography is functionality, to be legible and readable. Functional means considering the reader and ensuring the reading experience is efficient and harmonious.

Timeless

The craft of typography is minimalist in nature. It has the power to invoke thoughts, feelings, even action solely through the arrangement of letters. A typeface with beautiful proportions is not only aesthetic, but has the ability to inspire.

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.

demonstration of kisis typography

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.

demonstration of kisis typography

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.

See Title component

XL - Connect people & spaces

L - Connect people & spaces

M - Connect people & spaces

S - Connect people & spaces

XS - Connect people & spaces

XS2 - Connect people & spaces

Paragraph

Paragraphs are the main elements to communicate content. Also they are tailored for readability of longer texts.

See Paragraph component

M - The industry-leading access control solution. Whatever type of facility you run, secure it with Kisi.

S - The industry-leading access control solution. Whatever type of facility you run, secure it with Kisi.

Button

Buttons are our interactive elements, helping users navigate and collect information from our digital experiences.

See Button component

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:

84px

52px

32px

20px

16px

12px

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.

typography tracking

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.

Tokens

Token

Value

Example

$font-family-main

'NeueHaasUnica'

Kisi

$font-family-code

monospace

Kisi

$font-weight-medium

400

Kisi

$font-size-max-xl2

5.25rem

Kisi

$font-size-max-xl2-px

84px

$font-size-max-xl2-raw

84

$font-size-max-xl

3.25rem

Kisi

$font-size-max-xl-px

52px

$font-size-max-xl-raw

52

$font-size-max-l

2rem

Kisi

$font-size-max-l-px

32px

$font-size-max-l-raw

32

$font-size-max-m

1.25rem

Kisi

$font-size-max-m-px

20px

$font-size-max-m-raw

20

$font-size-max-s

1rem

Kisi

$font-size-max-s-px

16px

$font-size-max-s-raw

16

$font-size-max-xs

0.75rem

Kisi

$font-size-max-xs-px

12px

$font-size-max-xs-raw

12

About Laika Design System

Kisi Inc.

45 Main Street

11201 Brooklyn

USA

Kisi wordmark

Laika is Kisi’s design system for getkisi.com. Together with the new visual language of Kisi, this system activates the first milestone of the new brand together with working code, design tools and guidelines for getkisi.com.