Meet Castos Sign In 14-Day Free Trial
Who we are
What we stand for️Our PurposeOur VisionOur MissionOur ValuesDesign System
Design PrinciplesColorsTypographyImagesContent Guide
What is a Content GuideWriting goals and principlesTips for writing at CastosComponent Library
About our ComponentsButtonLogos & Assets
CastosCastos ProductionsCastos AcademyAudience Podcast3 Clips Podcast© 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)
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.
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 */
}