Typography 2026 Humanist Warm

Extended Options

Humanist Serif Pairings

Recommended Pairings

1. Healthcare/Medical

Headlines: Source Sans Pro SemiBold (600)
Body: Source Sans Pro Regular (400)
Emphasis: Source Sans Pro Medium (500)
Data: IBM Plex Mono

2. Education Platform

Headlines: Lato Bold (700)
Subheads: Lato SemiBold (600)
Body: Lato Regular (400)
Reading: Merriweather Regular

3. Government/Civic

Headlines: Open Sans Bold (700)
Body: Open Sans Regular (400)
Forms: Open Sans Medium (500)

4. Nonprofit/Community

Headlines: Work Sans SemiBold (600)
Body: Work Sans Regular (400)
Accent: Libre Baskerville Italic

React Native Implementation

1. Install Dependencies

npx expo install expo-font \
  @expo-google-fonts/source-sans-pro \
  @expo-google-fonts/lato \
  @expo-google-fonts/open-sans \
  @expo-google-fonts/noto-sans \
  @expo-google-fonts/work-sans \
  @expo-google-fonts/merriweather

2. Font Loading

// apps/mobile/app/_layout.tsx
import { useFonts } from 'expo-font';
import {
  SourceSansPro_300Light,
  SourceSansPro_400Regular,
  SourceSansPro_600SemiBold,
  SourceSansPro_700Bold,
  SourceSansPro_400Regular_Italic,
} from '@expo-google-fonts/source-sans-pro';
import {
  Lato_300Light,
  Lato_400Regular,
  Lato_700Bold,
  Lato_400Italic,
} from '@expo-google-fonts/lato';
import {
  OpenSans_300Light,
  OpenSans_400Regular,
  OpenSans_500Medium,
  OpenSans_600SemiBold,
  OpenSans_700Bold,
} from '@expo-google-fonts/open-sans';
import {
  NotoSans_400Regular,
  NotoSans_500Medium,
  NotoSans_700Bold,
} from '@expo-google-fonts/noto-sans';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    // Source Sans Pro
    'SourceSans-Light': SourceSansPro_300Light,
    'SourceSans-Regular': SourceSansPro_400Regular,
    'SourceSans-SemiBold': SourceSansPro_600SemiBold,
    'SourceSans-Bold': SourceSansPro_700Bold,
    'SourceSans-Italic': SourceSansPro_400Regular_Italic,

    // Lato
    'Lato-Light': Lato_300Light,
    'Lato-Regular': Lato_400Regular,
    'Lato-Bold': Lato_700Bold,
    'Lato-Italic': Lato_400Italic,

    // Open Sans
    'OpenSans-Light': OpenSans_300Light,
    'OpenSans-Regular': OpenSans_400Regular,
    'OpenSans-Medium': OpenSans_500Medium,
    'OpenSans-SemiBold': OpenSans_600SemiBold,
    'OpenSans-Bold': OpenSans_700Bold,

    // Noto Sans (multi-language)
    'NotoSans-Regular': NotoSans_400Regular,
    'NotoSans-Medium': NotoSans_500Medium,
    'NotoSans-Bold': NotoSans_700Bold,
  });

  // ... splash screen handling
}

Design Tokens

