Typography
We've built Sentry's type system around Rubik - a playful open-source typeface.
For code and code-like elements, we use Roboto Mono.
Type scale
Type scales are hierarchical type systems consisting of style definitions for
common elements, such as Heading 1, Heading 2, Paragraph, and Button/Label.
Sentry's type scale is based on the Rubik typeface. The root font size is 16px
(1rem = 16px).
{TYPE_SCALE.map(({name, ...props}) => {
return (
{name}
{props.fontWeight}
{props.fontSize}
{props.lineHeight}
{props.letterSpacing}
);
})}
Styling
The type scale above should cover a large majority of use cases. However, if an
element requires a custom style outside of the type scale, make sure to follow the
rules below.
Size
Use values from the type scale above. Be mindful of the type
hierarchy. If the element has low importance, use a smaller size.
Always define font sizes with the rem unit.
Weight
-
Use Medium (600) for headings, button labels, and elements that
need to stand out from the rest of the user interface, like table headers
-
Use Regular (400) for all other elements
Line height
-
Use 1.4 for body text (content that can wrap to multiple lines)
-
Use 1.2 for headings and short, single-line text like table
headers and input fields
-
Use 1 for text labels with immediate bounding boxes, like
buttons, pills, and badges
Letter spacing
-
Reduce letter spacing for headings. This makes them look more
condensed, thereby reinforcing their high order in the type hierarchy. Refer to
the type scale above for how much to reduce.
-
Increase letter spacing (+0.02rem) in text elements that are smaller than
16px,
with the exception of code and code-like elements. This makes them easier to
read.
Code
Use Roboto Mono in Regular (400) for code and code-like elements, like search
tokens.
Set the line height based on the context:
-
For multi-line code, use 1.6
-
For single-line code elements, like search tokens, use the same
line height as that of the text surrounding the token
External Links
External links lead users to pages outside the application. Examples include links
to Sentry's blog/marketing pages, terms of service, third-party documentation,…
The following styling rules apply to external links only. Internal links, on the
other hand, can have more flexible styles, based on their behavior and context.
In a sentence
When a link appears inside a longer sentence…
... like this{' '}
{}}>little link.
-
Use as the text color
-
Add a solid underline in
-
Don't include any preceding articles (a, the, this, our) in the linked text, for
example:
-
the{' '}
{}}>
Church of the Flying Spaghetti Monster
-
{' '}
{}}>
the Church of the Flying Spaghetti Monster
-
On hover:
-
Use a pointer cursor -
cursor: pointer
-
Change the underline color to
{InlineLinkExampleStyles}
Standalone
When a link appears on its own and the user likely knows that it's a link given
the context, like in a footer:
Privacy Policy
Terms of Use
-
Use , , or{' '}
, depending on the context
- Don't add any underline
-
On hover:
-
Use a pointer cursor -
cursor: pointer
-
Add a solid underline in
{StandaloneLinkExampleStyles}
Lists
Unordered
Use filled and hollow circles as bullets points:
{UnorderedListExampleStyles}
Don't add full stops (.) to the end of each item, unless the item contains
multiple sentences.
Avoid using custom symbols and icons as bullet characters, as
they usually look out of place and distract from the main text content.
Ordered
Use Arabic numerals and lowercase letters as counters:
-
Camelus
- Bactrian camel
- Dromedary
-
Lama
- Llama
- Alpaca
{OrderedListExampleStyles}
Avoid using custom symbols and icons as counters.
OpenType features
Rubik supports a few useful{' '}
OpenType font features
. These features, or variants, are alternative characters that, when used in the
right places, can help improve the reading experience.
Tabular figures
By default, Rubik uses proportional figures. This works well in most cases.
However, for large tables with a lot of numbers, tabular figures would be a better
choice, thanks to their consistent width and more legible design.
999,999
999,999
111,111
111,111
9.99999
9.99999
1.11111
1.11111
{TabularNumsExampleStyles}
Ligatures
Ligatures are special glyphs that replace two or more glyphs in order to better
connect them. Common ligature replacements include ff, fi, fl, and ffi.
ff, fi, fl
Without ligatures, the characters are all separate.
ff, fi, fl
With ligatures, the characters are connected into a single glyph.
Use ligatures across the whole user interface.
{FontLigatureExampleStyles}
Fractions
1/12
Rubik also contains special formatting for fractions. Without this formatting,
numbers in fractions are just rendered as separate characters.
1/12
Fractional formatting shrinks the numbers and connects them with a diagonal
slash, forming a proportional, condensed visual block.
Use fractional formatting whenever possible.
{FontFractionExampleStyles}
);
}
const FixedExternalLink = styled(ExternalLink)`
color: ${p => p.theme.blue300};
text-decoration: underline ${p => p.theme.blue100};
:hover {
color: ${p => p.theme.blue300};
text-decoration: underline ${p => p.theme.blue200};
}
`;
const FooterLink = styled(Link)`
color: ${p => p.theme.gray300};
:hover {
color: ${p => p.theme.gray300};
text-decoration: underline ${p => p.theme.gray200};
}
`;
const SideBySideList = styled('ul')`
/* Reset */
list-style-type: none;
margin: 0;
padding: 0;
& > li {
margin: 0;
}
& > li > div {
margin-bottom: 0;
}
/* Side-by-side display */
display: grid;
grid-template-columns: 1fr 1fr;
gap: ${space(2)};
`;
const ColorSwatch = styled(
({
color,
className,
style,
}: {
color: ColorOrAlias;
className?: string;
style?: CSSProperties;
}) => (