Your bookmarks

Typography / Circular Pro

Typography is critical for communicating the hierarchy of a page.

We recently switched to Circular Pro as the main typography supported by Orbit. Now we use Circular Pro as the only typeface for western texts and Lato for some eastern languages, with a fallback to system fonts.

Circular in Kiwi.com projects

We have Circular Pro is licensed for Kiwi.com domain, so there is nothing for our designers stopping them in working with Circular on all our platforms.

Circular in non-Kiwi.com projects

You can, of course, use also Circular Pro typography with Orbit too – just be sure that you have the right license for your project. If you can’t or don’t want to use Circular Pro in your project, check our open-source section for typography where we explain how to use Orbit with Roboto.

Using Orbit with Circular Pro

In the ideal world, it should be that easy as changing the value of fontFamily design token and everything would work automagically. However, it’s not much harder, just a few more steps and that’s it.

In React components

1. Insert font files into page

<link rel="stylesheet" href="//images.kiwi.com/fonts/circular-pro/style.min.css"/>

2. Change theme object

import getTokens from "@kiwicom/orbit-components/lib/getTokens"
import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider"
const customTokens = getTokens({
  base: {
    fontFamily: '"Circular Pro", -apple-system, ".SFNSText-Regular", "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;'
  }
})

<ThemeProvider theme={{orbit: customTokens}}>
  <App />
</ThemeProvider>

In Sketch

Our UI kit is distributed by Abstract and it works almost magically. Check Getting started for designers for more details.