Fine-tune letter-spacing subtly for different font sizes and weights. Larger text (headlines) often benefits from slight negative spacing, while body text usually requires minor positive adjustments for optimal legibility, especially with web fonts that might have default tight spacing. Always test on various screen sizes and devices.
/* Default spacing for body text */
body {
font-family: 'Inter', sans-serif;
letter-spacing: 0.01em; /* Small positive adjustment for readability */
line-height: 1.6;
}
/* Tighter spacing for headlines/large text */
h1 {
font-family: 'Lora', serif;
font-size: 3em;
letter-spacing: -0.02em; /* Slight negative adjustment */
font-weight: 700;
}
/* Moderate spacing for smaller UI elements (e.g., buttons, tags) */
.button-text {
font-family: 'Inter', sans-serif;
font-size: 0.9em;
letter-spacing: 0.03em; /* More pronounced positive adjustment for smaller caps/buttons */
text-transform: uppercase;
font-weight: 600;
}