CSS Typography and Text Styling

/* Font stack with fallbacks */
body {
    font-family: 
        "Inter", 
        -apple-system, 
        BlinkMacSystemFont, 
        "Segoe UI", 
        Roboto, 
        sans-serif;
}

/* Load custom web font */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;  /* Variable font weight range */
    font-style: normal;
    font-display: swap;  /* Show fallback immediately */
}

/* Load specific font weight */
@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/roboto-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

/* Unicode range for subsetting */
@font-face {
    font-family: "Icons";
    src: url("/fonts/icons.woff2") format("woff2");
    unicode-range: U+E000-U+F8FF;  /* Private Use Area */
}

/* Font shorthand */
h1 {
    /* font: style variant weight size/line-height family */
    font: italic small-caps 700 2rem/1.2 Georgia, serif;
}

/* Individual properties */
p {
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
}

/* Variable font weights */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }

/* Font size adjustment for consistent x-height */
body {
    font-family: "Primary", "Fallback", sans-serif;
    font-size-adjust: 0.5;  /* Preserves x-height across fonts */
}

/* Disable synthetic bold/italic */
.no-synthesis {
    font-synthesis: none;  /* Don't fake bold/italic if not available */
}

/* Recommended: swap for body text */
@font-face {
    font-family: "Body";
    src: url("/fonts/body.woff2") format("woff2");
    font-display: swap;  /* Show fallback immediately */
}

/* Block for icons (prevent invisible icons) */
@font-face {
    font-family: "Icons";
    src: url("/fonts/icons.woff2") format("woff2");
    font-display: block;  /* Wait for icons to load */
}

/* Optional for non-critical decorative fonts */
@font-face {
    font-family: "Decorative";
    src: url("/fonts/decorative.woff2") format("woff2");
    font-display: optional;  /* Only use if already cached */
}

/* Fallback for balance */
@font-face {
    font-family: "Headings";
    src: url("/fonts/headings.woff2") format("woff2");
    font-display: fallback;  /* Brief wait, short swap */
}

<!-- Preload critical fonts -->
<link rel="preload" 
      href="/fonts/inter-var.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>

<!-- Font display CSS -->
<style>
/* Match fallback font metrics to reduce layout shift */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    /* Adjust fallback font size */
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

body {
    font-family: "Inter", 
                 -apple-system, 
                 BlinkMacSystemFont, 
                 sans-serif;
    /* Preserve x-height when fallback is shown */
    font-size-adjust: 0.5;
}

/* Loading class for progressive enhancement */
.fonts-loading body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
</style>

/* Load variable font */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;  /* Supports full weight range */
    font-stretch: 50% 200%;  /* Supports width range */
    font-style: oblique 0deg 10deg;  /* Supports slant range */
}

/* Use high-level properties (preferred) */
h1 {
    font-family: "Inter", sans-serif;
    font-weight: 350;  /* Any value 100-900 */
    font-stretch: 115%;  /* Slightly expanded */
}

h2 {
    font-weight: 650;  /* Custom weight between 600-700 */
}

/* Use font-variation-settings for custom axes */
.custom {
    font-variation-settings: 
        "wght" 450,  /* Weight */
        "wdth" 100,  /* Width */
        "slnt" -5,   /* Slant */
        "GRAD" 50;   /* Custom axis (Grade) */
}

/* Animate weight on hover */
.button {
    font-weight: 400;
    transition: font-weight 0.3s;
}

.button:hover {
    font-weight: 600;  /* Smooth weight transition */
}

/* Responsive typography with variable fonts */
h1 {
    font-family: "Recursive", sans-serif;
    /* Lighter weight at larger sizes */
    font-weight: clamp(300, 900 - 20vw, 700);
    /* More condensed at smaller viewports */
    font-stretch: clamp(75%, 50% + 10vw, 125%);
}

/* Optical sizing (automatic) */
.auto-optical {
    font-optical-sizing: auto;  /* Adjusts opsz based on font-size */
}

/* Manual optical sizing */
.manual-optical {
    font-variation-settings: "opsz" 12;  /* Optimized for 12px */
    font-size: 12px;
}

/* Custom axes (font-specific) */
.roboto-flex {
    font-family: "Roboto Flex", sans-serif;
    font-variation-settings:
        "GRAD" 0,    /* Grade (stroke contrast) */
        "slnt" -10,  /* Slant */
        "XTRA" 468,  /* X-transparent */
        "XOPQ" 96,   /* X-opaque */
        "YOPQ" 79,   /* Y-opaque */
        "YTLC" 514,  /* Y-transparent lowercase */
        "YTUC" 712,  /* Y-transparent uppercase */
        "YTAS" 750,  /* Y-transparent ascender */
        "YTDE" -203, /* Y-transparent descender */
        "YTFI" 738;  /* Y-transparent figure height */
}

/* Optimal body text readability */
body {
    font-size: 1rem;
    line-height: 1.6;  /* Unitless preferred (relative to font-size) */
    letter-spacing: 0.01em;  /* Slight tracking */
}

/* Headings with tighter spacing */
h1 {
    font-size: 3rem;
    line-height: 1.2;  /* Tighter for large text */
    letter-spacing: -0.02em;  /* Negative tracking for large sizes */
}

