Typography used across the AppSignal brand as well as the in the product.

Font Stack

We use native fonts for all in-product experiences. This ensures that our interface has a high performance and great legibility across all operating systems.

Sans Serif

We use the default sans-serif system font for most text. You can apply it by using the font-body class.

OSFont Family
WindowsSegoe UI
MacOSSF Pro Text
SF Pro Display
Chrome OSRoboto


We use monospace font to display code. You can apply it by using the font-mono class.

OSFont Family
WindowsSegoe UI Mono
MacOSSF Mono Regular
SF Mono
Chrome OSRoboto Mono
UbuntuUbuntu Monospace


Default Attributes

We use the following default attributes for all texts in the product:


Font Family

The default font-family within the product is font-body. We use font-mono to display code.

This is the system-ui font

This is the monospace font

<p class="font-body">This is the system-ui font</p>
<p class="font-mono">This is the monospace font</p>

Font size

The default font-size within the product is text-sm. For headings we use our custom c-heading component, see here.

This is text-2xl

This is text-xl

This is text-lg

This is text-base

This is text-sm

This is text-ms

This is text-xs

<p class="text-2xl">This is text-2xl</p>
<p class="text-xl">This is text-xl</p>
<p class="text-lg">This is text-lg</p>
<p class="text-base">This is text-base</p>
<p class="text-sm">This is text-sm</p>
<p class="text-ms">This is text-ms</p>
<p class="text-xs">This is text-xs</p>


The default font-weight within the product is font-normal. For bold text we use font-semibold and font-bold, and in some rare occasions also font-medium.

This is normal text

This is medium text

This is semibold text

This is bold text

<p class="font-normal">This is normal text</p>
<p class="font-medium">This is medium text</p>
<p class="font-semibold">This is semibold text</p>
<p class="font-bold">This is bold text</p>