Design Guide
Edmon Low Library

Text - Edmon Low Library

Design Guide

Maintenance & Upkeep

Text

Style guidelines and CSS utility classes for body copy, captions, lead text, and inline links.

Accessibility & Standards

  • Color Contrast: All body copy must maintain a contrast ratio of at least 4.5:1 against its background (WCAG AA).
  • Paragraph Line Height: Standard paragraphs enforce a 1.6 unitless line height for maximum legibility.
  • TinyMCE CMS Integration: Select these classes under Formats > Typography inside the MODX editor.

Standard Paragraphs <p>

Class / Selector Preview Specs Description & Snippet
p, .body-default

The quick brown fox jumps over the lazy dog.

 1rem (16px) / 400 Standard body copy used across all primary page articles and content blocks.
<p>Text</p>
.body-default-emphasized

The quick brown fox jumps over the lazy dog.

 1rem (16px) / 700 Emphasizes key words or short phrases within body copy without altering paragraph hierarchy.
<p class="body-default-emphasized">Text</p>
.body-default-underlined-emphasized

The quick brown fox jumps over the lazy dog.

 1rem (16px) / 700 + Line Used for strong inline visual emphasis where text underlines are required for custom callouts.
<p class="body-default-underlined-emphasized">Text</p>

Small Text .body-sm

Class / Selector Preview Specs Description & Snippet
.body-sm

The quick brown fox jumps over the lazy dog.

 0.875rem (14px) / 400 Used for secondary metadata, image captions, table footnotes, and helper text.
<p class="body-sm">Caption</p>
.body-sm-underlined

The quick brown fox jumps over the lazy dog.

 0.875rem (14px) / Line Underlined fine print or secondary UI links requiring continuous inline visual indicators.
<p class="body-sm-underlined">Text</p>
.body-sm-emphasized

The quick brown fox jumps over the lazy dog.

 0.875rem (14px) / 700 Highlighted notice badges, required field tags, or key terms within smaller body copy.
<p class="body-sm-emphasized">Text</p>

Large & Extra-Large Text

Class / Selector Preview Specs Description & Snippet
.body-lg

The quick brown fox jumps over the lazy dog.

 1.125rem (18px) / 400 Introductory lead paragraphs on major landing pages or featured article summaries.
<p class="body-lg">Intro text...</p>
.body-lg-underlined

The quick brown fox jumps over the lazy dog.

 1.125rem (18px) / Line Underlined introductory copy or stylized section teasers requiring high visibility.
<p class="body-lg-underlined">Lead text</p>
.body-lg-emphasized

The quick brown fox jumps over the lazy dog.

 1.125rem (18px) / 700 Bold lead copy used for prominent takeaway notes or callout summary blocks.
<p class="body-lg-emphasized">Text</p>
.body-xl

The quick brown fox jumps over the lazy dog.

 1.25rem (20px) / 400 Oversized introductory statements, hero unit subheadings, or featured pull-quote text.
<p class="body-xl">Hero intro...</p>
.body-xl-emphasized

The quick brown fox jumps over the lazy dog.

 1.25rem (20px) / 700 High-impact headline copy or bold feature teasers on campaign and exhibit pages.
<p class="body-xl-emphasized">Text</p>

Links <a>

Class / Selector Preview Specs Description & Snippet
a The quick brown fox. Inline Underline Default inline hyperlink. Must always be styled with an underline to ensure clear distinction from standard body text.
<a href="design/typography/text#">Link text</a>
.btn-underlined The quick brown fox. Bold / Action Standalone textual call-to-action link styled as an underlined text button element.
<a href="design/typography/text#" class="btn-underlined">Action</a>
MENU CLOSE