Tempo - by Castos
Tempo - by Castos
📓

Typography

Meet Castos Sign In 14-Day Free Trial

Typography

We curated a constrained, purposeful set of typographic styles. A disciplined consistency with how we size and use type makes our products more intuitive to use.

We primarily use 2 font-families. One for heading, and another for body copy, labels, buttons, etc.

Headings

We use Kanit for all headings (h1 - h6)

Kanit on Google Fonts →

Depending on the application, but generally gray-700 is a good heading color. (Get values)

Bodycopy

We use Inter for all other copy: body, labels, buttons, etc.

Inter on Google Fonts →

Depending on the application, but generally gray-500 is a good bodycopy color. (Get values)

Typescale

To create visual rhythm between all the typography on the page, we use a typescale to set the sizes of our typography.

To make things accessible to audiences with different eyesight constraints, across different browsers, and different devices, we start with a default of 1em / 16px and set all other sizes (up and down) based on the rem value, to ensure it can scale if needed. The exact proportions can be seen in the samples below.

Samples

View in Figma →

Values

.text-xs {
	font-size: 0.75rem; /* 12px */
	line-height: 1rem; /* 16px */
}
.text-sm {
	font-size: 0.875rem; /* 14px */
	line-height: 1.25rem; /* 20px */
}
.text-base {
	font-size: 1rem; /* 16px */
	line-height: 1.5rem; /* 24px */
}
.text-lg {
	font-size: 1.125rem; /* 18px */
	line-height: 1.75rem; /* 28px */
}
.text-xl {
	font-size: 1.25rem; /* 20px */
	line-height: 1.75rem; /* 28px */
}
.text-2xl {
	font-size: 1.5rem; /* 24px */
	line-height: 2rem; /* 32px */
}
.text-3xl {	
	font-size: 1.875rem; /* 30px */
	line-height: 2.25rem; /* 36px */
}
.text-4xl {	
	font-size: 2.25rem; /* 36px */
	line-height: 2.5rem; /* 40px */
}
.text-5xl {	
	font-size: 3rem; /* 48px */
	line-height: 3rem; /* 48px */
}
.text-6xl {	
	font-size: 3.75rem; /* 60px */
	line-height: 3.75rem; /* 60px */
}
.text-7xl {	
	font-size: 4.5rem; /* 72px */
	line-height: 4.5rem; /* 72px */
}
.text-8xl {	
	font-size: 6rem; /* 96px */
	line-height: 6rem; /* 96px */
}
.text-9xl {	
	font-size: 8rem; /* 128px */
	line-height: 8rem; /* 128px */ 
}