This post demonstrates Vaultex’s typographic system: Inter for UI and body text, Source Code Pro for monospace, and a consistent vertical rhythm throughout. Every heading level, paragraph style, and text decoration is covered here.
The largest heading level, typically used as a page or section title. In most posts the post title already renders as h1, so h1 inside content is reserved for top-level document divisions.
Heading Level 2
Headings drive the table of contents in the right sidebar. Vaultex picks up headings from h1 through h4 (configurable via toc_depth in _config.yml).
Heading Level 3
The hierarchy is rendered with subtle size and weight differences, keeping the visual noise low while still communicating structure clearly.
Heading Level 4
Level 4 headings are used for sub-sections within a topic. They’re smaller but still distinct from body text.
Body Text
Body text uses Inter, a variable font that scales smoothly across weights. The base size is 16px with a comfortable line-height for long-form reading. Paragraphs are separated by vertical spacing rather than indentation.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Emphasis & Decoration
- Bold text is rendered in a heavier weight of Inter.
- Italic text uses the oblique variant of the variable font.
- Bold and italic can be combined.
Strikethroughmarks deleted or deprecated content.Inline codeuses Source Code Pro at a slightly smaller size.
Links
External links open in a new tab by default. Internal links navigate within the site. Links have a distinct color using the theme’s accent variable and show underlines on hover.
Blockquotes
“The best tool is the one that gets out of your way.”
A well-designed theme should disappear into the background and let the content speak.
Nested blockquotes also render correctly:
Outer quote.
Inner quote with extra indentation.
Lists
Unordered
- First item at the top level
- Second item
- Nested item, one level deep
- Another nested item
- Deeply nested, three levels
- Back to the top level
Ordered
- Install Hexo globally with
npm install -g hexo-cli - Create a new site:
hexo init my-blog - Install dependencies:
npm install - Start the dev server:
hexo server
Task List
- Install Vaultex theme
- Configure
_config.yml - Write your first post
- Deploy to production
Horizontal Rules
Horizontal rules are rendered as subtle dividers:
They’re useful for separating major sections within a post.
Superscript and Subscript
Some Markdown renderers support HTML within posts. Water is H2O. Einstein’s famous equation is E = mc2.
Keyboard Shortcuts
Press Ctrl + K to open the search panel. Press Esc to close any overlay.