Skip to main content

Typography

const font = { h1: 101.438, h2: 63.3984, h3: 50.4163, h4: 35.7115, h5: 25.2081, h6: 21.0068, subtitle1: 16.8054, subtitle2: 14.7047, body1: 16.8054, body2: 14.7047, caption: 12.6041, overline: 12.6041, button: 14.7047, };

Typography is the art of designing in different size, structure and style used to make the content appealing for the users. Safire provides 13 types of typographic scale each with different properties of its own.

Types of typography,

  1. Headline

Headlines are the largest text on the screen, reserved for short, important text or numerals. The font size of these typography scales are larger compared to other types. Safire provides six different types of headline with Muli font as the default.

Headline1

Headline2

Headline3

Headline4

Headline5

Headline6

  1. Subtitle

    Subtitles are minor to the headline and highlight the less important topics. Subtitle1

    Subtitle2

  1. Body

Body text is use for the main content of the texts. Typically used for long-form writing as it works well for small text sizes There are two types of Body text. Body2

Body1

  1. Button

Button text is use only for the buttons and button-like components(such as FAB) that are used for triggering an action. Following are its properties. Button text is typically an all caps.

BUTTON

  1. Caption

Captions are least important titles or explanations of texts. Captions are typically used to annotate images and figures. It should be used sparingly.

Caption

  1. Overline

Overline puts all letters in capital. If any texts or contents are required in all capital, Overline typography is the best choice. It should be used sparingly. OVERLINE TEXT