// packages/ui/src/tokens/typography-humanist.ts
export const humanistTypography = {
  fonts: {
    // Primary (Source Sans Pro)
    heading: 'SourceSans-Bold',
    headingSemiBold: 'SourceSans-SemiBold',
    body: 'SourceSans-Regular',
    bodyLight: 'SourceSans-Light',
    bodyItalic: 'SourceSans-Italic',

    // Alternative (Lato)
    altHeading: 'Lato-Bold',
    altBody: 'Lato-Regular',
    altLight: 'Lato-Light',

    // Universal (Open Sans)
    universal: 'OpenSans-Regular',
    universalMedium: 'OpenSans-Medium',
    universalBold: 'OpenSans-Bold',

    // Multi-language (Noto Sans)
    global: 'NotoSans-Regular',
    globalMedium: 'NotoSans-Medium',
    globalBold: 'NotoSans-Bold',
  },

  sizes: {
    // Headings - Clear hierarchy
    h1: { fontSize: 28, lineHeight: 36, letterSpacing: -0.2 },
    h2: { fontSize: 24, lineHeight: 32, letterSpacing: 0 },
    h3: { fontSize: 20, lineHeight: 28, letterSpacing: 0.1 },
    h4: { fontSize: 18, lineHeight: 26, letterSpacing: 0.1 },
    h5: { fontSize: 16, lineHeight: 24, letterSpacing: 0.1 },

    // Body - Optimized for readability
    bodyLarge: { fontSize: 18, lineHeight: 30, letterSpacing: 0.2 },
    body: { fontSize: 16, lineHeight: 26, letterSpacing: 0.2 },
    bodySmall: { fontSize: 14, lineHeight: 22, letterSpacing: 0.2 },

    // UI Elements
    button: { fontSize: 16, lineHeight: 20, letterSpacing: 0.3 },
    input: { fontSize: 16, lineHeight: 24, letterSpacing: 0.1 },
    label: { fontSize: 14, lineHeight: 18, letterSpacing: 0.2 },
    helper: { fontSize: 13, lineHeight: 18, letterSpacing: 0.2 },
    caption: { fontSize: 12, lineHeight: 16, letterSpacing: 0.3 },

    // Accessibility-focused
    largeText: { fontSize: 20, lineHeight: 32, letterSpacing: 0.3 },
    extraLarge: { fontSize: 24, lineHeight: 36, letterSpacing: 0.3 },
  },

  weights: {
    light: '300',
    regular: '400',
    medium: '500',
    semibold: '600',
    bold: '700',
  },

  // Accessibility settings
  accessibility: {
    minTouchTarget: 44, // pixels
    minFontSize: 14,
    preferredLineHeight: 1.6,
    maxLineLength: 70, // characters
  },
};

Component Examples

Accessible Text Component

// packages/ui/src/components/HumanistText.tsx
import { Text as RNText, TextStyle, AccessibilityProps } from 'react-native';
import { humanistTypography as t } from '../tokens/typography-humanist';

type HumanistVariant =
  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5'
  | 'bodyLarge' | 'body' | 'bodySmall'
  | 'button' | 'input' | 'label' | 'helper' | 'caption'
  | 'largeText' | 'extraLarge';

interface HumanistTextProps extends AccessibilityProps {
  variant?: HumanistVariant;
  weight?: keyof typeof t.weights;
  italic?: boolean;
  color?: string;
  children: React.ReactNode;
  style?: TextStyle;
}

export function HumanistText({
  variant = 'body',
  weight,
  italic = false,
  color = '#1f2937',
  children,
  style,
  ...accessibilityProps
}: HumanistTextProps) {
  const variantStyle = t.sizes[variant];
  const isHeading = variant.startsWith('h');

  let fontFamily: string;

  if (italic) {
    fontFamily = t.fonts.bodyItalic;
  } else if (isHeading) {
    fontFamily = weight === 'semibold' ? t.fonts.headingSemiBold : t.fonts.heading;
  } else if (weight === 'light') {
    fontFamily = t.fonts.bodyLight;
  } else {
    fontFamily = t.fonts.body;
  }

  // Determine accessibility role
  const accessibilityRole = isHeading ? 'header' : 'text';

  return (
    <RNText
      style={[variantStyle, { fontFamily, color }, style]}
      accessibilityRole={accessibilityRole}
      {...accessibilityProps}
    >
      {children}
    </RNText>
  );
}

Form Field Component

// packages/ui/src/components/FormField.tsx
import { View, TextInput, StyleSheet } from 'react-native';
import { HumanistText } from './HumanistText';
import { humanistTypography as t } from '../tokens/typography-humanist';

interface FormFieldProps {
  label: string;
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  helperText?: string;
  error?: string;
  required?: boolean;
}

