Calculate harmonious font sizes using modular scales for web typography. Generate consistent, balanced, and responsive type systems for professional UI design.
AI Generation Prompt
Technical Specification: Modular Scale Typography Calculator
1. Overview
A browser-based tool designed for UI/UX designers and frontend developers to generate harmonious typographic scales. The application allows users to input a base font size and a chosen ratio to compute a sequence of consistent font sizes, perfect for establishing a design system.
2. Feature Set
- Live Calculation Engine: Real-time computation of font sizes based on inputs (Base Size, Ratio, Number of Steps).
- Preset Ratios: A dropdown selection for standard musical and geometric ratios (e.g., Minor Second, Major Third, Perfect Fourth, Golden Ratio).
- Visual Preview Panel: An interactive area that renders sample text using the calculated font sizes to demonstrate visual hierarchy.
- CSS Code Generator: Automatically generates ready-to-copy CSS variables or custom classes for quick implementation.
- Unit Converter: Optional toggle to output values in pixels (px) or relative units (rem/em).
- Export/Copy: One-click functionality to copy the generated scale values to the clipboard.
3. UI/UX Layout
- Header: Clean, minimalist title with a short description of the tool's purpose.
- Control Sidebar: A dedicated left-side panel (or top-row on mobile) containing input fields for:
- Base Size (number input).
- Ratio selection (dropdown).
- Step count (range slider).
- Main Display:
- Typography Preview: A cards-based layout showing headings (H1-H6) and paragraph text using the scale.
- CSS Output: A syntax-highlighted code block area with a "Copy" button.
4. Color Palette (Light Mode Only)
- Primary Background:
#FFFFFF(White) - Surface/Card Background:
#F8F9FA(Soft Gray) - Primary Text:
#212529(Dark Charcoal) - Accent/Action Color:
#0D6EFD(Professional Blue) - Border Color:
#DEE2E6(Light Gray) - Success/Feedback Color:
#198754(Standard Green for 'Copied!' feedback)
5. Technical Constraints & Implementation
- Architecture: Single HTML file containing all logic (Vanilla JS) and styles (Tailwind CSS via CDN).
- Storage: ABSOLUTELY NO localStorage, sessionStorage, or cookies. All calculations are transient in-memory state.
- Sandboxing:
- No pop-ups (alert/prompt). Use custom HTML/CSS modals for user notifications.
- All links to external resources must use
rel="noopener noreferrer".
- Performance: Optimized for instant rendering. Use requestAnimationFrame for any UI updates to ensure smooth performance.
- Responsiveness: Use CSS Flexbox/Grid for a fluid layout that stacks the control sidebar above the preview panel on mobile devices.
6. Animation & Interaction
- Transitions: Use CSS
transition(ease-in-out) for all input changes. When the ratio or base size updates, the font sizes should scale smoothly within the preview panel, not just jump. - Micro-interactions: A slight scale-up effect on button hover. A subtle fade-in animation for new CSS lines generated.
- Copy Feedback: A temporary 'toast' message that appears near the copy button, fading out after 2 seconds to confirm the data was copied.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a modular scale in typography?
A modular scale is a series of font sizes that are related to one another by a consistent ratio. By establishing a base size and multiplying it by a specific ratio (such as the golden ratio or a perfect fourth), designers can create a harmonious hierarchy that feels natural and balanced to the human eye. This mathematical approach eliminates guesswork when choosing font sizes for headings, subheadings, and body text. Instead of picking arbitrary pixels, you follow a predictable sequence that maintains consistent proportional relationships across your entire user interface.
How do I implement the generated sizes into my CSS?
Once you have determined your desired scale and base font size, the calculator generates a corresponding list of pixel values. You can easily translate these values into rem units, which are the standard for modern, accessible web development, by dividing the pixel value by your root font size (usually 16px). Copy the generated CSS snippet provided by the tool directly into your stylesheet. Using these calculated values ensures that your typography remains consistent regardless of the device or screen size, which is a fundamental pillar of professional UI development and responsive design.
Why is responsive typography important for modern websites?
Responsive typography ensures that your content remains readable and visually appealing on all devices, from massive desktop monitors to small smartphone screens. When font sizes scale proportionately, the hierarchy of the page remains intact, ensuring that headers always stand out properly compared to body text regardless of the available viewport width. Failing to use a scale can lead to inconsistent experiences where text might appear too large on mobile devices or too small on desktop screens. By using a modular system, you create a fluid design language that adapts gracefully, improving both aesthetic quality and user accessibility across all platforms.
Is this typography calculator tool free and secure to use?
Yes, this tool is 100% free to use for all designers and developers. There are no hidden costs, subscriptions, or login requirements, and all calculations are performed locally within your browser's memory, ensuring your design settings are never transmitted or stored elsewhere. Because this application runs entirely within your browser, it is highly secure and respects your privacy. We do not use cookies, local storage, or server-side databases, meaning no data is tracked or saved, making it a reliable utility for quick prototyping during your design workflow.
