Meet Castos Sign In 14-Day Free Trial

Who we are

📓What we stand for️📓Our Purpose📓Our Vision📓Our Mission📓Our Values

Design System

📓Design Principles📓Colors📓Typography📓Images

Content Guide

📓What is a Content Guide📓Writing goals and principles📓Tips for writing at Castos

Component Library

📓About our Components📓Button

Logos & Assets

📓Castos📓Castos Productions📓Castos Academy📓Audience Podcast📓3 Clips Podcast

⚡

Meet Castos →

© Castos 2022 – v0.4

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 */ 
}

On this page

Typography
Headings
Bodycopy
Typescale
Samples
Values