# Font Standards for CyberHawk Project

## Overview
This document outlines the standardized font system used throughout the CyberHawk project to ensure consistency and maintainability.

## Font Family
- **Primary Font**: Inter (with fallbacks)
- **Fallback Stack**: Inter → ui-sans-serif → system-ui → -apple-system → BlinkMacSystemFont → Segoe UI → Roboto → Helvetica Neue → Arial → sans-serif

## Font Sizes (Tailwind Classes)
- `text-xs` - 12px (0.75rem) - Small text, captions, pagination
- `text-sm` - 14px (0.875rem) - Body text, labels, buttons
- `text-base` - 16px (1rem) - Default body text
- `text-lg` - 18px (1.125rem) - Subheadings, larger text
- `text-xl` - 20px (1.25rem) - Section headings
- `text-2xl` - 24px (1.5rem) - Page titles, main headings
- `text-3xl` - 30px (1.875rem) - Large headings
- `text-4xl` - 36px (2.25rem) - Hero text

## Font Weights (Tailwind Classes)
- `font-light` - 300
- `font-normal` - 400
- `font-medium` - 500
- `font-semibold` - 600
- `font-bold` - 700
- `font-extrabold` - 800

## Usage Guidelines

### 1. Always Include font-sans Class
Every text element should include the `font-sans` class to ensure consistent font rendering:
```jsx
<h1 className="text-2xl font-bold text-gray-900 font-sans">Title</h1>
<p className="text-sm text-gray-600 font-sans">Description</p>
<span className="text-xs font-medium font-sans">Label</span>
```

### 2. Standard Text Elements
- **Page Titles**: `text-xl sm:text-2xl font-bold font-sans`
- **Section Headings**: `text-lg font-semibold font-sans`
- **Subheadings**: `text-base font-medium font-sans`
- **Body Text**: `text-sm font-normal font-sans`
- **Labels**: `text-xs md:text-sm font-medium font-sans`
- **Small Text**: `text-xs font-normal font-sans`

### 3. Table Typography
- **Table Headers**: `text-xs font-bold font-sans`
- **Table Cells**: `text-xs font-normal font-sans`
- **Table Captions**: `text-xs text-gray-500 font-sans`

### 4. Form Elements
- **Input Labels**: `text-xs md:text-sm font-medium font-sans`
- **Input Text**: `text-sm md:text-base font-normal font-sans`
- **Button Text**: `text-sm md:text-lg font-semibold font-sans`
- **Error Messages**: `text-xs md:text-sm font-normal font-sans`

### 5. Navigation & UI Elements
- **Sidebar Text**: `text-sm sm:text-base font-medium font-sans`
- **Menu Items**: `text-sm font-normal font-sans`
- **Pagination**: `text-xs font-medium font-sans`
- **Badges**: `text-xs font-medium font-sans`

## Implementation Examples

### Before (Inconsistent)
```jsx
<h1 className="text-xl sm:text-2xl font-bold text-gray-900">Title</h1>
<span className="text-[11px] font-bold">Header</span>
<div className="text-[10px]">Content</div>
```

### After (Standardized)
```jsx
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 font-sans">Title</h1>
<span className="text-xs font-bold font-sans">Header</span>
<div className="text-xs font-sans">Content</div>
```

## CSS Classes to Replace
- `text-[11px]` → `text-xs`
- `text-[10px]` → `text-xs`
- `text-[12px]` → `text-xs`
- `text-[14px]` → `text-sm`
- `text-[16px]` → `text-base`
- `text-[18px]` → `text-lg`
- `text-[20px]` → `text-xl`
- `text-[24px]` → `text-2xl`

## Maintenance
1. **Code Review**: Ensure all new text elements include `font-sans`
2. **Refactoring**: Replace custom font sizes with standard Tailwind classes
3. **Testing**: Verify font consistency across different screen sizes
4. **Documentation**: Update this guide when adding new font patterns

## Benefits
- **Consistency**: Uniform typography across all components
- **Maintainability**: Easy to update fonts globally
- **Performance**: Standard Tailwind classes are optimized
- **Accessibility**: Consistent text sizing improves readability
- **Design System**: Professional, cohesive appearance
