Typography
Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.
Typefaces
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Vanguard Regular Fonts Weights
700 / Bold
700 / Bold Italic
300 / Light
300 / Light Italic
Oswald Fonts Weights
700 / Regular
700 / Bold
700 / Regular Italic
700 / Regular Bold Italic
300 / Regular
300 / Bold
300 / Regular Italic
300 / Regular Bold Italic
Merriweather Fonts Weights
400 / Regular
400 / Bold
400 / Regular Italic
400 / Regular Bold Italic
Type Scale
| Type | Font Styling | Font Family |
|---|---|---|
Heading 1 |
Font Size: clamp(2.59rem, 0vw + 2.59rem, 2.59rem); Font Weight: 700 / bold line-height: 1.1 |
"vanguard_cfregular" |
Header 2 |
Font Size: clamp(2.08rem, 0vw + 2.08rem, 2.08rem); |
"vanguard_cfregular" |
Header 3 |
Font Size: clamp(1.66rem, 0vw + 1.66rem, 1.66rem); |
"vanguard_cfregular" |
Header 4 |
Font Size: clamp(1.33rem, 0vw + 1.33rem, 1.33rem); |
"vanguard_cfregular" |
Header 5 |
Font Size: clamp(0.85rem, 0vw + 0.85rem, 0.85rem); |
"vanguard_cfregular" |
Header 6 |
Font Size: clamp(0.68rem, 0vw + 0.68rem, 0.68rem); |
"vanguard_cfregular" |
|
Paragraph |
Font Size: clamp(1.06rem, 0vw + 1.06rem, 1.06rem); |
""Oswald", sans-serif;" |
Font styling classes
Text Left
Text Center
Text Right
Font Sizes - Helper Classes
.text-xs, .text-sm, .text-md, .text-lg, .text-xl, .text-xl, .text-xxl, .text-xxxl{
margin: 0;
}
| Type | Font Size | Class Name |
|---|---|---|
| Extra small | clamp(0.68rem, 0vw + 0.68rem, 0.68rem); | text-xs |
| Small | clamp(0.85rem, 0vw + 0.85rem, 0.85rem); | text-sm |
| Medium | clamp(1.06rem, 0vw + 1.06rem, 1.06rem); | text-md |
| Large | clamp(1.33rem, 0vw + 1.33rem, 1.33rem); | text-lg |
| Extra Large | clamp(1.66rem, 0vw + 1.66rem, 1.66rem); | text-xl |
| Extra Extra Large | clamp(2.08rem, 0vw + 2.08rem, 2.08rem); | text-xxl |
| Extra Extra Extra Large | clamp(2.59rem, 0vw + 2.59rem, 2.59rem); | text-xxxl |
Contextual Color
.text-primary
.text-secondary
.text-success
.text-warning
.text-info
.text-danger
.text-white
.text-black
Text Transform
| Class | Inputted Text | Result |
|---|---|---|
| .text-transform-none
text-transform: none; |
Text transform none |
text transform none |
| .text-uppercase
text-transform: uppercase; |
text transform uppercase |
text transform uppercase |
| .text-lowercase
text-transform: lowercase; |
Text Transform Lowercase |
Text Transform Lowercase |
| .text-capitalize
text-transform: capitalize; |
Text transform capitalize |
Text transform capitalize |
Code Snippets
.font-primary{
font-family: "Roboto Condensed",Arial,sans-serif;
}
.font-secondary{
font-family: "Playfair Display",serif;
}
.text-bold{
font-weight: 700;
}
.text-thin{
font-weight: 300;
}
.text-italic{
font-style: italic;
}