Updating the Typography Stack
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The typography stack in the AETHER portfolio is designed to reflect "Supreme Geometric Minimalism." It utilizes high-performance variable fonts to achieve a balance between aesthetic precision and technical efficiency. The stack primarily relies on modern sans-serif typefaces that support various weights and styles through single file assets, minimizing HTTP requests while maintaining high visual fidelity across different display densities.
Updating the typography stack involves managing assets within the aether-fonts/ directory, configuring preloading strategies in the HTML head, and defining global CSS rules that govern how fonts are applied to specific UI components like the Hero section, navigation, and skill cards.
Sources: README.md:20-22, index.html:7-8, aether-style.css:1-5
Asset Management and Loading Strategy
The project utilizes a specific directory structure for font assets to ensure organized deployment. Variable fonts are the preferred format, providing flexibility in font weight without the overhead of loading multiple static files.
Font File Structure
Fonts are located in a dedicated subdirectory to separate assets from core logic:
aether-fonts/SF-Pro-Variable.woff2: Primary typeface for headings and branding.aether-fonts/Inter-Variable.woff2: Secondary typeface for body copy and system-level fallbacks.
Sources: README.md:20-22
Preloading and Performance
To prevent Flash of Unstyled Text (FOUT), the project implements a preloading strategy for the primary variable font. This ensures the browser prioritizes the download of the font file during the initial page load.
<link rel="preload" href="aether-fonts/SF-Pro-Variable.woff2" as="font" type="font/woff2" crossorigin>
Sources: index.html:10
The following diagram illustrates the font loading and application flow:
This flow ensures that the highest quality font is used if available, with a logical fallback chain to maintain readability.
Sources: index.html:10-11, aether-style.css:25-30
Typography Implementation in CSS
The typography is globally managed in aether-style.css using the body selector. The font stack prioritizes 'SF Pro', followed by system-level fallbacks and 'Inter'.
Global Configuration
| Property | Value | Description |
|---|---|---|
| Font Family | 'SF Pro', -apple-system, Inter, sans-serif | The prioritized list of typefaces. |
| Line Height | 1.7 | Ensures readability and vertical rhythm. |
| Font Smoothing | implicit via modern rendering | Optimized for high-DPI displays. |
Sources: aether-style.css:25-28
Responsive Scaling with Fluid Typography
The project uses the clamp() function for titles to ensure typography scales smoothly between mobile and desktop viewports without excessive media queries.
.hero-title {
font-size: clamp(4rem, 10vw, 7rem);
font-weight: 900;
line-height: 0.95;
}
.section-title {
font-size: clamp(2.5rem, 6vw, 4rem);
}
Sources: aether-style.css:151-153, aether-style.css:236-237
Component-Specific Typography Rules
Typography is further refined for specific UI components to establish visual hierarchy.
Branding and Navigation
The logo and loader text use a high-weight variant to emphasize the "AETHER" brand identity.
- Loader Text:
font-weight: 900,font-size: 1.5rem,letter-spacing: 0.1em. - Navigation Logo:
font-weight: 900,letter-spacing: -0.02em.
Sources: aether-style.css:67-71, aether-style.css:114-117
Hero and Stats
The Hero section utilizes typography as a central design element.
- Hero Meta:
font-size: 1.1rem,font-weight: 500. - Stat Numbers:
font-size: 3rem,font-weight: 900.
Sources: aether-style.css:144-146, aether-style.css:179-181
The relationship between these typography classes is shown below:
This diagram demonstrates how specific typography styles extend the global base configuration defined in the body selector.
Sources: aether-style.css:25-30, aether-style.css:67, aether-style.css:151
Dynamic Typography Interaction
The aether-script.js file handles dynamic updates to typography-related elements, specifically the stats counter. This provides a visual transition for numerical data during scroll-triggered events.
Counter Logic
The initCounters function observes elements with the .stat-number class and targets the data-count attribute to animate the text content from 0 to the target value.
const target = +counter.dataset.count;
const increment = target / 50;
let current = 0;
// Timer logic for updating counter.textContent
Sources: aether-script.js:41-45
Conclusion
Updating the typography stack in this portfolio requires a multi-layered approach: managing variable font assets in the file system, ensuring performance through preloading in the HTML, implementing fluid scaling in CSS, and managing dynamic numerical updates via JavaScript. This integrated system ensures that the AETHER brand remains visually consistent and high-performing across all device types.