This page is part of Themes in Depth and covers typography and article layout.

Typography and article layout

3-2. typography

type ThemeTypographyPreset = "system" | "serif" | "sans";

The preset is reflected in semantic font tokens such as body and heading.

3-3. articleLayout

type ThemeArticleLayoutPreset = "article" | "sidebar" | "full-width";

A theme defines the presentation of a layout preset; it does not replace the route or the component tree.

Diagram source

flowchart LR
    App["Application<br/>Component structure"]
    Hooks["Stable layout hooks"]
    Theme["Theme<br/>Presentation"]
 
    App --> Hooks
    Theme --> Hooks

History

1 changesCollapseExpand

From To

	1	`+ ---`
	2	`+ title: Typography and article layout`
	3	`+ sidebar:`
	4	`+ label: Typography and article layout`
	5	`+ order: 20`
	6	`+ ---`
	7	`+`
	8	`+ This page is part of [Themes in Depth](../theme-system.md) and covers typography and article layout.`
	9	`+`
	10	`+ # Typography and article layout`
	11	`+`
	12	`+ ## 3-2. typography`
	13	`+`
	14	+ ```ts
	15	`+ type ThemeTypographyPreset = "system" \| "serif" \| "sans";`
	16	+ ```
	17	`+`
	18	`+ The preset is reflected in semantic font tokens such as body and heading.`
	19	`+`
	20	`+ ## 3-3. articleLayout`
	21	`+`
	22	+ ```ts
	23	`+ type ThemeArticleLayoutPreset = "article" \| "sidebar" \| "full-width";`
	24	+ ```
	25	`+`
	26	`+ A theme defines the presentation of a layout preset; it does not replace the route or the component tree.`
	27	`+`
	28	+ ```mermaid
	29	`+ flowchart LR`
	30	`+ App["Application<br/>Component structure"]`
	31	`+ Hooks["Stable layout hooks"]`
	32	`+ Theme["Theme<br/>Presentation"]`
	33	`+`
	34	`+ App --> Hooks`
	35	`+ Theme --> Hooks`
	36	+ ```
	37	`+`