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	regular medium bold	Text with kx-large
kx-medium	20px/26px	regular medium bold	Text with kx-medium
kx-body	16px/26px	regular medium bold	Text with kx-body
kx-base	14px/19px	regular medium bold	Text with kx-base
kx-small	12px/16px	regular medium bold	Text with kx-small
kx-tiny	10px/14px	regular medium bold	Text with kx-tiny
kx-label	12px/12px	regular	Text with kx-label