Typography
The Digiscapes Typography system defines all rules for headings, body text, inline elements, and typographic utilities. It provides a consistent visual hierarchy and ensures readability across all components and templates.
Text Blocks
Text blocks follow a chronological hierarchy from H1 to H6, combined with text size utilities. Headings introduce content sections, while the accompanying text provides context or description.
Structural Elements:
h1 .lead / h2 .normal / h3 .normal / h4 .normal / h5 .normal / h6 .normal
Heading 1 / Lead Text
Deploy to the cloud
with confidence
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Heading 2 / Medium Text
Supercharge
your web app
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Heading 3 / Normal Text
Data to enrich your
online business
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Heading 4 / Normal Text
A better way to ship
your projects
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Heading 5 / Normal Text
Everything you need
to deploy your app
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Heading 6 / Normal Text
Stay on top of
customer support
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Display Headings
Display headings are larger, more expressive heading styles intended for hero sections, landing pages, and promotional blocks. The percentage values assigned to the display heading classes define the relative font-size scale in comparison to the base font size of the project.
Utility Classes:.display-1 / .display-2 / .display-3 / .display-4 / .display-5 / .display-6
Display Headings
Display 1 245%
Display 2 220%
Display 3 195%
Display 4 170%
Display 5 145%
Display 6 120%
Headings
All HTML headings, <h1> through <h5>, are available.
h1. Theme heading
h2. Theme heading
h3. Theme heading
h4. Theme heading
h5. Theme heading
Font Familiy
Font families are defined to ensure consistent rendering across platforms, while relative scaling values compensate for the natural optical differences between typefaces to maintain a uniform visual appearance.
Class Utilities:
.font-family-sans-serif / .font-family-serif / .font-family-monospace
Sans Serif Font
A sans serif font is, as the name suggests, a font without serifs. Grotesk, also known as sans serif linear Antiqua or sans serif, is of several sans serif fonts in the Antiqua font family.
Serif Font
A serif font is a font with small strokes or extensions at the end of the longer strokes. Serifs have their roots in the ancient Roman small caps and became widespread with the advent of letterpress printing.
Monospace Font
A monospaced font is a font in which all spaces are the same size. This means that all letters and characters occupy the same horizontal space and have the same width.
Body text sizes
Utilities for controlling the base font size of an element. These classes define the core reading sizes used throughout the system. Body text sizes are defined in relative units (percentages or rem values). Lead text for teaser. Medium text to show of. Bodytext for normal reading. Small text for caption. Extra Small for footnote.
Class Utilities:
.lead / .medium / .normal / .small / .extra-small
Lead. A lead text (also known as a ‘teaser text’ or ‘preamble’) is a short, concise text that is placed at the beginning of a longer text or article to arouse the reader's interest and motivate them to read on.
Medium. The reading text is the continuous text that contains the relevant information. This type of text places high demands on the choice of font and typesetting in terms of readability. Continuous text in books and magazines, instructions, medication leaflets, websites etc.
Normal. The reading text is the continuous text that contains the relevant information. This type of text places high demands on the choice of font and typesetting in terms of readability. Continuous text in books and magazines, instructions, medication leaflets, websites etc.
Small. Consultation text contains information accompanying a reading text that is not absolutely necessary for its understanding. It is used for marginal text like captions etc.
Extra Small. Footnotes represents side-comments and small print, like copyright and legal text.
Font Weight
Utilities for controlling the font weight of an element. Only applicable if variable fonts are used.
Font Thin 100
Font Extra Light 200
Font Light 300
Font Normal 400
Font Medium 500
Font Semibold 600
Font Bold 700
Font Extra Bold 800
Font Black 900
Text Align
Text alignment utilities provide control over the horizontal alignment of textual content. These classes can be applied to any block-level or inline-block element to adjust how text is positioned within its container.
Available Utilities:.text-start /.text-center / .text-end / .text-justify
Text start.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Text center.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Text end.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Text justify. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Inline text elements
Inline text elements provide semantic meaning and inline-level formatting within a block of text. They modify the appearance or interpretation of specific text fragments without affecting the document structure.
You can use the <mark> tag to highlight text.
This line of text is meant to be treated as no longer accurate.
This line of text will render as underlined.
This line rendered as bold and important text.
This line rendered as italicized text.
Text with superscript
Text with suberscript
Blockquote
Blockquotes are used to represent extended quotations or cited text. They visually distinguish quoted content from surrounding text and are typically styled with additional indentation, spacing, or thematic markers.
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
Code Block
Code blocks are used for displaying multi-line code samples or preformatted text.
<p class="text-center">Sample text here</p> <img src="../files/image.webp" alt="some image" title="Image sample"> <p>And another line of sample text here...</p>