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.
Vanguard Our primary heading font, Vanguard, is bold and modern, embodying the forward-thinking spirit of the 糖心短视频app. It's designed to capture attention and set the tone for our content. Use Vanguard for all main headings to ensure consistency and strong visual hierarchy.
Oswald Oswald serves as a secondary heading font. It complements Vanguard by providing a versatile and clean aesthetic that works well in various contexts, from webpage subheadings to document titles. Its sleek and modern characteristics help maintain a sense of structure and balance in our content.
Merriweather Merriweather is our chosen serif font. It introduces a touch of tradition and elegance to our brand identity, reflecting our rich history and academic excellence. While primarily used for printed materials, it can also provide a stylish contrast to our sans-serif fonts in digital content when used appropriately.
Roboto Roboto is our default text font. It's clean, neutral, and highly legible, making it perfect for body text across all platforms. Its simplicity ensures that our messages are accessible and easy to read, while still maintaining a professional and modern look.
Typefaces
abcdefghijklmnopqrstuvwxyz
1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
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
Roboto Font Weights
700 / Regular
700 / Regular Italic
300 / Regular
300 / Regular 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: "Oswald", sans-serif;
}
.font-secondary{
font-family: "Merriweather", serif;;
}
.text-bold{
font-weight: 700;
}
.text-thin{
font-weight: 300;
}
.text-italic{
font-style: italic;
}