Typography 2026 Monospace Developer

Alternative Options

Premium Commercial

Recommended Pairings

1. Developer Tool (Vercel-style)

UI: Geist Regular
Code: Geist Mono
Docs Heading: Geist Bold

2. Technical Documentation

Headings: Inter SemiBold
Body: Inter Regular
Code: JetBrains Mono
Inline Code: Fira Code

3. Terminal Application

Primary: JetBrains Mono
Powerline: JetBrains Mono (with Nerd Fonts patch)
Status: SF Mono

4. IDE Theme

Code: Fira Code (ligatures)
UI: SF Pro Text
Sidebar: SF Pro Text Compact

React Native Implementation

1. Install Dependencies

npx expo install expo-font

Note: Most monospace fonts need to be downloaded and added manually:

• JetBrains Mono: jetbrains.com/mono
• Fira Code: github.com/tonsky/FiraCode
• Geist Mono: vercel.com/font

2. Add Font Files

assets/fonts/
├── JetBrainsMono-Regular.ttf
├── JetBrainsMono-Medium.ttf
├── JetBrainsMono-Bold.ttf
├── JetBrainsMono-Italic.ttf
├── FiraCode-Regular.ttf
├── FiraCode-Medium.ttf
├── FiraCode-Bold.ttf
├── GeistMono-Regular.otf
├── GeistMono-Medium.otf
└── GeistMono-Bold.otf

3. Font Loading

// apps/mobile/app/_layout.tsx
import { useFonts } from 'expo-font';

export default function RootLayout() {
  const [fontsLoaded] = useFonts({
    // JetBrains Mono
    'JetBrainsMono-Regular': require('../assets/fonts/JetBrainsMono-Regular.ttf'),
    'JetBrainsMono-Medium': require('../assets/fonts/JetBrainsMono-Medium.ttf'),
    'JetBrainsMono-Bold': require('../assets/fonts/JetBrainsMono-Bold.ttf'),
    'JetBrainsMono-Italic': require('../assets/fonts/JetBrainsMono-Italic.ttf'),

    // Fira Code
    'FiraCode-Regular': require('../assets/fonts/FiraCode-Regular.ttf'),
    'FiraCode-Medium': require('../assets/fonts/FiraCode-Medium.ttf'),
    'FiraCode-Bold': require('../assets/fonts/FiraCode-Bold.ttf'),

    // Geist Mono
    'GeistMono-Regular': require('../assets/fonts/GeistMono-Regular.otf'),
    'GeistMono-Medium': require('../assets/fonts/GeistMono-Medium.otf'),
    'GeistMono-Bold': require('../assets/fonts/GeistMono-Bold.otf'),
  });

  // ... splash screen handling
}

4. System Mono Fallback

// For system monospace fallback
import { Platform } from 'react-native';

const systemMono = Platform.select({
  ios: 'Menlo',
  android: 'monospace',
  default: 'monospace',
});

Design Tokens

// packages/ui/src/tokens/typography-mono.ts
import { Platform } from 'react-native';