/* Paragraph first-line indent */
p + p {
    text-indent: 2em;
}

/* Justified text with hyphenation */
.justified {
    text-align: justify;
    hyphens: auto;  /* Requires lang attribute */
    text-justify: inter-word;
}

/* Prevent text wrapping */
.nowrap {
    white-space: nowrap;
}

/* Break long URLs */
.url {
    word-break: break-all;
    overflow-wrap: break-word;
}

/* white-space values comparison */
.normal {
    white-space: normal;  /* Collapse spaces, wrap lines */
}

.nowrap {
    white-space: nowrap;  /* Collapse spaces, no wrap */
}

.pre {
    white-space: pre;  /* Preserve spaces, no wrap */
}

.pre-wrap {
    white-space: pre-wrap;  /* Preserve spaces, wrap lines */
}

.pre-line {
    white-space: pre-line;  /* Collapse spaces, preserve line breaks */
}

/* Code block formatting */
pre code {
    white-space: pre;
    tab-size: 4;  /* Tab width: 4 spaces */
}

/* Text overflow with ellipsis */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Balanced headings (prevents single word on last line) */
h1, h2, h3 {
    text-wrap: balance;  /* Max 4 lines for performance */
    max-inline-size: 40ch;  /* Limit width for readability */
}

/* Pretty paragraphs (prevents orphans/widows) */
p {
    text-wrap: pretty;  /* Avoid single word on last line */
}

/* Traditional approach (still works) */
.traditional {
    text-align: justify;
    hyphens: auto;
    orphans: 3;  /* Min lines at bottom of page */
    widows: 3;   /* Min lines at top of next page */
}

/* Hanging punctuation (Safari) */
blockquote {
    hanging-punctuation: first last;  /* Hang quotes outside */
}

/* Combined for optimal typography */
article p {
    max-inline-size: 65ch;  /* Optimal reading width */
    text-wrap: pretty;
    hyphens: auto;
    hanging-punctuation: first last;
}

/* Multi-line truncation with balanced text */
.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;  /* Balance truncated text */
}

/* Optimal heading layout */
.heading {
    /* Limit width for readability */
    max-inline-size: 30ch;
    /* Balance line lengths */
    text-wrap: balance;
    /* Tighter line height */
    line-height: 1.1;
    /* Negative tracking for large text */
    letter-spacing: -0.02em;
    /* Hang punctuation outside */
    hanging-punctuation: first last;
}

/* Body text optimization */
.body-text {
    max-inline-size: 65ch;
    text-wrap: pretty;  /* Avoid orphans */
    line-height: 1.6;
    hyphens: auto;
}

/* Preserve manual line breaks */
.poem {
    white-space: pre-line;  /* Preserve breaks, wrap long lines */
    text-wrap: balance;
}

/* Vertical text (Japanese, Chinese, Korean) */
.vertical-text {
    writing-mode: vertical-rl;  /* Right-to-left vertical */
    text-orientation: mixed;  /* Rotate Latin chars, upright CJK */
}

.vertical-text-lr {
    writing-mode: vertical-lr;  /* Left-to-right vertical (Mongolian) */
}

/* All characters upright in vertical mode */
.upright {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* Combine numbers in vertical text (tate-chu-yoko) */
.vertical-numbers {
    writing-mode: vertical-rl;
}

.number {
    text-combine-upright: all;  /* Horizontal numbers in vertical text */
}

/* Horizontal text (default) */
.horizontal {
    writing-mode: horizontal-tb;  /* Top-to-bottom horizontal */
}

<!-- HTML lang attribute for proper text handling -->
<html lang="ar" dir="rtl">  <!-- Arabic, right-to-left -->

/* RTL layout */
body {
    direction: rtl;  /* Right-to-left text flow */
    text-align: start;  /* Aligns right in RTL */
}

/* LTR content within RTL page */
.ltr-content {
    direction: ltr;
    unicode-bidi: embed;  /* Isolate from parent direction */
}

/* Bidirectional override (force direction) */
.force-ltr {
    unicode-bidi: bidi-override;
    direction: ltr;
}

/* Isolate mixed content */
.isolated {
    unicode-bidi: isolate;  /* Prevent direction contamination */
}

/* Logical properties work with writing modes */
.international {
    /* Instead of: margin-left, margin-right */
    margin-inline-start: 1rem;  /* Adapts to LTR/RTL */
    margin-inline-end: 1rem;
    
    /* Instead of: margin-top, margin-bottom */
    margin-block-start: 1rem;  /* Adapts to writing mode */
    margin-block-end: 1rem;
}

/* Language-specific font stacks */
:lang(en) {
    font-family: "Inter", -apple-system, sans-serif;
}

:lang(ja) {
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;
}

:lang(zh) {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

:lang(ar) {
    font-family: "Noto Sans Arabic", "Arial", sans-serif;
    direction: rtl;
}

:lang(ko) {
    font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* Auto hyphenation requires lang attribute */
p {
    hyphens: auto;  /* Only works with proper lang attribute */
}

/* OpenType features for specific languages */
.turkish {
    font-language-override: "TRK";  /* Use Turkish-specific glyphs */
}

/* CJK punctuation adjustment */
:lang(ja), :lang(zh) {
    text-spacing-trim: space-all;  /* Trim CJK punctuation spacing */
}