Typography 2026 Serif Renaissance

Character-Rich Options

Harmonic Sans Pairings

Recommended Pairings

1. Modern Editorial (Blog/Magazine)

Headlines: Fraunces Display Bold (700)
Subheads: Fraunces Text SemiBold (600)
Body: Inter Regular (400)
Pull Quotes: Fraunces Text Italic (400)

2. Classic Long-Form (Articles/Essays)

Headlines: Newsreader Bold (700)
Body: Newsreader Regular (400)
Captions: Source Sans Pro Regular (400)

3. Harmonized Google Fonts

Headlines: DM Serif Display Regular
Body: DM Sans Regular (400)
Code: DM Mono Regular

4. Premium Content

Headlines: Spectral Medium (500)
Body: Spectral Regular (400)
Sans Accent: Work Sans Regular (400)

React Native Implementation

1. Install Dependencies

npx expo install expo-font \
  @expo-google-fonts/fraunces \
  @expo-google-fonts/newsreader \
  @expo-google-fonts/source-serif-pro \
  @expo-google-fonts/dm-serif-display \
  @expo-google-fonts/lora \
  @expo-google-fonts/merriweather

2. Font Loading

// apps/mobile/app/_layout.tsx
import { useFonts } from 'expo-font';
import {
  Fraunces_400Regular,
  Fraunces_500Medium,
  Fraunces_600SemiBold,
  Fraunces_700Bold,
  Fraunces_400Regular_Italic,
} from '@expo-google-fonts/fraunces';
import {
  Newsreader_400Regular,
  Newsreader_500Medium,
  Newsreader_600SemiBold,
  Newsreader_700Bold,
  Newsreader_400Regular_Italic,
} from '@expo-google-fonts/newsreader';
import {
  SourceSerifPro_400Regular,
  SourceSerifPro_600SemiBold,
  SourceSerifPro_700Bold,
  SourceSerifPro_400Regular_Italic,
} from '@expo-google-fonts/source-serif-pro';
import { DMSerifDisplay_400Regular } from '@expo-google-fonts/dm-serif-display';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    // Fraunces family
    'Fraunces-Regular': Fraunces_400Regular,
    'Fraunces-Medium': Fraunces_500Medium,
    'Fraunces-SemiBold': Fraunces_600SemiBold,
    'Fraunces-Bold': Fraunces_700Bold,
    'Fraunces-Italic': Fraunces_400Regular_Italic,

    // Newsreader family
    'Newsreader-Regular': Newsreader_400Regular,
    'Newsreader-Medium': Newsreader_500Medium,
    'Newsreader-SemiBold': Newsreader_600SemiBold,
    'Newsreader-Bold': Newsreader_700Bold,
    'Newsreader-Italic': Newsreader_400Regular_Italic,

    // Source Serif Pro
    'SourceSerif-Regular': SourceSerifPro_400Regular,
    'SourceSerif-SemiBold': SourceSerifPro_600SemiBold,
    'SourceSerif-Bold': SourceSerifPro_700Bold,
    'SourceSerif-Italic': SourceSerifPro_400Regular_Italic,

    // DM Serif Display
    'DMSerif-Regular': DMSerifDisplay_400Regular,
  });

  // ... splash screen handling
}

Design Tokens

// packages/ui/src/tokens/typography-serif.ts
export const serifTypography = {
  fonts: {
    // Display - for headlines
    display: 'Fraunces-Bold',
    displayMedium: 'Fraunces-SemiBold',

    // Headlines
    heading: 'Fraunces-SemiBold',
    headingItalic: 'Fraunces-Italic',

    // Body - readable serif
    body: 'Newsreader-Regular',
    bodyMedium: 'Newsreader-Medium',
    bodyItalic: 'Newsreader-Italic',

    // Alternative body
    bodyAlt: 'SourceSerif-Regular',

    // Sans pairing for UI
    ui: 'Inter-Regular',
    uiMedium: 'Inter-Medium',
  },

  sizes: {
    // Display - Large editorial headlines
    display1: {
      fontSize: 48,
      lineHeight: 56,
      letterSpacing: -1,
    },
    display2: {
      fontSize: 40,
      lineHeight: 48,
      letterSpacing: -0.5,
    },
    display3: {
      fontSize: 32,
      lineHeight: 40,
      letterSpacing: -0.3,
    },

    // Headings
    h1: { fontSize: 28, lineHeight: 38, letterSpacing: 0 },
    h2: { fontSize: 24, lineHeight: 32, letterSpacing: 0.1 },
    h3: { fontSize: 20, lineHeight: 28, letterSpacing: 0.1 },
    h4: { fontSize: 18, lineHeight: 26, letterSpacing: 0.1 },

    // Body - optimized for reading
    bodyLarge: { fontSize: 20, lineHeight: 34, letterSpacing: 0.2 },
    body: { fontSize: 18, lineHeight: 30, letterSpacing: 0.2 },
    bodySmall: { fontSize: 16, lineHeight: 26, letterSpacing: 0.2 },

    // Editorial elements
    pullQuote: { fontSize: 24, lineHeight: 36, letterSpacing: 0.3 },
    blockquote: { fontSize: 18, lineHeight: 30, letterSpacing: 0.3 },
    byline: { fontSize: 14, lineHeight: 20, letterSpacing: 0.5 },
    caption: { fontSize: 14, lineHeight: 20, letterSpacing: 0.3 },

    // Footnotes
    footnote: { fontSize: 13, lineHeight: 20, letterSpacing: 0.2 },
  },

  // Fraunces variable axes (if using variable font)
  variableAxes: {
    SOFT: { min: 0, max: 100, default: 0 },   // Softness of curves
    WONK: { min: 0, max: 1, default: 0 },     // Quirky alternates
    opsz: { min: 9, max: 144, default: 14 },  // Optical size
    wght: { min: 100, max: 900, default: 400 },
  },
};

