Extract Text and Fonts From PSD Files: A Developer's Guide

One of the most common tasks when working with PSD files isn't editing pixels — it's extracting text. You might need to:

• Copy headline text for a CMS
• Catalog all fonts used in a design system
• Verify that a designer used the correct brand fonts
• Build a style guide from existing mockups
• Translate text layers for localization

Here's every way to do it, from quick visual tools to full programmatic solutions.

Method 1: Browser-Based Extraction (Fastest)

Modern PSD viewers can parse text layers and present them in a copyable format. PeekPSD, for example, shows a dedicated Text tab that lists:

• The text content of every text layer
• Font family and style (e.g., "Inter Bold")
• Font size in points
• Text color as hex values
• Layer name for context

How It Works Under the Hood

PSD files store text data in a structured block called the Type Tool Info resource. Each text layer contains:

Text layer structure:
├── Transform matrix (position, rotation, scale)
├── Text data
│   ├── Raw string content
│   └── Paragraph/character formatting
├── Engine data
│   ├── Font set
│   ├── Style run array
│   └── Paragraph style array
└── Warp data (optional)

The key challenge is that Photoshop stores text formatting as "style runs" — ranges of characters that share the same formatting. A single text layer might have three different fonts, five different sizes, and mixed colors. Parsing this correctly requires understanding the binary structure of the Type Tool Info block.

Method 2: Node.js / JavaScript Libraries

ag-psd

The most capable JavaScript PSD parser. Used by PeekPSD internally:

import { readPsd } from 'ag-psd';
import fs from 'fs';

const buffer = fs.readFileSync('design.psd');
const psd = readPsd(buffer);

function extractText(layers) {
  for (const layer of layers) {
    if (layer.text) {
      console.log(`Layer: ${layer.name}`);
      console.log(`  Text: ${layer.text.text}`);
      
      // Font information
      const style = layer.text.style;
      if (style?.font?.name) {
        console.log(`  Font: ${style.font.name}`);
      }
      if (style?.fontSize) {
        console.log(`  Size: ${style.fontSize}pt`);
      }
    }
    
    // Recurse into groups
    if (layer.children) {
      extractText(layer.children);
    }
  }
}

extractText(psd.children || []);

Pros: Full text parsing, handles style runs, supports PSB, runs in browser and Node.js.

Cons: Large library (~300KB minified), doesn't handle all text engine features.

psd.js

A lighter alternative:

const PSD = require('psd');

PSD.open('design.psd').then(psd => {
  const tree = psd.tree();
  
  tree.descendants().forEach(node => {
    if (node.type === 'layer' && node.get('typeTool')) {
      const typeTool = node.get('typeTool');
      console.log(node.name, typeTool.textValue);
    }
  });
});

Pros: Simpler API, smaller bundle. Cons: Less complete text parsing, limited font info.

Method 3: Python Solutions

psd-tools

The go-to Python library for PSD parsing:

from psd_tools import PSDImage

psd = PSDImage.open('design.psd')

for layer in psd.descendants():
    if layer.kind == 'type':
        print(f"Layer: {layer.name}")
        print(f"  Text: {layer.text}")
        
        # Access font information
        for run in layer.engine_dict.get('StyleRun', {}).get('RunArray', []):
            style = run.get('StyleSheet', {}).get('StyleSheetData', {})
            if 'FontPostScriptName' in style:
                print(f"  Font: {style['FontPostScriptName']}")
            if 'FontSize' in style:
                print(f"  Size: {style['FontSize']}pt")

Pros: Mature library, good documentation, handles complex text. Cons: Python-only, slower for large files.

Font Extraction Best Practices

Getting the Complete Font List

A single PSD might use dozens of fonts. Here's how to build a complete inventory:

function getFontInventory(psd) {
  const fonts = new Map(); // fontName -> { sizes: Set, colors: Set, layers: [] }
  
  function walk(layers) {
    for (const layer of layers) {
      if (layer.text?.style?.font?.name) {
        const name = layer.text.style.font.name;
        if (!fonts.has(name)) {
          fonts.set(name, { sizes: new Set(), colors: new Set(), layers: [] });
        }
        const entry = fonts.get(name);
        entry.layers.push(layer.name);
        if (layer.text.style.fontSize) {
          entry.sizes.add(Math.round(layer.text.style.fontSize));
        }
      }
      if (layer.children) walk(layer.children);
    }
  }
  
  walk(psd.children || []);
  return fonts;
}

Mapping to Web Fonts

PSD files reference fonts by their PostScript name, which doesn't always match the web font name:

Handling Missing Fonts

When a PSD references fonts not installed on your system:

1. The text content is always available — it's stored as Unicode strings regardless of font availability
2. Style information is preserved — sizes, colors, tracking, and leading are in the file
3. Only the visual rendering changes — the browser/tool will substitute with a fallback font

Common Gotchas

1. Point Text vs. Paragraph Text

Photoshop has two text modes:

• Point text: Click to type, no text box boundaries
• Paragraph text: Click-drag to create a text box with word wrapping

Some parsers handle one better than the other. Check that your tool correctly extracts both types.

2. Character vs. Paragraph Styles

Font information can be set at the character level (inline formatting) or paragraph level (paragraph styles). A thorough extraction should check both.

3. Text Transforms

Photoshop can apply transforms to text layers (rotation, scale, skew). The text content is stored in its original form — you'll need the transform matrix if you care about positioning.

4. OpenType Features

Advanced typography features like ligatures, stylistic alternates, and small caps are stored in the layer but not always exposed by parsers.

Building a Font Report

For design system documentation, you might want a comprehensive font report:

📋 Font Report: project-homepage.psd
─────────────────────────────────────

Inter (Google Fonts)
  Weights: 400, 500, 600, 700
  Sizes: 14px, 16px, 24px, 32px, 48px
  Used in: 23 layers
  Colors: #1A1A2E, #667085, #FFFFFF

Roboto Mono (Google Fonts)
  Weights: 400
  Sizes: 12px, 14px
  Used in: 5 layers
  Colors: #7F9B5B

SF Pro Display (Apple)
  Weights: 600
  Sizes: 42px
  Used in: 1 layer (hero headline)
  ⚠️ System font - not available on Google Fonts

The Bottom Line

Text and font extraction is one of the most practical uses of PSD parsing. Whether you're a developer building a CMS, a project manager cataloging design assets, or a translator preparing files for localization, the text is always accessible — you just need the right tool.

---

Try it now: Drop a PSD with text layers on PeekPSD and check the Text and Fonts tabs.