Bits of .NET

📝 Font Sizing = Responsive Typography

Font sizing affects readability. Master font sizing for responsive, accessible typography.

📝 Font Size Units

/* px - Absolute */
font-size: 16px;

/* em - Relative to parent */
font-size: 1.2em;

/* rem - Relative to root */
font-size: 1.2rem;

/* % - Percentage of parent */
font-size: 120%;

/* Viewport units */
font-size: 2vw;
font-size: 3vh;

/* clamp() - Responsive */
font-size: clamp(1rem, 2.5vw, 2rem);
font-size: clamp(14px, 2vw, 24px);

/* Responsive typography */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

/* Fluid typography */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
}

🎯 Typography Scale

/* Modular scale */
/* 1.25 scale */
h1 { font-size: 2.441rem; }
h2 { font-size: 1.953rem; }
h3 { font-size: 1.563rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.8rem; }
p  { font-size: 1rem; }

/* Small text */
.small { font-size: 0.8rem; }
.extra-small { font-size: 0.6rem; }

/* Large text */
.large { font-size: 1.2rem; }
.extra-large { font-size: 1.5rem; }

/* Responsive headings */
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
}
h2 {
    font-size: clamp(1.25rem, 4vw, 2.5rem);
}

/* Font sizing best practices */
body {
    font-size: 16px; /* Base */
    line-height: 1.6;
}

/* Accessibility */
/* Minimum font size: 16px for body text */
/* Use rem for accessibility */

💡 Font Sizing Tips

• Use rem for accessibility
• Use clamp() for responsive
• Maintain hierarchy
• Keep body text 16px+
• Use modular scale