export function FormField({
  label,
  value,
  onChangeText,
  placeholder,
  helperText,
  error,
  required
}: FormFieldProps) {
  return (
    <View style={styles.container}>
      <HumanistText
        variant="label"
        weight="semibold"
        accessibilityRole="text"
      >
        {label}{required && ' *'}
      </HumanistText>

      <TextInput
        style={[
          styles.input,
          error && styles.inputError
        ]}
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        placeholderTextColor="#9ca3af"
        accessibilityLabel={label}
        accessibilityHint={helperText}
      />

      {(helperText || error) && (
        <HumanistText
          variant="helper"
          color={error ? '#dc2626' : '#6b7280'}
        >
          {error || helperText}
        </HumanistText>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
  input: {
    marginTop: 8,
    marginBottom: 4,
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderWidth: 1,
    borderColor: '#d1d5db',
    borderRadius: 8,
    fontFamily: 'SourceSans-Regular',
    fontSize: 16,
    lineHeight: 24,
    color: '#1f2937',
    backgroundColor: '#ffffff',
  },
  inputError: {
    borderColor: '#dc2626',
  },
});

Info Card Component

// packages/ui/src/components/InfoCard.tsx
import { View, StyleSheet } from 'react-native';
import { HumanistText } from './HumanistText';

interface InfoCardProps {
  title: string;
  description: string;
  type?: 'info' | 'warning' | 'success' | 'error';
}

export function InfoCard({ title, description, type = 'info' }: InfoCardProps) {
  const colors = {
    info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
    warning: { bg: '#fefce8', border: '#eab308', text: '#854d0e' },
    success: { bg: '#f0fdf4', border: '#22c55e', text: '#166534' },
    error: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
  };

  const scheme = colors[type];

  return (
    <View
      style={[
        styles.card,
        { backgroundColor: scheme.bg, borderLeftColor: scheme.border }
      ]}
      accessibilityRole="alert"
    >
      <HumanistText variant="h5" color={scheme.text}>
        {title}
      </HumanistText>
      <HumanistText variant="body" color={scheme.text} style={styles.description}>
        {description}
      </HumanistText>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderLeftWidth: 4,
    borderRadius: 8,
  },
  description: {
    marginTop: 8,
  },
});

Accessibility Best Practices

// packages/ui/src/utils/accessibility.ts
import { PixelRatio, AccessibilityInfo } from 'react-native';

// Scale font size based on user's accessibility settings
export function getAccessibleFontSize(baseSize: number): number {
  const fontScale = PixelRatio.getFontScale();

  // Cap scaling to prevent layout issues
  const cappedScale = Math.min(fontScale, 1.5);

  return baseSize * cappedScale;
}

// Check if user prefers reduced motion
export async function prefersReducedMotion(): Promise<boolean> {
  return AccessibilityInfo.isReduceMotionEnabled();
}

// Minimum contrast ratio checker
export function meetsContrastRatio(
  foreground: string,
  background: string,
  level: 'AA' | 'AAA' = 'AA'
): boolean {
  // WCAG requirements:
  // AA: 4.5:1 for normal text, 3:1 for large text
  // AAA: 7:1 for normal text, 4.5:1 for large text
  const ratio = calculateContrastRatio(foreground, background);
  return level === 'AA' ? ratio >= 4.5 : ratio >= 7;
}

function calculateContrastRatio(fg: string, bg: string): number {
  // Implementation of WCAG contrast calculation
  const fgLuminance = getLuminance(fg);
  const bgLuminance = getLuminance(bg);

  const lighter = Math.max(fgLuminance, bgLuminance);
  const darker = Math.min(fgLuminance, bgLuminance);

  return (lighter + 0.05) / (darker + 0.05);
}

function getLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = rgb.map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function hexToRgb(hex: string): number[] {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]
    : [0, 0, 0];
}

Color Recommendations

export const accessibleColors = {
  // Text colors with WCAG AA compliance
  text: {
    primary: '#1f2937',    // Gray 800 - 15.1:1 on white
    secondary: '#4b5563',  // Gray 600 - 7.1:1 on white
    tertiary: '#6b7280',   // Gray 500 - 5.0:1 on white
    muted: '#9ca3af',      // Gray 400 - 3.0:1 (large text only)
  },

  // Background colors
  background: {
    primary: '#ffffff',
    secondary: '#f9fafb',
    tertiary: '#f3f4f6',
  },

  // Semantic colors (with accessible text pairings)
  semantic: {
    info: { bg: '#eff6ff', text: '#1e40af' },
    success: { bg: '#f0fdf4', text: '#166534' },
    warning: { bg: '#fefce8', text: '#854d0e' },
    error: { bg: '#fef2f2', text: '#991b1b' },
  },

  // Interactive states
  interactive: {
    primary: '#2563eb',      // Blue 600
    primaryHover: '#1d4ed8', // Blue 700
    focus: '#3b82f6',        // Blue 500 for focus rings
  },
};

Font Sources

• Source Sans Pro: Google Fonts
• Lato: Google Fonts
• Open Sans: Google Fonts
• Noto Sans: Google Fonts
• Work Sans: Google Fonts

Sector Examples