Question 1

How to use Typi with a modular scale library?

Accepted Answer

Typi integrates with Modular Scale by allowing values like ms(3) in the $typi map, but ensure you use Version 2+ as specified in the README to avoid failures. Include the modular-scale Sass library first, then define font sizes with ms() functions for harmonic ratios.

Question 2

Typi vs CSS custom properties for responsive typography?

Accepted Answer

Typi is Sass-based and compiles to static CSS, offering a declarative configuration system, while CSS custom properties allow dynamic changes at runtime. Choose Typi for pre-compiled, consistent designs in Sass projects; use custom properties for more flexible, client-side adjustments.

Question 3

Can Typi generate classes for all typography elements automatically?

Accepted Answer

Yes, using the typi-create-classes mixin, Typi extracts keys from the $typi map and creates CSS classes for each, such as .h1 for headers. This reduces manual CSS writing, but it requires proper configuration in Sass.

Question 4

How to handle font fallbacks when using Typi?

Accepted Answer

Typi doesn't directly manage font fallbacks; you need to add them separately in your CSS. Since Typi outputs font-size properties, include font-family declarations with fallback fonts in your Sass or CSS files as needed.

Question 5

Is Typi compatible with CSS frameworks like Bootstrap?

Accepted Answer

Typi can be used alongside frameworks like Bootstrap, but it may cause conflicts if both define typography styles. It's best to use Typi for custom typography overrides or integrate it carefully by disabling Bootstrap's default typography utilities.

Question 6

How to migrate from Typi v2 to v3?

Accepted Answer

Migration involves updating the $typi map structure due to breaking changes in v3. Refer to the changelog and adjust your Sass maps to match the new syntax, which may require retesting typography across breakpoints.

Typi

What is Typi?

Overview

Use Cases

Best For

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions