Documentation - Typography.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Typography
Marssel offers a complete system for managing typography with support for local fonts, Google Fonts, and all text properties: size, weight, line height, spacing and alignment.
Google Fonts
Use font- to load and apply Google Fonts:
Title with Roboto
Roboto Bold (700)
Roboto Regular Italic
Open Sans
Lato
Montserrat
Poppins
Inter
<!-- Standard font -->
<h4 class="font-[Roboto]">Title with Roboto</h4>
<!-- Font with specific weight -->
<h4 class="font-[Roboto(700)]">Roboto Bold (700)</h4>
<!-- Font with italic style -->
<p class="font-[Roboto(400_italic)]">Roboto Regular Italic</p>
<!-- Common fonts -->
<p class="font-[Open_Sans]">Open Sans</p>
<p class="font-[Lato]">Lato</p>
<p class="font-[Montserrat]">Montserrat</p>
<p class="font-[Poppins]">Poppins</p>
<p class="font-[Inter]">Inter</p>Local fonts
Marssel automatically loads local fonts from your public/fonts/ folder:
<!-- Local police -->
<h1 class="font-[MyCustomFont]">Custom font</h1>
<!-- With specific weight -->
<h2 class="font-[MyCustomFont(600)]">Custom Font Semibold</h2>
```
**Organization of local police:**
```
public/
fonts/
Roboto/
Roboto-Regular.woff2
Roboto-Bold.woff2
Roboto-Italic.woff2
MyCustomFont/
MyCustomFont-Regular.woff2
MyCustomFont-Bold.woff2Generate the font manifest
# Automatically generate fonts-manifest.json
node generate-fonts-manifest.mjsAvailable weights
Thin (100)
Extra Light (200)
Light (300)
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
Extra Bold (800)
Black (900)
<p class="font-[Roboto(100)]">Thin (100)</p>
<p class="font-[Roboto(200)]">Extra Light (200)</p>
<p class="font-[Roboto(300)]">Light (300)</p>
<p class="font-[Roboto(400)]">Regular (400)</p>
<p class="font-[Roboto(500)]">Medium (500)</p>
<p class="font-[Roboto(600)]">Semibold (600)</p>
<p class="font-[Roboto(700)]">Bold (700)</p>
<p class="font-[Roboto(800)]">Extra Bold (800)</p>
<p class="font-[Roboto(900)]">Black (900)</p>Font size
Use font-size- or fs-:
12px text
14px text
16px text (standard)
18px text
24px text
32px text
48px text
Text 0.875rem
Text 1rem
Text 1.5rem
Text 2rem
Text 0.8em
Text 1.2em
Responsive title
<!-- Sizes in pixels -->
<p class="font-size-[12px]">12px text</p>
<p class="font-size-[14px]">14px text</p>
<p class="font-size-[16px]">16px text (standard)</p>
<p class="font-size-[18px]">18px text</p>
<p class="font-size-[24px]">24px text</p>
<p class="font-size-[32px]">32px text</p>
<p class="font-size-[48px]">48px text</p>
<!-- Sizes in rem -->
<p class="font-size-[0.875rem]">Text 0.875rem</p>
<p class="font-size-[1rem]">Text 1rem</p>
<p class="font-size-[1.5rem]">Text 1.5rem</p>
<p class="font-size-[2rem]">Text 2rem</p>
<!-- Sizes in em -->
<p class="font-size-[0.8em]">Text 0.8em</p>
<p class="font-size-[1.2em]">Text 1.2em</p>
<!-- Responsive sizes -->
<h4 class="font-size-[24px] md--font-size-[32px] lg--font-size-[48px]">
Responsive title
</h4>Font weight
Use font-weight- or fw-:
Light text (300)
Normal text (400)
Medium text (500)
Semibold text (600)
Bold text (700)
Normal
Fat
Fattier
Lighter
<!-- Numerical values -->
<p class="font-weight-[300]">Light text (300)</p>
<p class="font-weight-[400]">Normal text (400)</p>
<p class="font-weight-[500]">Medium text (500)</p>
<p class="font-weight-[600]">Semibold text (600)</p>
<p class="font-weight-[700]">Bold text (700)</p>
<!-- Named values -->
<p class="fw-[normal]">Normal</p>
<p class="fw-[bold]">Fat</p>
<p class="fw-[bolder]">Fattier</p>
<p class="fw-[lighter]">Lighter</p>Line height
Use line-h- for line spacing:
Row height 1
Line height 1.2
Line height 1.5 (recommended)
Line height 1.6
Line height 2
Height 24px
Height 32px
<!-- Numerical values -->
<p class="line-h-[1]">Row height 1</p>
<p class="line-h-[1.2]">Line height 1.2</p>
<p class="line-h-[1.5]">Line height 1.5 (recommended)</p>
<p class="line-h-[1.6]">Line height 1.6</p>
<p class="line-h-[2]">Line height 2</p>
<!-- Pixel values -->
<p class="line-h-[24px]">Height 24px</p>
<p class="line-h-[32px]">Height 32px</p>
<!-- For better readability -->
<div class="font-size-[16px] line-h-[1.6] c-[374151]">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A line height of 1.5-1.6 improves the readability of paragraphs.
</div>Letter spacing
Use letter-spacing-:
Normal spacing
Tight spacing
Very tight
Wide spacing
Wider
Very wide
Title with tight tracking
Spaced text in uppercase
<!-- Normal spacing -->
<p class="letter-spacing-[normal]">Normal spacing</p>
<!-- Tight spacing -->
<p class="letter-spacing-[-0.5px]">Tight spacing</p>
<p class="letter-spacing-[-1px]">Very tight</p>
<!-- Wide spacing -->
<p class="letter-spacing-[0.5px]">Wide spacing</p>
<p class="letter-spacing-[1px]">Wider</p>
<p class="letter-spacing-[2px]">Very wide</p>
<!-- Titles with spacing -->
<h4 class="font-size-[48px] font-weight-[700] letter-spacing-[-1px]">
Title with tight tracking
</h4>
<!-- Text in capital letters -->
<p class="text-transform-[uppercase] letter-spacing-[2px] font-weight-[600]">
Spaced text in uppercase
</p>Word spacing
Use word-spacing-:
Normal word spacing
Words spaced further apart
Widely spaced words
Close words
<!-- Standard Spacing -->
<p class="word-spacing-[normal]">Normal word spacing</p>
<!-- Increased spacing -->
<p class="word-spacing-[5px]">Words spaced further apart</p>
<p class="word-spacing-[10px]">Widely spaced words</p>
<!-- Reduced spacing -->
<p class="word-spacing-[-2px]">Close words</p>Text Alignment
Use text-align-:
Left-aligned text
Centered text
Right-aligned text
Full-width justified text available
Centered on mobile, left aligned on desktop
<p class="text-align-[left]">Left-aligned text</p>
<p class="text-align-[center]">Centered text</p>
<p class="text-align-[right]">Right-aligned text</p>
<p class="text-align-[justify]">Full-width justified text available</p>
<!-- Responsive alignment -->
<p class="text-align-[center] md--text-align-[left]">
Centered on mobile, left aligned on desktop
</p>Text decoration
Use text-dec- or text-decoration-:
<!-- Underlining -->
<p class="text-dec-[underline]">Underlined text</p>
<!-- Line above -->
<p class="text-dec-[overline]">Text with line above</p>
<!-- Rod -->
<p class="text-dec-[line-through]">Strikethrough text</p>
<!-- No decoration -->
<a href="#" class="text-dec-[none]">Link without underline</a>
<!-- On the hover -->
<a href="#" class="text-dec-[none] a---[text-dec-[underline]]:hover">
Underlined on hover
</a>Text transformation
Use text-transform-:
Text in capital letters
TEXT IN LOWER CASE
first capital letter
Normal text
Badge<!-- Capital letters -->
<p class="text-transform-[uppercase]">Text in capital letters</p>
<!-- Lower case letters -->
<p class="text-transform-[lowercase]">TEXT IN LOWER CASE</p>
<!-- First letter capitalized -->
<p class="text-transform-[capitalize]">first capital letter</p>
<!-- Normal -->
<p class="text-transform-[none]">Normal text</p>
<!-- Badge in capital letters -->
<span class="bg-[2563eb] c-[fff] px-[12px] py-[6px] rounded-[20px] text-transform-[uppercase] letter-spacing-[1px] font-size-[12px] font-weight-[700]">
Badge
</span>