Typography
Text is perhaps the most fundamental type of content, so it is important to follow good typographic principles to maximize legibility. The typography in Triton aims to establish a clear visual hierarchy, to allow users to read information effectively.
Typeface - Roboto
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & *
Font Weights
Regular
Medium
Bold
Type Scale
The Type Scale of Triton is based on a 16px default size. Setting another default will affect all the sizes (eg. setting 12 will reduce all by 25%).
| Class Name | Font Size / Line Height | Font Weights | Example |
|---|---|---|---|
kx-large | 26px/34px | Text with kx-large | |
kx-medium | 20px/26px | Text with kx-medium | |
kx-body | 16px/26px | Text with kx-body | |
kx-base | 14px/19px | Text with kx-base | |
kx-small | 12px/16px | Text with kx-small | |
kx-tiny | 10px/14px | Text with kx-tiny | |
kx-label | 12px/12px | Text with kx-label |