export const monoTypography = {
  fonts: {
    // Primary code font
    code: 'JetBrainsMono-Regular',
    codeMedium: 'JetBrainsMono-Medium',
    codeBold: 'JetBrainsMono-Bold',
    codeItalic: 'JetBrainsMono-Italic',

    // Alternative with ligatures
    ligature: 'FiraCode-Regular',
    ligatureMedium: 'FiraCode-Medium',
    ligatureBold: 'FiraCode-Bold',

    // Vercel-style
    geist: 'GeistMono-Regular',
    geistMedium: 'GeistMono-Medium',
    geistBold: 'GeistMono-Bold',

    // System fallback
    system: Platform.select({
      ios: 'Menlo',
      android: 'monospace',
      default: 'monospace',
    }),
  },

  sizes: {
    // Code blocks
    codeBlock: {
      fontSize: 14,
      lineHeight: 24,
      letterSpacing: 0,
    },
    codeBlockSmall: {
      fontSize: 12,
      lineHeight: 20,
      letterSpacing: 0,
    },
    codeBlockLarge: {
      fontSize: 16,
      lineHeight: 28,
      letterSpacing: 0,
    },

    // Inline code
    inlineCode: {
      fontSize: 14,
      lineHeight: 22,
      letterSpacing: 0,
    },

    // Terminal
    terminal: {
      fontSize: 13,
      lineHeight: 22,
      letterSpacing: 0,
    },

    // Data/Tables
    tableData: {
      fontSize: 12,
      lineHeight: 18,
      letterSpacing: 0,
    },

    // Labels/Tags
    codeLabel: {
      fontSize: 11,
      lineHeight: 14,
      letterSpacing: 0.5,
    },
  },

  // Character width for alignment calculations
  characterWidth: {
    size12: 7.2,
    size13: 7.8,
    size14: 8.4,
    size16: 9.6,
  },
};

Component Examples

Code Block Component

// packages/ui/src/components/CodeBlock.tsx
import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native';
import * as Clipboard from 'expo-clipboard';
import { monoTypography as t } from '../tokens/typography-mono';

interface CodeBlockProps {
  code: string;
  language?: string;
  showLineNumbers?: boolean;
  highlightLines?: number[];
}

export function CodeBlock({
  code,
  language,
  showLineNumbers = true,
  highlightLines = []
}: CodeBlockProps) {
  const lines = code.split('\n');

  const handleCopy = async () => {
    await Clipboard.setStringAsync(code);
  };

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        {language && (
          <Text style={styles.language}>{language}</Text>
        )}
        <Pressable onPress={handleCopy} style={styles.copyButton}>
          <Text style={styles.copyText}>Copy</Text>
        </Pressable>
      </View>

      {/* Code */}
      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
        <View style={styles.codeContainer}>
          {lines.map((line, index) => (
            <View
              key={index}
              style={[
                styles.line,
                highlightLines.includes(index + 1) && styles.lineHighlighted
              ]}
            >
              {showLineNumbers && (
                <Text style={styles.lineNumber}>{index + 1}</Text>
              )}
              <Text style={styles.code}>{line || ' '}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#1e1e1e',
    borderRadius: 8,
    overflow: 'hidden',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#333',
  },
  language: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 12,
    color: '#888',
    textTransform: 'uppercase',
  },
  copyButton: {
    paddingHorizontal: 12,
    paddingVertical: 4,
  },
  copyText: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 12,
    color: '#888',
  },
  codeContainer: {
    padding: 16,
  },
  line: {
    flexDirection: 'row',
    paddingVertical: 2,
  },
  lineHighlighted: {
    backgroundColor: 'rgba(255, 255, 0, 0.1)',
    marginHorizontal: -16,
    paddingHorizontal: 16,
  },
  lineNumber: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 14,
    lineHeight: 24,
    color: '#555',
    width: 40,
    textAlign: 'right',
    marginRight: 16,
    userSelect: 'none',
  },
  code: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 14,
    lineHeight: 24,
    color: '#d4d4d4',
  },
});

Inline Code Component

// packages/ui/src/components/InlineCode.tsx
import { Text, StyleSheet } from 'react-native';
import { monoTypography as t } from '../tokens/typography-mono';

interface InlineCodeProps {
  children: string;
  dark?: boolean;
}

export function InlineCode({ children, dark = false }: InlineCodeProps) {
  return (
    <Text style={[styles.code, dark && styles.codeDark]}>
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  code: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 14,
    lineHeight: 22,
    backgroundColor: '#f3f4f6',
    color: '#e11d48',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  codeDark: {
    backgroundColor: '#374151',
    color: '#fbbf24',
  },
});

Terminal Output Component

// packages/ui/src/components/Terminal.tsx
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { monoTypography as t } from '../tokens/typography-mono';

