Typography

Twilio’s branded typeface is a super family composed of three related, but distinct, typefaces: Display, Text, and Mono. Each is designed for a specific function that is core to the Twilio brand.

For our products, we have simplified the fonts used within Twilio Sans in order to quickly orient people to the most important information.

Learn more about Twilio’s brand guidelines

We have tokens ranging from Light to Extrabold for font weights. However, our system does not use Light or Bold. We have simplified fonts used within the product to better blend layouts and not add confusion to the visual hierarchy. If your designs use $font-weight-light, they will appear as font-weight: 400. If your designs use $font-weight-bold, they will appear as font-weight: 600.

Check out our font weights ready for you to implement

We use Twilio Sans Display in Extrabold weight for unique, expressive headings and editorial moments.

Learn more about the Display Heading component

We like to keep type styles consistent for customers to be able to quickly scan content and create visual hierarchy. In order to do so, we only use Semibold for headings and labels.

Need a place to start in your designs? Start with the Heading component.

In order to create juxtaposition and legibility within our designs, Twilio Sans Text’s Regular font weight is used for all body copy. This blends well and gives a nice balance with the headings that are Semibold.

The Paragraph component is perfect for large blocks of content.

For captions, we use Twilio Sans Text’s Medium font weight to anchor small units of type. Need to display smaller, supplementary text under an image or add a footnote? Check out your new best friend, the Detail Text component.

To display code or a programming language, we use Twilio Sans Mono Regular.

Check out the Code Block component and the Inline Code component.

Typography is managed through the use of design tokens in Paste. Type tokens are pre-set style decisions for font size, font weight, or leading (line height). Below are just a few examples of the many tokens and styles you can use to compose your UI’s.

Leading refers to the overall space between lines and blocks of content. In product, we use line-height to determine the amount of space a line of text takes up. It’s important to pick the appropriate line height with your selected type size for better readability and processing of information quickly. If your line heights look like a railroad track, they are too open. We don't want our lines of text to look too open nor too tight.

In Paste, we’ve matched our line height and font size tokens so that it’s easy for you to pair them. For example, using $font-size-40 with $line-height-40 will give you the ideal sizing and spacing pair. The same is true for $font-size-10 and $line-height-10, etc.

Check out our line height and font size tokens.

Text color tokens are used to define text and icon colors. We’ve created a set of accessible text color tokens to promote legibility and readability to be used on dark and light backgrounds. We specifically have color-text- and color-text-icon- tokens, since icons have different contrast requirements. Since they are graphical objects, they only need to meet a 3:1 color contrast ratio, as opposed to text, which must meet 4.5:1. This means that icons can use any color-text- or color-text-icon- token, but text should never use color-text-icon-* tokens.

Take a look at all our color text tokens.

We know how time-consuming it is to fiddle with type styles to get the correct one. This is why we have created type components, so they have style built into them. You can focus on designing full layouts, and we can worry about the nitty-gritty.

Here are some of our typography components:

• Anchor
• Description List
• Detail Text
• Display Heading
• Heading -Inline Code
• Label
• Help Text
• List
• Paragraph
• Truncate

Most of our block-level typography components like Heading, Paragraph, and Detail Text have preset margins so that stacking components will give your layout the ideal amount of spacing without having to adjust margins manually too much yourself.

<Card padding="space0">
    <Heading as="h2" variant="heading20">
      Heading
    </Heading>
    <Paragraph>This is a paragraph component. The bottom margin is automatically set because it's followed by another paragraph.</Paragraph>
    <Paragraph marginBottom="space0">This is also a paragraph component. The bottom margin is removed using props because it's the last paragraph of this section of the page. View the code below to see how.</Paragraph>
</Card>

Let’s do a small deep dive into some of our favorite tips for typography.

We suggest using a left alignment for styling UI copy in left-to-right languages. This provides a stronger vertical alignment of your design and a better reading experience while seeing the hierarchy of the content. This also makes it easier to scan content, especially for users of screen magnifiers or higher zoom levels.

We don’t suggest centering large groups of text, it’s not always the most effective in information design and legibility. However, it may make sense within a card or under a data visual or image if it's a small amount of content.

In some instances, it is helpful to bottom align your units of type instead of centering your type. This helps when you have multiple type sizes and gives a unified look. It's that it's easier for humans to scan text content when it's on the same baseline.

Leading helps with legibility in your designs. Having leading too tight or too open can be strenuous on the reader. Lucky for you, Paste already uses the best line-height tokens within our type-based components to have the perfect leading already built in.

We recommend avoiding forced capitalization. It’s not accessible with screen readers, and in many languages, does not translate. It also tends to be less legible than sentence case.

More tips on when to not capitalize:

• Avoid setting a single capitalization design rule that fits all languages.
• In French, Italian, and Spanish (among others) only the first letter should be capitalized for certain words.
• In German, certain types of nouns, gerunds, and names must start with upper-case.

Developers should avoid using CSS, e.g. text-transform: capitalize; to handle capitalization.

Read about capitalization and more on our localization page.

Here’s when you do capitalize:

• Proper nouns – products, people, places.
• Products include features, programs, or systems that Twilio has given a specific name to.
• If a brand or product name uses a mix of upper and lower case (TwiML, eBay) use the name's convention.
• People - named individuals or identifiable roles.

Have content questions? Read the content guidelines section.

We understand that in product, typesetting is sometimes out of our control. However, it’s good to be mindful of awkward ragged edges in our content blocks, known as rags. We also want to be aware of orphans and widows, which is where the content breaks awkwardly, and one word is alone on a single line.

Though we may not be able to adjust content blocks as screen sizes vary, we can still be mindful of these sorts of type accidents. They are especially noticeable in headings. We suggest stacking a headline into two or three lines, versus one long line, which helps to avoid widows.

For this example, you can see the top example has a nice stacked heading that makes the headline and the body copy a compact unit.

In the below examples, you can see one heading and one word in the paragraph are alone, which is harder to scan, but also feels unrefined. The second example has a one line headline which feels disjointed from the rest of the content, as the paragraph line length is shorter. This makes the heading not feel as visually impactful as when it could go to two lines. We want to use design to not only add functionality, but to make a statement.

We want to create comfortable reading for our customers. We suggest no more than 120 characters per line. When working with line lengths we want to create short, but efficient lines of text, so the content is easier to scan, it's readable, and not overwhelming.

It's also good practice to give more padding (space) if your content is within a container. Just like us humans, our type doesn’t like to feel claustrophobic.

Let’s play with type ✨

• Stack headlines into two or even three lines instead of keeping them one long line (44 characters or more). This helps create a compact reading unit.
• A good rule is to use no more than 3 type styles (semibold, medium, regular fonts). This helps blend type styles properly and not get carried away.
• Be generous with the spacing around your type. It thrives when it has room to breathe. We suggest 8–32 pixels between type if they are friends, of course 🙂. Check out the spacing and layout guidelines for more info.

Here’s some typography resources we are loving

• Thinking with Type, 2nd revised and expanded edition: A Critical Guide for Designers, Writers, Editors, & Students
• User Friendly: How the hidden Rules of Design Are Changing the Way We Live, Work, and Play
• Basic Typography: A Design Manual by James Craig
• Type and Color: How to Design and Use Multicolored Typefaces