Home
Navigation
↑ Return to top Home Archive About

Typography Guide

Technical Implementation

This guide outlines how to access the full expressive range of the typographic system implemented on Animal Rationis Capax. It balances elegant design with Markdown compatibility and GitHub Pages deployment.

Font System Overview

All fonts are self-hosted (WOFF2) in /fonts/ and declared via @font-face in _fonts.scss.

Responsive Font Sizing

Typographic Utilities

These custom classes enable extended typographic expression in Markdown-rendered HTML:

Class Effect Mobile Behavior
.small-caps Applies proper small caps using EB Garamond SC Slightly reduced size (0.95em)
.oldstyle Activates oldstyle figures (onum) No change
.ligatures Enables discretionary and common ligatures No change
.no-ligatures Disables all ligatures No change
.poetic Adds spacing, italics, and soft coloring for epigraphs Reduced margins and font size (0.95em)
.callout Visual block quote with shaded background and border Extends to viewport edges, smaller font (0.9em)
.whisper Small italic, muted tone, used for asides or commentary Further reduced size (0.8rem)
.drop-cap Beautiful drop cap for first letter Scales from 3.2em to 2.8em on mobile

Semantic Post Types

The site uses semantic post types that influence typographic treatment:

Post Type Classes

Add to your post front matter:

---
layout: post
class: observation  # or: pattern, essay, meditation, fragment, glimpse, photo-essay, etc.
encounter: true     # optional flag for transformative moments
chamber: true       # optional flag for chamber-reviewed texts
ornament: personal  # optional ornament override
---

Typography by Type:

Type Typography Treatment Drop Caps Special Features
observation Generous line spacing (1.65) No Present-tense immediacy
fragment 85% width, italic emphasis No Honors incompleteness
essay Full measure, classical proportions Yes Sustained reading
meditation Can combine with essay Optional Contemplative pacing
pattern Pattern names in .small-caps No Structured sections
gloss .whisper for commentary No Marginalia styling
correspondence Standard format No Direct address
offering Lists with .oldstyle numerals No Curatorial tone
performance May include musical notation No Technical + spiritual
teaching Standard format No Narrative emergence
interlude Often uses .poetic No Seasonal/transitional
glimpse Full-bleed images, centered text No Visual fragments
photo-essay Images within text column Yes Sequential narrative

Compound Classes

Combine types for nuanced treatment:

class: essay meditation  # Gets drop cap + contemplative spacing
class: observation fragment  # External attention, incomplete

Special Modifiers

The Encounter Modifier

When any post becomes transformative:

class: observation
encounter: true

Displays a subtle ✦ marker and increases line height to 1.8 for breathing room.

The Chamber Modifier

For texts that have undergone chamber review:

class: essay
chamber: true

Displays the ⟐ mark (divided lozenge) and may include additional spacing for contemplative reading.

Implementation in Markdown

Raw HTML Embedding in Markdown

GitHub Pages supports inline HTML. You can use this to apply styles:

<p class="small-caps">This sentence uses small caps.</p>

<p class="poetic">Where there is no vision, the people perish.</p>

<p class="whisper"><em>A quiet aside, noted softly.</em></p>

Avoid mixing with fenced code blocks or indented Markdown blocks.

Drop Caps

Drop caps are now intentionally applied rather than automatic, following classical typography principles where drop caps mark significant beginnings.

For Essays and Substantial Pieces:

Add the .essay class to your layout or post front matter:

---
layout: post
class: essay
---

This will automatically apply a drop cap to the first paragraph.

Manual Drop Cap Application: 

<p class="drop-cap">This paragraph will have a beautiful drop cap.</p>

To Disable Drop Caps: 

<p class="no-drop-cap">This paragraph will not have a drop cap.</p>

Note: Drop caps now require intentional application to preserve their semantic weight and classical meaning.

3. Headings and Lists

These are handled via your existing SCSS:

To apply variants (e.g. .ligatures, .oldstyle) to sections:

<section class="oldstyle">
  <p>1759 was a fine year for numerals like these.</p>
</section>

4. Code Blocks and Inline Code

Styled by default with IBM Plex Mono:

`inline code`

or

```bash
zsh ./deploy.sh
```

On mobile, code blocks extend to viewport edges with horizontal scrolling when needed.

