Typography

Elicit emotions and convey specific messages to the users

Typography is defined as the science of style, appearance, and structure of fonts that aim to provide convenience and aesthetics to the reader. Effective typography depends not only on the content but also on the presentation visual of the typography itself, starting from the font type, font size and line height. You can chek out the guideline for more detail description.

Usage

Usage Default LegionUI

Text("hello")
  .LGN<name>()

Usage Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

Text("hello")
  .font(LGNFont.<name>)

Heading

Common usage : Hero section, Title content or component, Subtitle of title

Preview
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Heading Default LegionUI

.LGNHeading1()
.LGNHeading2()
.LGNHeading3()
.LGNHeading4()
.LGNHeading5()
.LGNHeading6()

Heading Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

.font(LGNFont.heading1)
.font(LGNFont.heading2)
.font(LGNFont.heading3)
.font(LGNFont.heading4)
.font(LGNFont.heading5)
.font(LGNFont.heading6)

Body

Common usage : Description, Paragraph, Button, Text Field, Tabs, etc

Body Default LegionUI

.LGNBodyLarge()
.LGNBodySmall()

Body Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

.font(LGNFont.bodyLargeRegular)
.font(LGNFont.bodyLargeSemiBold)
.font(LGNFont.bodyLargeBold)
.font(LGNFont.bodyLargeItalic)
.font(LGNFont.bodyMediumRegular)
.font(LGNFont.bodyMediumSemiBold)
.font(LGNFont.bodyMediumBold)
.font(LGNFont.bodyMediumItalic)
.font(LGNFont.bodySmallRegular)

Caption

Common usage : Description, Tags, Chips, Badge, etc

Caption Default LegionUI

.LGNCaptionLarge()
.LGNCaptionSmall()

Caption Theme

ThemeAGR, ThemeMyTEnS, ThemeIHS & ThemeEazy

.font(LGNFont.bodyCaptionRegular)
.font(LGNFont.bodyCaptionSemiBold)
.font(LGNFont.bodyCaptionBold)
.font(LGNFont.bodyCaptionItalic)