Typography
Typography helps create clear hierarchy and improves readability across Shelter's digital services.
Typefaces
Primary typeface: Barlow
Barlow is Shelter's primary typeface, used for headings, body text, and UI elements.
- Barlow:
Barlow, -apple-system, BlinkMacSystemFont, Roboto, sans-serif - Barlow Condensed:
"Barlow Condensed", -apple-system, BlinkMacSystemFont, Roboto, sans-serif
Type scale
The type scale provides consistent sizing across different screen sizes.
Headings
| Level | Mobile size | Tablet+ size | Line height | Usage |
|---|---|---|---|---|
| H1 | 36px | 50px | 1.3 | Lorem ipsum |
| H2 | 28px | 36px | 1.3 | Dolor sit amet |
| H3 | 25px | 25px | 1.4 | Consectetur adipiscing |
| H4 | 21px | 21px | 1.4 | Elit sed do |
Body text
| Size | Pixel size | Line height | Usage |
|---|---|---|---|
| Base | 18px | 1.4 | Eiusmod tempor |
| Small | 14px | 1.4 | Incididunt ut |
| XSmall | 12px | 1.4 | Labore et dolore |
Font weights
- Normal (400): Default weight for body text
- Bold (700): Used for emphasis and headings
Usage guidelines
Magna aliqua
- Ut enim ad minim veniam quis nostrud
- Exercitation ullamco laboris nisi ut
- Aliquip ex ea commodo consequat duis
- Aute irure dolor in reprehenderit
Voluptate velit
- Esse cillum dolore eu fugiat nulla
- Pariatur excepteur sint occaecat cupidatat
- Non proident sunt in culpa qui
Officia deserunt
- Mollit anim id est laborum sed ut
- Perspiciatis unde omnis iste natus error
- Sit voluptatem accusantium doloremque laudantium
- Totam rem aperiam eaque ipsa quae
Ab illo inventore
Veritatis et quasi architecto beatae vitae dicta:
- Sunt explicabo nemo enim ipsam voluptatem
- Quia voluptas sit aspernatur aut odit
- Aut fugit sed quia consequuntur magni
Typography examples
Headings
This is an H1
This is an H2
This is an H3
This is an H4
Body text and paragraph
This is paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed porta massa. Pellentesque sodales enim finibus turpis lacinia feugiat. Nunc felis tellus, lacinia in fringilla quis, tempus nec orci. Morbi aliquet bibendum est, viverra congue sapien euismod molestie. Sed ut risus nibh. In ullamcorper, lacus vitae placerat convallis, tortor odio euismod mauris, vel convallis nisl tortor ut mauris. Morbi sollicitudin lobortis odio elementum auctor. Fusce posuere nec arcu ut molestie. Morbi eu viverra felis. Nunc faucibus vitae est non dignissim. Mauris finibus, nulla quis mattis posuere, leo est pharetra enim, effend venenatis libero nisl sit amet odio. Nullam bibendum urna sed tempor egestas. Aliquam eu semper est. Etiam eu tincidunt libero. Praesent mi lorem, suscipit ut ante quis, interdum laoreet augue. Vivamus a libero purus.
Lists
This is an H4 above an unordered list
- This is a list item
- This is a list item
- This is a list item
- This is a list item
This is an H4 above an ordered list
- This is a list item
- This is a list item
- This is a list item
- This is a list item
Text sizes
Base text (18px) - Lorem ipsum dolor sit amet
Small text (14px) - Consectetur adipiscing elit sed do
Extra small text (12px) - Eiusmod tempor incididunt ut labore