5. Images and Classical Proportions

The site uses Aldus Manutius-inspired proportional relationships for images:

Standard Images (85% width): 

![Description](image.jpg)

Creates harmonious proportions with text measure.

Small Images (Golden Ratio - 61.8% width): 

![Description](image.jpg){: .image-small}

Perfect for portraits or decorative elements using φ (phi) proportions.

Large/Full-width Images: 

![Description](image.jpg){: .image-large}

For architectural photography or landscape images requiring emphasis.

Image Captions (Aldine Style):

Captions automatically use:

![Architecture detail](building.jpg)
*Figure 1: Classical proportions in Renaissance architecture*

6. Typographic Ornaments

Classical ornaments replace standard horizontal rules (<hr>):

Automatic Ornament (replaces <hr>): 

---

Renders as: ❦ (Aldus leaf)

Custom Ornaments with Data Attributes: 

<hr data-ornament="asterism">   <!-- ⁂ -->
<hr data-ornament="fleuron">    <!-- ❧ -->
<hr data-ornament="triple">     <!-- • • • -->
<hr data-ornament="council">    <!-- ⟐ -->

Ornament Classes: 

<div class="ornament"></div>              <!-- ❦ (default) -->
<div class="ornament asterism"></div>     <!-- ⁂ -->
<div class="ornament fleuron"></div>      <!-- ❧ -->
<div class="ornament lozenge"></div>      <!-- ◊ -->
<div class="ornament council"></div>      <!-- ⟐ -->
<div class="ornament triple"></div>       <!-- • • • -->
<div class="ornament section"></div>      <!-- § § § -->

Contextual Ornaments: 

<div class="ornament chapter"></div>      <!-- ❦ ❦ ❦ -->
<div class="ornament article"></div>      <!-- ⁂ -->
<div class="ornament thought"></div>      <!-- ❧ -->

Content-Aware Ornaments:

Based on the nature of your content, use these semantically meaningful ornaments:

<div class="ornament personal"></div>     <!-- ❦ for personal reflections -->
<div class="ornament musical"></div>      <!-- ⁂ for musical discussions -->
<div class="ornament philosophical"></div><!-- ❧ for philosophical asides -->
<div class="ornament travel"></div>       <!-- ◊ for travel/place descriptions -->
<div class="ornament chamber"></div>      <!-- ⟐ for chamber-reviewed texts -->
<div class="ornament glimpse"></div>      <!-- ◉ for photographic moments -->
<div class="ornament photo-essay"></div>  <!-- ⊙ ⊙ ⊙ for sequential visual narrative -->

Jekyll Include: 




<div class="ornament asterism"></div>



<div class="ornament fleuron"></div>



<div class="ornament personal"></div>



<div class="ornament council"></div>



<div class="ornament aldus"></div>  <!-- default aldus -->

7. Poetic Styling

For quotes or personal fragments:

<p class="poetic">
  There is a silence before meaning,<br>
  and a texture in the waiting.
</p>

🧭 Navigation Typography

Post types appear in breadcrumbs using IBM Plex Sans at 13px:

Observations → Morning Light Through Catalan Shutters

Chamber-reviewed pieces may show an additional indicator:

Essays → The Pattern Language of Attention ⟐

Navigation uses IBM Plex Sans Regular (400 weight) to distinguish from bold headings while maintaining readability at small sizes.

📱 Mobile-Specific Features

Responsive Padding System

Typography Enhancements

🔎 Debugging Notes

🪶 Implementation Notes

SCSS Structure

Visual Compensation

Different fonts appear different sizes even at the same point size. We compensate:

$garamond-scale: 1;      // Baseline
$plex-sans-scale: 0.94;  // Appears larger
$plex-mono-scale: 0.88;  // Appears larger still

Chamber Review Implementation

For chamber-reviewed texts:

.chamber-mark {
  font-family: $font-body;
  font-size: 1.1em;
  color: $color-text-muted;
  margin-left: 0.25em;
}

article[data-council="true"] {
  .post-content {
    line-height: 1.75; // Slightly more breathing room
  }
}

Future Enhancements

For the philosophy behind these choices, see Typography: The Shape of Thought. This technical guide serves implementation; that page serves understanding.