Foundations
Typography system for consistent, scalable text.
All 11 TypeScale levels, weight, alignment, semantic elements, and the TypeScaleHelper utility that maps enums to CSS classes and inline styles via design-token custom properties.
TypeScale Levels
The TypeScale enum defines 11 typographic levels. H1-H6 use the display font family, Lead scales 1.2x above body, Body is the default, and Small/Caption/Overline cover smaller text needs.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
TextWeight
Four weight levels map directly to Tailwind font-weight utilities: Regular (font-normal), Medium (font-medium), Semibold (font-semibold), and Bold (font-bold).
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Show code
Copy code
<Typo Scale="TypeScale.Body" Weight="TextWeight.Regular">Regular weight</Typo>
<Typo Scale="TypeScale.Body" Weight="TextWeight.Medium">Medium weight</Typo>
<Typo Scale="TypeScale.Body" Weight="TextWeight.Semibold">Semibold weight</Typo>
<Typo Scale="TypeScale.Body" Weight="TextWeight.Bold">Bold weight</Typo>TextAlign
Four alignment options map to Tailwind text-alignment classes: Start (text-left), Center (text-center), End (text-right), and Justify (text-justify).
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
Show code
Copy code
<Typo TextAlign="TextAlign.Start">Left-aligned text</Typo>
<Typo TextAlign="TextAlign.Center">Center-aligned text</Typo>
<Typo TextAlign="TextAlign.End">Right-aligned text</Typo>
<Typo TextAlign="TextAlign.Justify">Justified text</Typo>TextElement
The TextElement enum controls which HTML element is rendered: Paragraph, Span, Blockquote, OrderedList, and UnorderedList. Dedicated components exist for Blockquote, OrderedList, and UnorderedList with richer APIs.
This is a paragraph element. It renders as a block-level <p> tag with full typography styles applied.
Good design is as little design as possible. Less, but better, because it concentrates on the essential aspects.
- First list item
- Second list item
- Third list item
- First list item
- Second list item
- Third list item
Show code
Copy code
<Typo Element="TextElement.Paragraph">A paragraph element.</Typo>
<Typo Element="TextElement.Span">An inline span element.</Typo>
<Blockquote Citation="Author Name">
A styled blockquote with border and citation.
</Blockquote>
<OrderedList>
<li>First item</li>
<li>Second item</li>
</OrderedList>
<UnorderedList>
<li>Bullet item</li>
<li>Another item</li>
</UnorderedList>TypeScaleHelper Utility
TypeScaleHelper is a static class that maps each TypeScale enum value to a CSS class (GetScaleClass) and an inline style string (GetScaleStyle). Use it in custom components that need typography tokens without the full Typo component.
| TypeScale | GetScaleClass() | GetScaleStyle() |
|---|---|---|
| H1 | font-display | font-size: var(--ui-typo-h1, 2.986rem); line-height: 1.2; |
| H2 | font-display | font-size: var(--ui-typo-h2, 2.488rem); line-height: 1.2; |
| H3 | font-display | font-size: var(--ui-typo-h3, 2.074rem); line-height: 1.2; |
| H4 | font-display | font-size: var(--ui-typo-h4, 1.728rem); line-height: 1.2; |
| H5 | font-display | font-size: var(--ui-typo-h5, 1.44rem); line-height: 1.2; |
| H6 | font-display | font-size: var(--ui-typo-h6, 1.2rem); line-height: 1.2; |
| Lead | (none) | font-size: calc(var(--ui-typo-body, 1rem) * 1.2); line-height: 1.6; |
| Body | (none) | font-size: var(--ui-typo-body, 1rem); line-height: 1.6; |
| Small | (none) | font-size: var(--ui-typo-small, 0.833rem); line-height: 1.6; |
| Caption | (none) | font-size: var(--ui-typo-caption, 0.694rem); line-height: 1.6; |
| Overline | uppercase tracking-[0.14em] | font-size: var(--ui-typo-caption, 0.694rem); line-height: 1.6; |
Show code
Copy code
// Static helper — use in custom components
var cssClass = TypeScaleHelper.GetScaleClass(TypeScale.H1); // "font-display"
var cssStyle = TypeScaleHelper.GetScaleStyle(TypeScale.H1); // "font-size: var(--ui-typo-h1, 2.986rem); line-height: 1.2;"
// H1-H6 get the display font family
// Lead gets 1.2x the body size
// Body is the default (1rem)
// Small uses --ui-typo-small (0.833rem)
// Caption & Overline use --ui-typo-caption (0.694rem)
// Overline additionally gets uppercase + letter-spacingTypography Component Family
Four components make up the typography system: Typo (universal), Blockquote, OrderedList, and UnorderedList. Typo covers all inline and block text needs, while the others provide semantic wrappers with additional styling parameters.
| Component | Key Parameters | Description |
|---|---|---|
| Typo | Scale, Weight, TextAlign, Element, Color, Muted, Mono, Balance, Truncate, Highlight, Strikethrough, Code | Universal typography component. Renders the appropriate HTML tag based on Scale level or explicit Element. Supports weight, alignment, color, monospace, truncation, highlight, strikethrough, and code styling. |
| Blockquote | Citation, Color | Styled blockquote with left border accent and optional citation footer. Supports color variants for the border and text. |
| OrderedList | ListStyle, Spacing | Numbered list supporting decimal, lower-alpha, lower-roman, upper-alpha, and upper-roman styles with configurable spacing. |
| UnorderedList | ListStyle, Spacing | Bullet list supporting disc, circle, square, and none styles with configurable spacing. |
Show code
Copy code
// Typo — the universal typography component
<Typo Scale="TypeScale.H1">Heading</Typo>
<Typo Scale="TypeScale.Body" Weight="TextWeight.Bold" Color="Color.Primary">Bold primary text</Typo>
<Typo Scale="TypeScale.Small" Muted="true">Muted helper text</Typo>
<Typo Scale="TypeScale.Body" Mono="true">Monospaced text</Typo>
<Typo Scale="TypeScale.Body" Truncate="true">Truncated long text...</Typo>
// Blockquote
<Blockquote Citation="Author" Color="Color.Primary">
Styled quote with accent border.
</Blockquote>
// OrderedList / UnorderedList
<OrderedList ListStyle="OrderedListStyle.LowerAlpha" Spacing="Size.Medium">
<li>Alpha item</li>
</OrderedList>
<UnorderedList ListStyle="UnorderedListStyle.Circle">
<li>Circle bullet</li>
</UnorderedList>File Reference
Source files that make up the typography system in the Sillium.Core.Blazor library.
| File | Purpose |
|---|---|
| Models/TypeScale.cs | Enum with 11 typographic levels: H1-H6, Lead, Body, Small, Caption, Overline |
| Models/TextWeight.cs | Enum with 4 font weights: Regular, Medium, Semibold, Bold |
| Models/TextAlign.cs | Enum with 4 alignment options: Start, Center, End, Justify |
| Models/TextElement.cs | Enum with 5 HTML element types: Paragraph, Span, Blockquote, OrderedList, UnorderedList |
| Models/TypeScaleHelper.cs | Static utility mapping TypeScale enum values to CSS class strings and inline style strings using design-token custom properties |
| Components/Typography/ | Component directory containing Typo, Blockquote, OrderedList, and UnorderedList Razor components |