Typography

Our typography supports the bold font used in the logo. Evenly thick and sharp lines of the headings are counterbalanced by the thin rounded font of the main text.

Font families

Lato
Used for headlines only.
Download Google Font
Nunito
Used for paragraphs, metrics or descriptions.
Download Google Font

Font sizes in the Ryte Software

It’s hard to display a lot of data on small space. That’s why the default text font size in our software is 14px. Trying to make it bigger will break the layout on many places, especially in tables.

H1: This is a headline you find in the topbar

h1 {
  font-size: 19px;
  line-height: 1;
}

H2: This is a headline you find mostly in the card header

h2 {
  font-size: 16px;
  line-height: 1;
}

H3: This is a headline you use when you need a headline inside of a card

h3 {
  font-size: 14px;
  line-height: 1;
}

p: A normal paragraph text you use basically everywhere

p {
  font-size: 14px;
  line-height: 21px;
}

p.sub: paragraph text you use for the secondary information

p.sub {
  color: #a1b1c1;
}

p.small: paragraph text you use for e.g. chart axes

p.small {
  font-size: 12px;
  line-height: 18px;
}

A link

a {
  color: #0292d2;
  text-decoration: none;
}

A disabled link

a.disabled {
  color: #a1b1c1;
  cursor: not-allowed;
}

A destructive link

a.destructive {
  color: #f16b8b;
}