Typography - Inter Tight Font

RawDigs uses Inter Tight from Google Fonts as the primary typeface throughout the application.

🎨 Font Stack

Primary Font: Inter Tight

Inter Tight is a modern, highly legible sans-serif typeface designed for user interfaces. It's a condensed version of the popular Inter font family, optimized for digital screens.

Loaded Weights: - 400 (Regular) - 500 (Medium) - 600 (Semi-Bold) - 700 (Bold)

Font Stack:

font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif, 
             'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 
             'Noto Color Emoji';

Why Inter Tight?

✅ Excellent Readability - Optimized for screen display at all sizes
✅ Modern Aesthetic - Clean, professional appearance
✅ Variable Weight - Smooth transitions between weights
✅ Wide Language Support - Comprehensive character set
✅ Open Source - Free to use and modify

📝 Configuration

HTML Head (resources/views/app.blade.php)

{{-- Google Fonts - Inter Tight --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap" rel="stylesheet">

Performance Optimization: - preconnect - Establishes early connection to Google Fonts - crossorigin - CORS support for font loading - display=swap - Shows fallback font immediately, swaps when custom font loads

CSS Configuration (resources/css/app.css)

@theme {
    --font-sans:
        'Inter Tight', ui-sans-serif, system-ui, sans-serif, 
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 
        'Noto Color Emoji';
}

🎯 Usage in Components

With Tailwind CSS

The font is automatically applied via the font-sans utility class:

// Default - uses Inter Tight automatically
<div className="font-sans">
    This text uses Inter Tight
</div>

// Different weights
<h1 className="font-bold">Bold heading (700)</h1>
<h2 className="font-semibold">Semi-bold subheading (600)</h2>
<p className="font-medium">Medium body text (500)</p>
<p className="font-normal">Regular body text (400)</p>

React/TypeScript Components

import { cn } from '@/lib/utils';

export function Typography() {
    return (
        <div className="space-y-4">
            {/* Heading styles */}
            <h1 className="text-4xl font-bold tracking-tight">
                Inter Tight Bold
            </h1>

            {/* Body text */}
            <p className="text-base font-normal leading-relaxed">
                Regular body text using Inter Tight for optimal readability.
            </p>

            {/* With custom styling */}
            <span className={cn(
                "font-medium text-muted-foreground",
                "hover:text-foreground transition-colors"
            )}>
                Interactive text
            </span>
        </div>
    );
}

🎨 Typography Scale

Recommended Sizes

// Display
<h1 className="text-6xl font-bold">Display Heading</h1>

// Headings
<h1 className="text-4xl font-bold">Heading 1</h1>
<h2 className="text-3xl font-semibold">Heading 2</h2>
<h3 className="text-2xl font-semibold">Heading 3</h3>
<h4 className="text-xl font-medium">Heading 4</h4>
<h5 className="text-lg font-medium">Heading 5</h5>
<h6 className="text-base font-medium">Heading 6</h6>

// Body
<p className="text-base font-normal">Regular body text</p>
<p className="text-sm font-normal">Small text</p>
<p className="text-xs font-normal">Extra small text</p>

// Labels
<label className="text-sm font-medium">Form Label</label>
<span className="text-xs font-medium uppercase">Badge</span>

Font Weight Reference

Tailwind Class	Weight	Value	Use Case
font-normal	Regular	400	Body text, paragraphs
font-medium	Medium	500	Labels, emphasized text
font-semibold	Semi-Bold	600	Subheadings, buttons
font-bold	Bold	700	Main headings, CTAs

🚀 Performance

Font Loading Strategy

Strategy: display=swap - Shows fallback font immediately - Swaps to Inter Tight when loaded - Prevents invisible text (FOIT) - Minimal layout shift

Preconnect Benefits

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

• Establishes early connection to Google's servers
• Reduces DNS lookup and connection time
• Improves font loading speed by ~100-300ms

Subsetting (Future Optimization)

For production, consider subsetting to reduce font file size:

latin: A-Z, a-z, 0-9, basic punctuation
latin-ext: Extended Latin characters

Current URL loads all characters. To optimize:

&subset=latin,latin-ext

🎨 Design System Integration

shadcn/ui Components

All shadcn/ui components automatically use Inter Tight through the theme configuration:

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"

// All use Inter Tight by default
<Button>Inter Tight Button</Button>
<Card>Inter Tight Card Content</Card>
<Input placeholder="Inter Tight input" />

Custom Components

export function CustomCard() {
    return (
        <div className="rounded-lg border bg-card p-6">
            <h3 className="text-xl font-semibold mb-2">
                Card Title
            </h3>
            <p className="text-sm text-muted-foreground">
                Body text with Inter Tight
            </p>
        </div>
    );
}

🔧 Customization

Adding More Weights

To add more font weights, update the Google Fonts URL:

<!-- Add 300 (Light) and 800 (Extra Bold) -->
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Then use in Tailwind:

<p className="font-light">Light text (300)</p>
<p className="font-extrabold">Extra bold text (800)</p>

Variable Font (Alternative)

For even more flexibility, use the variable font:

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100..900&display=swap" rel="stylesheet">

This loads all weights from 100 to 900.

📚 Best Practices

Do's ✅

• ✅ Use font-sans for consistent typography
• ✅ Stick to loaded weights (400, 500, 600, 700)
• ✅ Use semantic HTML elements (<h1>, <p>, etc.)
• ✅ Apply appropriate font weights for hierarchy
• ✅ Use leading-* utilities for line height
• ✅ Use tracking-* utilities for letter spacing

Don'ts ❌

• ❌ Don't mix multiple font families without reason
• ❌ Don't use weights that aren't loaded (causes fallback)
• ❌ Don't override font-family directly in components
• ❌ Don't forget to test font loading performance
• ❌ Don't use too many different font sizes

Accessibility

// Good - maintains readable font size
<p className="text-base leading-relaxed">
    Accessible body text with good line height
</p>

// Good - sufficient contrast
<p className="text-foreground">High contrast text</p>

// Avoid - too small for accessibility
<p className="text-[10px]">Too small</p>

🌐 Browser Support

Inter Tight is supported in all modern browsers:

• ✅ Chrome 60+
• ✅ Firefox 60+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ Opera 47+

Fallback fonts ensure compatibility with older browsers.

🔗 Resources

• Inter Tight on Google Fonts
• Inter Font Family
• Tailwind CSS Typography
• Web Font Optimization

---

Updated: October 17, 2025
Font Version: Inter Tight (Google Fonts)
Weights Loaded: 400, 500, 600, 700