Unified Typography
Aether Markey25 downloadsUnify body line height, source line break spacing, and heading sizes and spacing across reading view, Live Preview, and source mode.
- Overview
- Scorecard
- Updates3
English | 简体中文
Unified typography controls for Obsidian. One set of settings drives both editing mode (Live Preview + source mode) and reading mode, so your notes look the same wherever you read or edit them.
No build step required — main.js is plain JavaScript.
What's new in 2.0.0
Version 2.0.0 is a complete rebuild of the plugin:
- Every value can be adjusted in
pxorem— switch units on any slider at any time. - Beyond body text and headings, spacing is now adjustable for lists (ordered and unordered, separately), blockquotes, code blocks, tables, horizontal rules, callouts, math blocks and embedded content.
- A rebuilt settings tab: slider controls with live value readouts, on/off switches for optional overrides, one-click reset, and every setting searchable from Obsidian's settings search on 1.13+.
Features
General
- Line height — unitless multiplier for body text (both modes).
- Paragraph spacing — the gap between paragraphs. In reading mode this is the paragraph margin; in editing mode it is the height of blank lines, so both modes show the exact same gap.
Headings (H1–H6)
- Space above / space below (both modes).
- Optional font size and font weight per level, driven through Obsidian's
--hN-size/--hN-weightvariables so themes stay in sync. - Blank lines directly below a heading are collapsed in editing mode so the heading's "space below" is the full gap — exactly like reading mode.
Lists (ordered, unordered and task lists)
- Space above / below the whole list, configured separately for ordered and unordered lists (both modes).
- Space between items (both modes, via Obsidian's
--list-spacing). - Space between paragraphs inside a single item.
- Optional indentation per nesting level (both modes,
--list-indent) and optional line height inside items.
Other blocks
- Blockquotes — space above/below, gap between paragraphs inside.
- Code blocks — space above/below (both modes), optional internal line height (both modes).
- Tables — space above/below, optional vertical cell padding, optional
line height (
--table-line-height). - Horizontal rules — space above/below (both modes).
- Callouts — space above/below (reading mode; editing mode when the callout is not focused).
- Math blocks (
$$…$$) — space above/below (both modes). - Embedded content (block transclusions
![[note]]) — space above/below.
Extras
- Master enable toggle plus separate Apply in reading mode / Apply in editing mode switches.
- One-click Reset to defaults.
- All length values are
pxorem— your choice, per setting.
How it works
The plugin reads its settings and generates one CSS stylesheet that is
injected into the app. Wherever Obsidian already exposes typography CSS
variables (--line-height-normal, --p-spacing, --list-spacing,
--list-indent, --hN-size, --hN-weight, --table-line-height, …) the
plugin sets those variables, which keeps editing mode, reading mode, rendered
embeds, hover popovers and canvas cards consistent and theme-friendly. Where
no variable exists it emits targeted rules for .markdown-rendered (reading)
and .markdown-source-view.mod-cm6 / HyperMD-* line classes (editing).
Editing-mode spacing is applied through line padding on CodeMirror lines
(HyperMD-header-N, HyperMD-codeblock-begin/end, HyperMD-hr, …) and
through the height of blank lines, using the same :has(> br:only-child)
blank-line detection that Obsidian itself uses.
Installation
From GitHub
- Download
main.js,styles.cssandmanifest.jsonfrom the latest release. - Copy them into
<vault>/.obsidian/plugins/unified-typography/. - Restart Obsidian (or reload it without saving).
- Open Settings → Community plugins and enable Unified Typography.
Manual install from source
Copy manifest.json, main.js and styles.css from this repository into
<vault>/.obsidian/plugins/unified-typography/ — no build step is needed.
Configure everything under Settings → Unified Typography.
Settings reference
| Section | Setting | Modes |
|---|---|---|
| General | Line height | both |
| General | Paragraph spacing | both |
| Headings | Above / below / size / weight ×6 | both |
| Lists | Space above/below, item gap (unordered) | both |
| Lists | Space above/below, item gap (ordered) | both |
| Lists | Internal paragraph gap | reading |
| Lists | Indentation per level / line height | both |
| Blockquotes | Above / below / internal | reading |
| Code blocks | Above / below / line height | both |
| Tables | Above / below / cell padding / line height | reading (line height: both) |
| Horizontal rules | Above / below | both |
| Callouts | Above / below | reading (+ editing widgets) |
| Math blocks | Above / below | both |
| Embedded content | Above / below | reading |
A note on the two modes
Obsidian renders reading mode as static HTML and editing mode with CodeMirror 6, where live blocks (tables, callouts, embeds, …) appear as embedded widgets. The two pipelines have different DOM structures and layout engines, so while the plugin aligns typography as closely as possible, minor visual differences on some embedded elements between the two modes are unavoidable. If a difference bothers you, please report it (see below) — reports with concrete examples help improve the alignment rules.
Feedback
Found a spacing inconsistency between the two modes, or any other issue? Please open an issue on GitHub — a screenshot comparing reading mode and editing mode side by side makes diagnosis much faster. Feature requests and pull requests are welcome too.
Compatibility
- Requires Obsidian 1.5.0+ (uses CSS
:has(), available since Obsidian 1.2). - On Obsidian 1.13+ the settings tab is rendered declaratively, so every setting is searchable from Obsidian's settings search; older versions fall back to the same UI.
- Works with most themes; generated rules use
!importantso they win over theme defaults. Disable the master toggle to compare against your theme.
License
MIT