Typography
Explore the Glide font system used throughout Fingertip UI.
Font family
The default font family in Fingertip UI is "Glide", a variable font that supports weights from 400 (regular) to 900 (black). This versatile font is applied using Tailwind's font-sans utility class.
<p className="font-sans">This text uses the Glide font</p>Variable font
Glide is a variable font, which means it contains all weights in a single file, allowing for precise typography with minimal file size impact. This technology enables smooth transitions between font weights and provides greater design flexibility.
Font weights
Explore how Glide looks at different font weights:
The quick brown fox jumps over the lazy dog.
Font weight: 500 (Medium)
The quick brown fox jumps over the lazy dog.
Font weight: 600 (Semibold)
The quick brown fox jumps over the lazy dog.
Font weight: 700 (Bold)
The quick brown fox jumps over the lazy dog.
Font weight: 800 (Extrabold)
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Heading elements
Fingertip UI provides consistent styling for all heading levels:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph text
The default paragraph text uses the Glide font at weight 400 (regular):
This is a standard paragraph with the Glide font. The font provides excellent readability at various sizes while maintaining a modern, clean aesthetic. The variable font technology ensures that characters remain crisp and balanced across different weights and sizes.
This is a smaller paragraph showing how Glide performs at reduced sizes. Even at smaller sizes, the font maintains its legibility and character.
Usage in Tailwind
Fingertip UI has configured Tailwind CSS to use Glide as the default sans-serif font. You can apply it using the font-sans utility class:
// Examples of using font-sans with different weights
<p className="font-sans font-normal">Regular text (400)</p>
<p className="font-sans font-medium">Medium text (500)</p>
<p className="font-sans font-semibold">Semibold text (600)</p>
<p className="font-sans font-bold">Bold text (700)</p>
<p className="font-sans font-extrabold">Extra Bold text (800)</p>
<p className="font-sans font-black">Black text (900)</p>Technical details
Glide is loaded as a variable font using Next.js's localFont utility. This ensures optimal performance by:
- Loading the font locally rather than from an external CDN
- Utilizing the variable font format to reduce file size
- Enabling the full range of weights (400-900) in a single file
The font is applied site-wide via CSS variables, making it consistent across all components and pages.