Typography Customization Examples

Demonstrating font-family and font-size customization in themes

Default Theme

Standard light theme with default typography settings.

SELECT 'Default theme' AS example, 14 AS default_font_size;

Large Accessible Theme

Larger font sizes for improved accessibility and readability.

SELECT
  'Large accessible theme' AS example,
  18 AS base_font_size,
  16 AS editor_font_size,
  'Great for presentations!' AS use_case;

Compact Theme

Smaller fonts for displaying more code on screen.

SELECT
  'Compact theme' AS example,
  12 AS font_size,
  'Perfect for dense data displays' AS use_case
FROM generate_series(1, 5) AS t(n);

Monospace Everything Theme

Using monospace font throughout the entire embed for a unified terminal-like look.

SELECT
  'Monospace theme' AS example,
  'Courier New' AS font_family,
  'Terminal vibes' AS aesthetic;

Custom Editor Font Theme

Using Fira Code font family for the editor with ligatures support.

-- This theme uses Fira Code if available
SELECT
  'Fira Code theme' AS example,
  '<=' AS ligature_example_1,
  '>=' AS ligature_example_2,
  '!=' AS ligature_example_3;

Mixed Sizes Theme

Different font sizes for different UI elements.

SELECT
  'Mixed sizes theme' AS example,
  'Large buttons (16px)' AS buttons,
  'Medium editor (14px)' AS editor,
  'Small metadata (10px)' AS metadata;