Typography

We provide some basic Default text styles for common elements. Use this to present your design and content as clearly and efficiently as possible.

Usage

The Typography used as Text extension

Title1 - font size 60 and bold

Text("Hello world!")
.xelaTitle1()

Title2 - font size 48 and bold

Text("Hello world!")
.xelaTitle2()

Title3 - font size 34 and black

Text("Hello world!")
.xelaTitle3()

Headline - font size 24 and bold

Text("Hello world!")
.xelaHeadline()

Subheadline - font size 18 and bold

Text("Hello world!")
.xelaSubheadline()

Body - font size 16 and regular

Text("Hello world!")
.xelaBody()

BodyBold - font size 16 and semibold

Text("Hello world!")
.xelaBodyBold()

SmallBody - font size 14 and regular

Text("Hello world!")
.xelaSmallBody()

SmallBodyBold - font size 14 and bold

Text("Hello world!")
.xelaSmallBodyBold()

Caption - font size 12 and semibold

Text("Hello world!")
.xelaCaption()

ButtonLarge - font size 16 and semibold

Text("Hello world!")
.xelaButtonLarge()

ButtonMedium - font size 14 and bold

Text("Hello world!")
.xelaButtonMedium()

ButtonSmall - font size 12 and bold

Text("Hello world!")
.xelaButtonSmall()