Foundations
Typography

Typography

Typography is our system of fonts. LazyPay uses Lufga as the main font to convey a balance of seriousness and fun in the product.


Guidelines

Scale

Inspired by the major second musical scale, which has a ratio of 8:9 in its intervals, our typographic sizes are designed to create a visual rhythm and balance that is aesthetically pleasing to the viewer.

This scale is commonly associated with upbeat and happy emotions, which are the feelings we aim to evoke in our design. Examples of songs that use the major second scale include "Happy Birthday" and "Frère Jacques".

Similar to notes arranged in a harmonious musical key, we employ a modular scale to establish a cohesive and organized system of typographic sizes. The scale is anchored by a base font size of 14dp and increases proportionally by a factor of 1.125 at each interval.

12
14
16
18
20
24
32
36
42
48

Line height

To maintain consistent alignment with our 4px baseline grid, we ensure proper line height by multiplying the type size by 1.45 and rounding to the nearest 4px interval.

Font Styles

Style Name
Values
title-display
Font Size 32
Font Weight 700
Letter Spacing 40
Letter Spacing -0.2
title-header
Font Size 24
Font Weight 700
Letter Spacing 32
title-section
Font Size 20
Font Weight 700
Letter Spacing 28
title-appbar
Font Size 16
Font Weight 600
Letter Spacing 24
title-primary
Font Size 16
Font Weight 600
Letter Spacing 24
title-secondary
Font Size 14
Font Weight 600
Letter Spacing 20
body-big
Font Size 18
Font Weight 400
Letter Spacing 24
body-normal
Font Size 16
Font Weight 400
Letter Spacing 24
body-small
Font Size 14
Font Weight 400
Letter Spacing 20
body-tiny
Font Size 12
Font Weight 400
Letter Spacing 16
subtitle-primary
Font Size 14
Font Weight 400
Letter Spacing 20
subtitle-secondary
Font Size 12
Font Weight 400
Letter Spacing 16
caption-overline
Font Size 10
Font Weight 500
Letter Spacing 16
Letter Spacing 1
input-label
Font Size 12
Font Weight 600
Letter Spacing 16
input-text
Font Size 16
Font Weight 400
Letter Spacing 24
input-placeholder
Font Size 14
Font Weight 400
Letter Spacing 20
input-error
Font Size 12
Font Weight 400
Letter Spacing 16
input-helper
Font Size 12
Font Weight 400
Letter Spacing 16
button-primary
Font Size 16
Font Weight 700
Letter Spacing 24
button-secondary
Font Size 14
Font Weight 700
Letter Spacing 20

© 2023 Lazypay. All rights reserved