Component Examples

Editorial Text Component

// packages/ui/src/components/EditorialText.tsx
import { Text as RNText, TextStyle } from 'react-native';
import { serifTypography as t } from '../tokens/typography-serif';

type EditorialVariant =
  | 'display1' | 'display2' | 'display3'
  | 'h1' | 'h2' | 'h3' | 'h4'
  | 'bodyLarge' | 'body' | 'bodySmall'
  | 'pullQuote' | 'blockquote' | 'byline' | 'caption' | 'footnote';

interface EditorialTextProps {
  variant?: EditorialVariant;
  serif?: boolean;
  italic?: boolean;
  children: React.ReactNode;
  style?: TextStyle;
}

export function EditorialText({
  variant = 'body',
  serif = true,
  italic = false,
  children,
  style
}: EditorialTextProps) {
  const variantStyle = t.sizes[variant];
  const isHeading = variant.startsWith('display') || variant.startsWith('h');

  let fontFamily: string;

  if (!serif) {
    fontFamily = t.fonts.ui;
  } else if (isHeading) {
    fontFamily = variant.startsWith('display')
      ? t.fonts.display
      : t.fonts.heading;
  } else if (italic) {
    fontFamily = t.fonts.bodyItalic;
  } else {
    fontFamily = t.fonts.body;
  }

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

Article Layout Component

// packages/ui/src/components/Article.tsx
import { View, StyleSheet, ScrollView } from 'react-native';
import { EditorialText } from './EditorialText';

interface ArticleProps {
  title: string;
  subtitle?: string;
  author: string;
  date: string;
  children: React.ReactNode;
}

export function Article({ title, subtitle, author, date, children }: ArticleProps) {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <EditorialText variant="display2">{title}</EditorialText>
        {subtitle && (
          <EditorialText variant="h3" italic style={styles.subtitle}>
            {subtitle}
          </EditorialText>
        )}
        <View style={styles.meta}>
          <EditorialText variant="byline" serif={false}>
            By {author}
          </EditorialText>
          <EditorialText variant="byline" serif={false} style={styles.date}>
            {date}
          </EditorialText>
        </View>
      </View>

      <View style={styles.content}>
        {children}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFDF9',
  },
  header: {
    paddingHorizontal: 24,
    paddingTop: 48,
    paddingBottom: 24,
  },
  subtitle: {
    marginTop: 12,
    color: '#666',
  },
  meta: {
    flexDirection: 'row',
    marginTop: 24,
  },
  date: {
    marginLeft: 16,
    color: '#888',
  },
  content: {
    paddingHorizontal: 24,
    paddingBottom: 48,
  },
});

Drop Cap Component

// packages/ui/src/components/DropCap.tsx
import { View, Text, StyleSheet } from 'react-native';
import { EditorialText } from './EditorialText';

interface DropCapParagraphProps {
  children: string;
}

export function DropCapParagraph({ children }: DropCapParagraphProps) {
  const firstLetter = children.charAt(0);
  const restOfText = children.slice(1);

  return (
    <View style={styles.container}>
      <Text style={styles.dropCap}>{firstLetter}</Text>
      <EditorialText variant="body" style={styles.text}>
        {restOfText}
      </EditorialText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  dropCap: {
    fontFamily: 'Fraunces-Bold',
    fontSize: 64,
    lineHeight: 54,
    marginRight: 8,
    marginTop: 4,
    color: '#1a1a1a',
  },
  text: {
    flex: 1,
  },
});

Reading Optimization

// Optimal reading settings for serif text
export const readingConfig = {
  // Line length (characters per line)
  optimalLineLength: {
    mobile: 45,  // characters
    tablet: 65,
    desktop: 75,
  },

  // Paragraph spacing
  paragraphSpacing: 1.5, // em units

  // Text color for comfortable reading
  colors: {
    light: {
      text: '#1a1a1a',      // Not pure black
      background: '#FFFDF9', // Warm white
    },
    dark: {
      text: '#E5E5E5',
      background: '#1a1a1a',
    },
    sepia: {
      text: '#5B4636',
      background: '#F4ECD8',
    },
  },
};

Accessibility Notes

• Serif fonts require larger sizes than sans-serif (18px+ recommended)
• Ensure adequate line-height (1.6-1.8 for body)
• High contrast serifs may cause visual fatigue - use for headings
• Provide reading mode options (sepia, dark mode)

Font Sources

• Fraunces: Google Fonts
• Newsreader: Google Fonts
• Source Serif Pro: Google Fonts
• DM Serif Display: Google Fonts
• Lora: Google Fonts

Editorial App Examples