interface TerminalLine {
  content: string;
  type?: 'command' | 'output' | 'error' | 'success';
}

interface TerminalProps {
  lines: TerminalLine[];
  prompt?: string;
}

export function Terminal({ lines, prompt = '$' }: TerminalProps) {
  const getLineColor = (type?: string) => {
    switch (type) {
      case 'command': return '#22d3ee';
      case 'error': return '#f87171';
      case 'success': return '#4ade80';
      default: return '#d4d4d4';
    }
  };

  return (
    <View style={styles.terminal}>
      <View style={styles.header}>
        <View style={[styles.dot, styles.dotRed]} />
        <View style={[styles.dot, styles.dotYellow]} />
        <View style={[styles.dot, styles.dotGreen]} />
      </View>
      <ScrollView style={styles.content}>
        {lines.map((line, index) => (
          <View key={index} style={styles.line}>
            {line.type === 'command' && (
              <Text style={styles.prompt}>{prompt} </Text>
            )}
            <Text style={[styles.text, { color: getLineColor(line.type) }]}>
              {line.content}
            </Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  terminal: {
    backgroundColor: '#0d1117',
    borderRadius: 8,
    overflow: 'hidden',
  },
  header: {
    flexDirection: 'row',
    padding: 12,
    backgroundColor: '#161b22',
    gap: 8,
  },
  dot: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  dotRed: { backgroundColor: '#ff5f56' },
  dotYellow: { backgroundColor: '#ffbd2e' },
  dotGreen: { backgroundColor: '#27c93f' },
  content: {
    padding: 16,
    maxHeight: 300,
  },
  line: {
    flexDirection: 'row',
    marginBottom: 4,
  },
  prompt: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 13,
    lineHeight: 22,
    color: '#7ee787',
  },
  text: {
    fontFamily: 'JetBrainsMono-Regular',
    fontSize: 13,
    lineHeight: 22,
  },
});

Syntax Highlighting Colors

// packages/ui/src/tokens/syntax-colors.ts
export const syntaxColors = {
  // Dark theme (VS Code Dark+)
  dark: {
    background: '#1e1e1e',
    foreground: '#d4d4d4',
    comment: '#6a9955',
    keyword: '#569cd6',
    string: '#ce9178',
    number: '#b5cea8',
    function: '#dcdcaa',
    variable: '#9cdcfe',
    type: '#4ec9b0',
    operator: '#d4d4d4',
    punctuation: '#d4d4d4',
  },

  // Light theme
  light: {
    background: '#ffffff',
    foreground: '#1f2937',
    comment: '#6b7280',
    keyword: '#7c3aed',
    string: '#059669',
    number: '#d97706',
    function: '#2563eb',
    variable: '#1f2937',
    type: '#0891b2',
    operator: '#1f2937',
    punctuation: '#6b7280',
  },

  // GitHub theme
  github: {
    background: '#0d1117',
    foreground: '#c9d1d9',
    comment: '#8b949e',
    keyword: '#ff7b72',
    string: '#a5d6ff',
    number: '#79c0ff',
    function: '#d2a8ff',
    variable: '#ffa657',
    type: '#7ee787',
    operator: '#c9d1d9',
    punctuation: '#c9d1d9',
  },
};

Ligature Reference

Common ligatures in JetBrains Mono / Fira Code:

=>    Arrow function
->    Arrow
<-    Left arrow
===   Strict equality
!==   Strict inequality
>=    Greater or equal
<=    Less or equal
!=    Not equal
&&    Logical AND
||    Logical OR
::    Scope resolution
...   Spread operator
??    Nullish coalescing
?.    Optional chaining
|>    Pipe
<|    Reverse pipe

Font Sources

• JetBrains Mono: jetbrains.com/mono
• Fira Code: github.com/tonsky/FiraCode
• Geist Mono: vercel.com/font
• Cascadia Code: github.com/microsoft/cascadia-code
• Source Code Pro: Adobe Fonts

IDE/Editor Usage