4.4 KiB
4.4 KiB
Context
The current implementation uses Noto Sans Tamil and Noto Sans Malayalam fonts from Google Fonts. While these fonts provide good Unicode coverage, they have rough edges that users find visually unappealing. Additionally, on mobile viewports (≤640px), the hero block typography for these Indic languages is too large, causing the content to overflow and become partially invisible.
The footer contact email tooltip is also not functioning as specified in the share-and-contact-microinteractions spec, which requires it to display randomized helper messages on hover and keyboard focus.
Goals / Non-Goals
Goals:
- Improve hero block mobile layout for Tamil and Malayalam content
- Implement smoother, more visually pleasing Indic fonts
- Fix footer contact email tooltip to display randomized helper messages
- Ensure all changes maintain accessibility and performance standards
Non-Goals:
- Changing desktop layout (only mobile adjustments needed)
- Modifying English or other language typography
- Adding new languages beyond Tamil and Malayalam
- Changing the tooltip message pool content (use existing safe messages)
Decisions
Decision 1: Reduce font sizes on mobile rather than increasing hero height
- Choice: Reduce Tamil/Malayalam font sizes on mobile (≤640px) from 1.9rem/1.08rem to 1.6rem/0.95rem
- Why: Increasing hero height would push feed content further down, reducing above-the-fold content visibility. Smaller fonts maintain content density while ensuring readability.
- Alternative considered: Increasing hero block height to 350px on mobile. Rejected because it reduces the amount of feed content visible without scrolling.
Decision 2: Replace Noto Sans with Baloo fonts for Indic languages
- Choice: Use Baloo 2 for Tamil and Baloo Chettan for Malayalam
- Why: Baloo fonts are specifically designed for Indian languages with rounded, smooth letterforms that are visually pleasing. They maintain excellent readability at various sizes and have good Unicode support.
- Alternative considered: Using system fonts or keeping Noto Sans. Rejected because Noto Sans has rough edges, and system fonts vary too much across devices.
Decision 3: Use font-display: swap for async loading
- Choice: Load Indic fonts with font-display: swap strategy
- Why: Ensures text remains visible during font loading, preventing layout shift and improving perceived performance.
- Alternative considered: font-display: optional. Rejected because it might cause fonts to never load on slow connections.
Decision 4: Fix tooltip via Alpine.js state management
- Choice: Ensure Alpine.js properly manages tooltip visibility state on contact email hover and focus
- Why: The tooltip is already implemented in the footer but may not be triggering correctly due to event handling issues.
- Alternative considered: Rewriting tooltip in vanilla JavaScript. Rejected because Alpine.js is already used throughout the application and provides cleaner reactive state management.
Risks / Trade-offs
- [Risk] Font loading may cause layout shift → Mitigation: Use font-display: swap and ensure fallback fonts have similar metrics to minimize shift.
- [Risk] Smaller fonts may reduce readability for users with vision impairments → Mitigation: Ensure minimum 14px font size and maintain WCAG AA contrast ratios. Users can zoom if needed.
- [Risk] Baloo fonts may not support all Tamil/Malayalam characters → Mitigation: Test with comprehensive character sets and maintain Noto Sans as fallback in font stack.
- [Risk] Tooltip fix may affect other footer interactions → Mitigation: Test all footer link interactions after fix and ensure focus management remains correct.
Migration Plan
- Update Google Fonts link to include Baloo 2 and Baloo Chettan
- Update CSS font-family declarations with new fallback chain
- Add mobile-specific CSS rules for Tamil/Malayalam font sizes
- Adjust hero image height on mobile
- Debug and fix footer tooltip Alpine.js state management
- Test across mobile devices and browsers
- Monitor performance metrics for font loading impact
Open Questions
- Should we preload the Indic fonts to improve loading performance?
- Do we need to adjust line-height along with font-size for optimal readability?
- Are there specific Tamil/Malayalam text samples we should test with to ensure character coverage?