Improve typography system and typographic details

[sergiomarquezdev]

Summary

This PR enhances the typography system and improves typographic consistency across the site by introducing a modular scale, vertical rhythm system, and applying professional typographic best practices.

Key Changes

Typography System Foundation

• Added a modular scale (Major Third, 1.25 ratio) with CSS custom properties for consistent font sizing (--text-xs through --text-3xl)
• Introduced vertical rhythm system with --base-lh (1.5) and --rhythm (1.5rem) for consistent spacing
• Added --measure (66ch) for optimal prose line length readability

Text Rendering & Kerning

• Updated body line-height to use CSS variable (--base-lh) instead of hardcoded value
• Added font kerning (font-kerning: auto)
• Enabled common ligatures (font-variant-ligatures: common-ligatures)
• Improved font smoothing with -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale
• Set text-rendering: optimizeLegibility for better text rendering

Heading & Paragraph Improvements

• Added font-variant-numeric: lining-nums to headings for consistent number styling
• Added hanging-punctuation: first allow-end to paragraphs for improved typography
• Maintained text-wrap: balance for headings and text-wrap: pretty for paragraphs

Numeric Formatting

• Updated .tabular-nums class to use lining-nums tabular-nums for better alignment with heading styles
• Applied consistent numeric formatting across components (Experience, Certifications)

Print Styles

• Added line-height: 1.4 to print body for better print readability
• Added widow/orphan control (widows: 3; orphans: 3) to paragraphs
• Added page-break-after: avoid to article/section/heading elements

Content & Component Updates

• Replaced hyphens with en-dashes (–) in CV dates and component separators for proper typographic style
• Added max-width: var(--measure) to About summary for improved readability
• Updated separator characters in Experience and Certifications components to use – entity

Notable Details

• The modular scale provides a mathematical foundation for all font sizes, improving visual hierarchy
• Vertical rhythm ensures consistent spacing throughout the document
• Print styles now include proper widow/orphan control for professional document output
• All numeric formatting is now consistent using lining-nums tabular-nums combination

https://claude.ai/code/session_01UH4SYBfyZFWF6XEAz3AmRf