Typeset

When building case studies, design breakdowns, and documentation, rendering raw markdown gives you unstyled HTML elements. Manually styling every paragraph, heading, list item, and table with ad-hoc classes leads to inconsistent visual rhythm.

Jolocky provides a standalone typography system packaged in app/typeset.css. It applies harmonious typographic hierarchy to any content wrapped inside the typeset container.

Copy.typeset-editorial {
  --typeset-font-body: var(--font-sans);
  --typeset-font-heading: var(--font-heading);
  --typeset-font-mono: var(--font-mono);
  --typeset-size: 16px;
  --typeset-leading: 1.75;
  --typeset-flow: 1.5em;
}

Core Rhythm Controls#

Rather than forcing you to configure dozens of isolated spacing properties, Typeset condenses rhythm into three core controls:

• Size (--typeset-size): Sets the base typographic scale for body prose. Headings and sub-elements scale proportionally from this baseline.
• Leading (--typeset-leading): Governs line height and vertical breathing room across paragraphs.
• Flow (--typeset-flow): Dictates margin spacing between consecutive block elements, preventing uneven gaps between headers and paragraphs.

Usage in Next.js#

Import typeset.css into your global stylesheet:

Copy@import "tailwindcss";
@import "./typeset.css";

Wrap your rendered markdown or article content in the typeset container:

Copy<article className="typeset typeset-editorial max-w-3xl mx-auto">
  <MarkdownContent />
</article>

Theme and Dark Mode Integration#

Typeset automatically inherits your theme colors. In dark mode, text and border tokens invert cleanly to match your dark surface palette without requiring special modifier classes.

Escaping Typeset Styles#

If an interactive component inside an article needs to retain its own native styling without being affected by typography rules, add the not-typeset class:

Copy<div className="typeset">
  <p>Styled article text.</p>
  <div className="not-typeset">
    <InteractiveWidget />
  </div>
</div>