Typography

@pikacss/plugin-typography is for content-heavy surfaces where you want prose defaults, readable rhythm, and token-driven customization without hand-styling every article block.

When to use it

Use the typography plugin for:

docs sites
blog content
CMS-rendered article bodies
markdown containers that need coherent prose defaults

Install

pnpmnpmyarn

pnpm add @pikacss/plugin-typography

npm install @pikacss/plugin-typography

yarn add @pikacss/plugin-typography

Minimal setup

// pika.config.ts
import { defineEngineConfig } from '@pikacss/core'
import { typography } from '@pikacss/plugin-typography'

export default defineEngineConfig({
	plugins: [typography()],
})

Usage

// pika() is available as a global function — no import needed

// Apply all typography styles at once
const article = pika('prose')

// Apply a specific size variant
const smallArticle = pika('prose-sm')
const largeArticle = pika('prose-lg')

// Combine with custom styles
const styledArticle = pika('prose', { maxWidth: '80ch' })

Customize variables, not every element by hand

// pika.config.ts
import { defineEngineConfig } from '@pikacss/core'
import { typography } from '@pikacss/plugin-typography'

export default defineEngineConfig({
	plugins: [typography()],
	typography: {
		variables: {
			'--pk-prose-color-body': '#374151',
			'--pk-prose-color-headings': '#111827',
			'--pk-prose-color-links': '#2563eb',
			'--pk-prose-color-code': '#111827',
			'--pk-prose-color-pre-code': '#e5e7eb',
			'--pk-prose-color-pre-bg': '#1f2937',
		},
	},
})

This plugin is most valuable when you treat prose as a content system with adjustable tokens, not a long list of manual tag overrides.

Typography ​

When to use it ​

Install ​

Minimal setup ​

Usage ​

Customize variables, not every element by hand ​