Foundations
Typography
A system to design hierarchy and organized information
Overview
A collection of individual styles used across our applications to guide users through our product.
Use typography to create design and content that is clear and efficient.
Typeface
Pixeloid Sans by GGBotNet
Pixeloid Sans is a sans-serif font inspired by pixel art. Its distinctive pixelated glyphs and round forms create a playful and nostalgic feel, making it perfect for projects with a retro or digital vibe.
Conversion
Assuming the base font size is 16px, the REM conversion formula is:
REM =
pixel value
16
Bars
Bars are crafting materials generally crafted from mined ores at a Furnace. Crafting most ore-related items requires that raw ores are first crafted into bars.
Browse all bar typesEnemies
Enemies are characters that attempt to inflict damage on players
View enemy listSans-serif typeface being used in components and a region.
Type Values
Major third ratio
We maintain the same type sizes for everything that is body copy; this way, we achieve a coherent rhythm.
aA bB cC dD eE fF gG hH iI jJ kK lL mM nN oO pP qQ rR sS tT uU vV wW xX yY zZ
aA bB cC dD eE fF gG hH iI jJ kK lL mM nN oO pP qQ rR sS tT uU vV wW xX yY zZ
0 1 2 3 4 5 6 7 8 9 ~ . , ; ' / ? ! @ $ % ^ & ( ) { } # - _ = + < >
Pixel values
Typography in PX, this is for Figma only
| Mobile (300-766 px) | Tablet (767-991 px) | Desktop (992+ px) | Example Usage |
|---|---|---|---|
40/56 H1 | 50/64 H1 | 60/72 H1 | Main titles, use only once per page |
31/44 H2 | 36/48 H2 | 42/52 H2 | Headings title that identify key functionality |
22/32 H3 | 26/32 H3 | 32/38 H3 | Primary heading title on regions |
15/24 Body | 15/24 Body | 16/24 Body | Standard subtitles and web copy across the board |
15/24 Link | 15/24 Link | 16/24 Link | Standard subtitles and web copy across the board |
17/24 Title | 17/24 Title | 20/28 Title | Titles inside components or static body components that needs emphasis. |
13/20 Caption | 13/20 Caption | 14/20 Caption | For captions that doesn't need to be big but still readable. |
Heading 1
40/56 px
H1
50/64 px
H1
60/72 px
H1
Heading 2
31/44 px
H2
36/48 px
H2
42/52 px
H2
Heading 3
22/32 px
H3
26/32 px
H3
32/38 px
H3
Body
15/24 px
Body
15/24 px
Body
16/24 px
Body
Link
Title
17/24 px
Title
17/24 px
Title
20/28 px
Title
Caption
13/20 px
caption
13/20 px
caption
14/20 px
caption
REM values (preferred)
Typography in REM, responsive web and apps (preferred)
| Mobile (300-766 px) | Tablet (767-991 px) | Desktop (992+ px) | Example Usage |
|---|---|---|---|
2.5/3.5 H1 | 3.125/4 H1 | 3.75/4.5 H1 | Main titles, use only once per page |
1.94/2.75 H2 | 2.25/3 H2 | 2.625/3.25 H2 | Headings title that identify key functionality |
1.375/2 H3 | 1.625/2 H3 | 2/2.375 H3 | Primary heading title on regions |
0.875/1.5 Body | 0.875/1.5 Body | 1/1.5 Body | Standard subtitles and web copy across the board |
0.875/1.5 Link | 0.875/1.5 Link | 1/1.5 Link | Standard subtitles and web copy across the board |
1.125/1.5 Title | 1.125/1.5 Title | 1.25/1.75 Title | Titles inside components or static body components that needs emphasis. |
0.81/1.25 Caption | 0.81/1.25 Caption | 0.875/1.25 Caption | For captions that doesn't need to be big but still readable. |
Heading 1
2.5/3.5 rem
H1
3.125/4 rem
H1
3.75/4.5 rem
H1
Heading 2
1.94/2.75 rem
H2
2.25/3 rem
H2
2.625/3.25 rem
H2
Heading 3
1.375/2 rem
H3
1.625/2 rem
H3
2/2.375 rem
H3
Body
0.875/1.5 rem
Body
0.875/1.5 rem
Body
1/1.5 rem
Body
Link
Title
1.125/1.5 rem
Title
1.125/1.5 rem
Title
1.25/1.75 rem
Title
Caption
0.81/1.25 rem
caption
0.81/1.25 rem
caption
0.875/1.25 rem
caption
Weight
The weight of the font is an important variable that adds emphasis and differentiates content hierarchy.
We suggest using Regular, and Medium for our digital experiences. The medium weight is ideal for headers, but should not be used for long text. Regular is used for body copy.
Line Length
We suggest keeping our body text within the range of 60-100 characters per line, including spacing for desktop and use full width paragraph on mobile.
Our readers may have control over the layout's width, which means that line length cannot always be specified. We must use responsive design techniques to anticipate different contexts.