TYPOGRAPHY

Our typographic system is built on clarity and accessibility, with Lexend Deca chosen for its research-backed ability to improve reading speed and maintain consistency across platforms.

TEXT STYLES

Mobile

Desktop

Mobile Styles

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 40px
Line height 52px
Letter spacing 0%

DISPLAY

LARGE

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 32px
Line height 48px
Letter spacing 0%

DISPLAY

MEDIUM

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 28px
Line height 40px
Letter spacing 0%

DISPLAY

SMALL

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 24px
Line height 36px
Letter spacing 0%

DISPLAY

EXTRASMALL

Lexend Deca
Semibold Medium Regular Light
Font size 24px
Line height 36px
Letter spacing 0%

HEADING

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 20px
Line height 32px
Letter spacing 0%

HEADING

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

HEADING

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

BODY

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 14px
Line height 20px
Letter spacing 0%

BODY

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 12px
Line height 20px
Letter spacing 0%

BODY

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 10px
Line height 16px
Letter spacing 0%

CAPTION

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 8px
Line height 12px
Letter spacing 0%

CAPTION

SMALL

Mobile

Desktop

Mobile Styles

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 40px
Line height 52px
Letter spacing 0%

DISPLAY

LARGE

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 32px
Line height 48px
Letter spacing 0%

DISPLAY

MEDIUM

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 28px
Line height 40px
Letter spacing 0%

DISPLAY

SMALL

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 24px
Line height 36px
Letter spacing 0%

DISPLAY

EXTRASMALL

Lexend Deca
Semibold Medium Regular Light
Font size 24px
Line height 36px
Letter spacing 0%

HEADING

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 20px
Line height 32px
Letter spacing 0%

HEADING

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

HEADING

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

BODY

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 14px
Line height 20px
Letter spacing 0%

BODY

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 12px
Line height 20px
Letter spacing 0%

BODY

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 10px
Line height 16px
Letter spacing 0%

CAPTION

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 8px
Line height 12px
Letter spacing 0%

CAPTION

SMALL

Mobile

Desktop

Mobile Styles

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 40px
Line height 52px
Letter spacing 0%

DISPLAY

LARGE

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 32px
Line height 48px
Letter spacing 0%

DISPLAY

MEDIUM

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 28px
Line height 40px
Letter spacing 0%

DISPLAY

SMALL

Lexend Deca
Extrabold Bold Semibold Medium Regular
Font size 24px
Line height 36px
Letter spacing 0%

DISPLAY

EXTRASMALL

Lexend Deca
Semibold Medium Regular Light
Font size 24px
Line height 36px
Letter spacing 0%

HEADING

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 20px
Line height 32px
Letter spacing 0%

HEADING

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

HEADING

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 16px
Line height 24px
Letter spacing 0%

BODY

LARGE

Lexend Deca
Semibold Medium Regular Light
Font size 14px
Line height 20px
Letter spacing 0%

BODY

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 12px
Line height 20px
Letter spacing 0%

BODY

SMALL

Lexend Deca
Semibold Medium Regular Light
Font size 10px
Line height 16px
Letter spacing 0%

CAPTION

MEDIUM

Lexend Deca
Semibold Medium Regular Light
Font size 8px
Line height 12px
Letter spacing 0%

CAPTION

SMALL

LEXEND DECA

Lexend Deca enhances readability and speed, bringing clarity and consistency across our product.

Lexend Deca

A

J

E

B

B

C

K

F

D

C

E

L

G

F

D

G

M

H

H

S

I

I

6

J

J

E

M

K

N

K

L

1

L

M

%

N

N

)

N

O

T

O

P

7

P

Q

F

Q

R

O

R

S

2

S

T

^

T

U

U

V

8

V

W

G

W

X

P

X

Y

3

Y

Z

&

Z

1

V

1

2

9

2

3

0

2

3

H

3

4

Q

4

5

4

5

6

*

6

7

W

7

8

!

8

9

I

9

0

0

R

!

!

5

@

@

(

#

#

X

$

$

@

%

%

Y

^

^

#

&

&

Z

*

*

$

(

(

)

)

Alignment

Always left-align body text for better readability. Use center alignment only for short headers or success states, and avoid right or justified text to maintain even spacing and clarity.

Left-align text

Centre-align text

Don't right-align text

Don't justify text

Using Lexend Deca in product

Lexend Deca enhances readability and user comfort across all contexts.
Use it for:

– Core content – body text, form labels, and descriptions

– Headers and titles – to maintain hierarchy and clarity

– System messages and notifications – to ensure comprehension

It supports multiple weights to create contrast and structure while maintaining a unified voice across touchpoints.

Cart page

Track order page

Loading page