MACRO NEPAL
Complete Guide to HTML and CSS Text Content
awiskar acharya
March 12, 2026
11:06 am

Introduction to Text Content in Web Development

Text content is the foundation of the web. Understanding how to properly structure, style, and optimize text is crucial for creating accessible, readable, and visually appealing websites. This comprehensive guide covers everything from basic HTML text elements to advanced CSS typography techniques.

Key Concepts

  • Semantic HTML: Using meaningful elements for text content
  • Typography: The art of arranging text for readability and visual appeal
  • Accessibility: Making text readable for all users
  • Responsive Text: Text that adapts to different screen sizes
  • Web Fonts: Custom fonts for unique typography
  • Text Effects: Styling techniques for visual enhancement

1. HTML Text Elements

Basic Text Elements

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text Elements</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.example {
background-color: #f5f5f5;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
.example-title {
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
</style>
</head>
<body>
<h1>Main Heading (h1)</h1>
<p>This is a paragraph demonstrating basic text content. 
Paragraphs are the most common way to present text.</p>
<h2>Subheading Level 2 (h2)</h2>
<h3>Subheading Level 3 (h3)</h3>
<h4>Subheading Level 4 (h4)</h4>
<h5>Subheading Level 5 (h5)</h5>
<h6>Subheading Level 6 (h6)</h6>
<div class="example">
<div class="example-title">Inline Text Elements:</div>
<p>
<strong>Bold text using strong</strong> (importance)<br>
<b>Bold text using b</b> (stylistic)<br>
<em>Italic text using em</em> (emphasis)<br>
<i>Italic text using i</i> (stylistic)<br>
<mark>Highlighted text using mark</mark><br>
<small>Small text using small</small><br>
<del>Deleted text using del</del><br>
<ins>Inserted text using ins</ins><br>
<sub>Subscript using sub</sub> and <sup>superscript using sup</sup><br>
<u>Underlined text using u</u><br>
<span>Generic inline container using span</span>
</p>
</div>
<div class="example">
<div class="example-title">Quotations:</div>
<p>Here's a short inline quote: 
<q>This is a short quotation</q>
</p>
<blockquote cite="https://example.com">
<p>This is a longer block quotation. It is indented and can span 
multiple paragraphs. Blockquotes are used for longer citations.</p>
<footer>— Author Name, <cite>Source Title</cite></footer>
</blockquote>
</div>
<div class="example">
<div class="example-title">Code and Preformatted Text:</div>
<p>Use <code>&lt;code&gt;</code> for inline code snippets.</p>
<pre><code>
// This is a code block using pre
function greet(name) {
console.log(`Hello, ${name}!`);
return true;
}
</code></pre>
<p>Keyboard input: <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
<p>Sample output: <samp>Hello, World!</samp></p>
<p>Variable: <var>username</var></p>
</div>
<div class="example">
<div class="example-title">Lists:</div>
<h4>Unordered List:</h4>
<ul>
<li>First item</li>
<li>Second item
<ul>
<li>Nested item 1</li>
<li>Nested item 2</li>
</ul>
</li>
<li>Third item</li>
</ul>
<h4>Ordered List:</h4>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
<h4>Description List:</h4>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language for the web</dd>
</dl>
</div>
<div class="example">
<div class="example-title">Address and Contact:</div>
<address>
Written by <a href="mailto:[email protected]">Author Name</a><br>
Visit us at:<br>
Example.com<br>
123 Main Street<br>
City, State 12345
</address>
</div>
<div class="example">
<div class="example-title">Time and Dates:</div>
<p>The event starts at <time datetime="2024-03-15T19:00">7 PM on March 15, 2024</time>.</p>
<p>The store is open <time datetime="09:00">9 AM</time> to <time datetime="17:00">5 PM</time>.</p>
</div>
<hr>
<footer>
<p>&copy; 2024 Example Company. All rights reserved.</p>
</footer>
</body>
</html>

Semantic Text Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Text Structure</title>
<style>
body {
font-family: 'Georgia', serif;
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
padding: 20px;
color: #333;
}
article {
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
header {
border-bottom: 2px solid #e0e0e0;
margin-bottom: 30px;
padding-bottom: 20px;
}
header h1 {
font-size: 2.5em;
margin-bottom: 10px;
color: #2c3e50;
}
.meta {
color: #7f8c8d;
font-style: italic;
}
section {
margin-bottom: 30px;
}
section h2 {
font-size: 1.8em;
color: #34495e;
border-left: 4px solid #3498db;
padding-left: 15px;
margin-bottom: 20px;
}
section h3 {
font-size: 1.4em;
color: #2980b9;
margin: 20px 0 10px;
}
.note {
background: #f9f9f9;
padding: 15px;
border-left: 4px solid #e74c3c;
margin: 20px 0;
font-style: italic;
}
.note strong {
color: #e74c3c;
}
footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
text-align: center;
color: #7f8c8d;
}
aside {
background: #ecf0f1;
padding: 20px;
border-radius: 6px;
margin: 20px 0;
font-size: 0.95em;
}
aside h3 {
margin-top: 0;
color: #2c3e50;
}
figure {
margin: 20px 0;
text-align: center;
}
figcaption {
font-size: 0.9em;
color: #7f8c8d;
margin-top: 10px;
}
blockquote {
margin: 20px 40px;
padding: 10px 20px;
background: #f9f9f9;
border-left: 4px solid #3498db;
font-style: italic;
}
blockquote footer {
margin-top: 10px;
text-align: right;
border: none;
padding: 0;
font-style: normal;
}
.highlight {
background: #fffacd;
padding: 2px 4px;
border-radius: 3px;
}
.dropcap::first-letter {
font-size: 3em;
float: left;
line-height: 0.8;
margin-right: 8px;
color: #3498db;
font-weight: bold;
}
</style>
</head>
<body>
<article>
<header>
<h1>The Art of Typography in Web Design</h1>
<p class="meta">
<time datetime="2024-03-12">March 12, 2024</time> • 
<span>by <span class="author">Jane Smith</span></span> • 
<span>8 min read</span>
</p>
</header>
<p class="dropcap">
Typography is the art and technique of arranging type to make written language 
legible, readable, and appealing when displayed. In web design, typography plays 
a crucial role in user experience and brand perception.
</p>
<section>
<h2>The Importance of Readability</h2>
<p>
When users visit a website, the primary goal is usually to consume content. 
Whether it's reading an article, browsing products, or finding information, 
the text must be easy to read. <mark class="highlight">Studies show that poor typography 
can increase bounce rates by up to 85%.</mark>
</p>
<aside>
<h3>Did You Know?</h3>
<p>The ideal line length for comfortable reading is between 45-75 characters 
per line. This is why newspapers use columns and why web designers set a 
maximum width for text containers.</p>
</aside>
<p>
Key factors affecting readability include:
</p>
<ul>
<li><strong>Font size:</strong> Body text should typically be 16px or larger</li>
<li><strong>Line height:</strong> 1.5 to 1.8 times the font size is ideal</li>
<li><strong>Line length:</strong> Aim for 45-75 characters per line</li>
<li><strong>Contrast:</strong> Sufficient contrast between text and background</li>
</ul>
</section>
<section>
<h2>Choosing the Right Typeface</h2>
<h3>Serif vs. Sans-Serif</h3>
<p>
Serif fonts (like Times New Roman) have small lines at the ends of characters. 
They're often used in print for body text. Sans-serif fonts (like Arial) lack 
these decorations and are popular for digital screens due to their clean appearance.
</p>
<figure>
<img src="serif-sans-serif-comparison.svg" alt="Comparison of serif and sans-serif fonts" 
style="max-width: 100%; height: auto;">
<figcaption>Figure 1: Serif (left) vs. Sans-serif (right) typefaces</figcaption>
</figure>
<blockquote cite="https://example.com">
<p>"The choice of typeface should be invisible. The reader should focus on the 
content, not the font. Good typography is like good acting - it goes unnoticed."</p>
<footer>— <cite>Design Principles for the Web</cite></footer>
</blockquote>
</section>
<section>
<h2>Responsive Typography</h2>
<p>
With the variety of devices accessing websites today, responsive typography is essential. 
This means text should scale appropriately across different screen sizes.
</p>
<pre><code>
/* Responsive typography example */
body {
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 768px) {
body {
font-size: 18px;
line-height: 1.7;
}
}
@media (min-width: 1200px) {
body {
font-size: 20px;
line-height: 1.8;
}
}
</code></pre>
<div class="note">
<strong>Pro tip:</strong> Use relative units like <code>rem</code> or 
<code>em</code> instead of pixels for better scalability and accessibility.
</div>
</section>
<footer>
<p>© 2024 Jane Smith. All rights reserved.</p>
<p>This article is licensed under a <a href="#">Creative Commons Attribution License</a>.</p>
</footer>
</article>
</body>
</html>

2. CSS Typography Fundamentals

Basic Text Properties

/* CSS Typography Properties */
body {
/* Font Family */
font-family: 'Helvetica Neue', Arial, sans-serif;
/* Font Size */
font-size: 16px;                    /* Absolute unit */
font-size: 1rem;                     /* Relative to root */
font-size: 1.2em;                     /* Relative to parent */
/* Font Weight */
font-weight: normal;                  /* 400 */
font-weight: bold;                    /* 700 */
font-weight: 300;                      /* Light */
font-weight: 600;                      /* Semi-bold */
/* Font Style */
font-style: normal;
font-style: italic;
font-style: oblique;
/* Font Variant */
font-variant: normal;
font-variant: small-caps;              /* Small capitals */
/* Line Height */
line-height: 1.6;                      /* Unitless - relative to font size */
line-height: 24px;                      /* Absolute */
line-height: 160%;                      /* Percentage */
/* Text Alignment */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;                    /* Justified text */
/* Text Decoration */
text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
/* Text Transform */
text-transform: none;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
/* Text Indent */
text-indent: 2em;
/* Letter Spacing (Tracking) */
letter-spacing: normal;
letter-spacing: 0.5px;
letter-spacing: 0.1em;
/* Word Spacing */
word-spacing: normal;
word-spacing: 2px;
/* White Space */
white-space: normal;                    /* Default */
white-space: nowrap;                     /* No wrapping */
white-space: pre;                         /* Preserve whitespace */
white-space: pre-wrap;                    /* Preserve, but wrap */
white-space: pre-line;                    /* Preserve line breaks */
/* Word Break */
word-break: normal;
word-break: break-all;                    /* Break anywhere */
word-break: keep-all;                      /* No breaks */
/* Overflow Wrap */
overflow-wrap: normal;
overflow-wrap: break-word;                 /* Break long words */
/* Text Shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #000;  /* Multiple shadows */
}
/* Font Shorthand */
p {
font: italic small-caps bold 16px/1.8 'Helvetica', Arial, sans-serif;
/* font-style font-variant font-weight font-size/line-height font-family */
}

Typography Examples

/* typography.css - Comprehensive typography styles */
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Typography Scale */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
/* Font Families */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-serif: Georgia, 'Times New Roman', Times, serif;
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
/* Line Heights */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* Colors */
--text-primary: #333;
--text-secondary: #666;
--text-disabled: #999;
--text-inverse: #fff;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
}
/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: var(--leading-tight);
margin-bottom: 1rem;
color: var(--text-primary);
}
h1 {
font-size: var(--text-5xl);
letter-spacing: -0.02em;
}
h2 {
font-size: var(--text-4xl);
letter-spacing: -0.01em;
}
h3 {
font-size: var(--text-3xl);
}
h4 {
font-size: var(--text-2xl);
}
h5 {
font-size: var(--text-xl);
font-weight: 600;
}
h6 {
font-size: var(--text-lg);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Paragraph Styles */
p {
margin-bottom: 1.5rem;
}
.lead {
font-size: var(--text-lg);
font-weight: 300;
line-height: var(--leading-relaxed);
color: var(--text-secondary);
}
/* Text Utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
/* Font Weight Utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }
/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-disabled { color: var(--text-disabled); }
.text-inverse { color: var(--text-inverse); }
/* Line Clamping */
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Truncation */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Lists */
.list-none { list-style-type: none; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.list-outside { list-style-position: outside; }
/* Quotes */
.quote {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-style: italic;
line-height: var(--leading-relaxed);
color: var(--text-secondary);
padding: 1rem 2rem;
position: relative;
}
.quote::before {
content: '"';
font-size: 4rem;
position: absolute;
left: -0.5rem;
top: -0.5rem;
color: rgba(0,0,0,0.1);
}
/* Code */
code, pre {
font-family: var(--font-mono);
font-size: 0.9em;
background: #f5f5f5;
border-radius: 4px;
}
code {
padding: 0.2em 0.4em;
}
pre {
padding: 1rem;
overflow-x: auto;
line-height: 1.4;
}
pre code {
padding: 0;
background: transparent;
}
/* Small Caps */
.small-caps {
font-variant: small-caps;
letter-spacing: 0.05em;
}
/* Dropcap */
.dropcap::first-letter {
font-size: 3em;
float: left;
line-height: 0.8;
margin-right: 0.5rem;
font-weight: 700;
color: #c00;
}
/* Text Shadow Effects */
.text-shadow-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.text-shadow-md {
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.text-shadow-lg {
text-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}
.text-shadow-none {
text-shadow: none;
}
/* Gradient Text */
.gradient-text {
background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Responsive Typography */
@media (max-width: 768px) {
:root {
--text-5xl: 2.5rem;   /* 40px */
--text-4xl: 2rem;     /* 32px */
--text-3xl: 1.75rem;  /* 28px */
}
body {
font-size: 15px;
}
}
@media (max-width: 480px) {
:root {
--text-5xl: 2rem;     /* 32px */
--text-4xl: 1.75rem;  /* 28px */
--text-3xl: 1.5rem;   /* 24px */
}
body {
font-size: 14px;
}
}

3. Web Fonts and @font-face

Using @font-face

/* fonts.css - Web font declarations */
/* Self-hosted fonts with @font-face */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Important for performance */
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-bold.woff2') format('woff2'),
url('fonts/custom-font-bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-italic.woff2') format('woff2'),
url('fonts/custom-font-italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
/* Variable fonts */
@font-face {
font-family: 'VariableFont';
src: url('fonts/variable-font.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
/* Icon fonts */
@font-face {
font-family: 'Icons';
src: url('fonts/icons.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block; /* Prevent FOIT */
}
.icon {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Google Fonts Integration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<!-- Google Fonts - Optimized loading -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Load fonts with display=swap for better UX -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-serif: 'Merriweather', Georgia, serif;
--font-mono: 'Fira Code', 'SF Mono', Monaco, monospace;
}
body {
font-family: var(--font-sans);
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
font-family: var(--font-serif);
font-weight: 700;
}
code, pre {
font-family: var(--font-mono);
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.semibold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
/* Font feature settings */
.tabular-nums {
font-feature-settings: "tnum";
}
.ligatures {
font-feature-settings: "liga" on, "clig" on;
}
.small-caps {
font-feature-settings: "smcp" on;
}
</style>
</head>
<body>
<h1>Google Fonts Integration</h1>
<p class="light">This text uses Inter Light (300 weight).</p>
<p class="regular">This text uses Inter Regular (400 weight).</p>
<p class="medium">This text uses Inter Medium (500 weight).</p>
<p class="semibold">This text uses Inter SemiBold (600 weight).</p>
<p class="bold">This text uses Inter Bold (700 weight).</p>
<p class="italic">This text uses Inter Italic.</p>
<h2>Merriweather Serif Heading</h2>
<p style="font-family: var(--font-serif);">
Merriweather is a serif font designed for on-screen reading. It features a 
very large x-height, slightly condensed letterforms, a mild diagonal stress, 
and sturdy serifs.
</p>
<h3>Code Example with Fira Code</h3>
<pre><code>function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
// Fira Code supports ligatures
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]</code></pre>
<h3>Font Feature Examples</h3>
<p class="tabular-nums">
Tabular numbers: 1234567890 (good for tables)
</p>
<p class="ligatures">
Ligatures: fi fl ffi ffl (connected characters)
</p>
<p class="small-caps">
Small caps: The Quick Brown Fox Jumps Over The Lazy Dog
</p>
</body>
</html>

Font Loading Strategies

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Loading Strategies</title>
<!-- Preload critical fonts -->
<link rel="preload" href="fonts/critical.woff2" as="font" type="font/woff2" crossorigin>
<!-- Font loading with JavaScript -->
<script>
// Font Loading API
if ('fonts' in document) {
// Load critical font
const font = new FontFace('CriticalFont', 'url(fonts/critical.woff2)');
font.load().then(loadedFont => {
document.fonts.add(loadedFont);
document.documentElement.classList.add('fonts-loaded');
}).catch(error => {
console.error('Font loading failed:', error);
});
// Load all fonts
Promise.all([
document.fonts.load('1em "Inter"'),
document.fonts.load('bold 1em "Inter"'),
document.fonts.load('italic 1em "Inter"')
]).then(() => {
document.documentElement.classList.add('all-fonts-loaded');
});
}
// Font Face Observer (alternative)
if (!('fonts' in document)) {
// Load Font Face Observer polyfill
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.3.0/fontfaceobserver.js';
script.onload = function() {
const inter = new FontFaceObserver('Inter');
inter.load().then(() => {
document.documentElement.classList.add('fonts-loaded');
});
};
document.head.appendChild(script);
}
</script>
<style>
/* Fallback fonts while loading */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Applied when fonts are loaded */
.fonts-loaded body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Prevent FOIT (Flash of Invisible Text) */
.fonts-loading body {
visibility: hidden;
}
.fonts-loaded body {
visibility: visible;
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* FOUT (Flash of Unstyled Text) strategy */
.fout body {
font-family: Georgia, serif;
}
.fout.fonts-loaded body {
font-family: 'Merriweather', Georgia, serif;
}
/* Critical FOIT with timeout */
@font-face {
font-family: 'Critical';
src: url('fonts/critical.woff2') format('woff2');
font-display: swap; /* Show fallback immediately, swap when ready */
}
</style>
</head>
<body>
<h1>Font Loading Strategies</h1>
<p>This page demonstrates different approaches to loading web fonts:</p>
<ul>
<li><strong>FOIT (Flash of Invisible Text):</strong> Hide text until fonts load</li>
<li><strong>FOUT (Flash of Unstyled Text):</strong> Show fallback font, then swap</li>
<li><strong>Critical FOIT:</strong> Show fallback quickly, then swap</li>
<li><strong>Font Loading API:</strong> Programmatic control over font loading</li>
</ul>
<h2>Performance Considerations</h2>
<table>
<thead>
<tr>
<th>Strategy</th>
<th>First Paint</th>
<th>First Contentful Paint</th>
<th>Layout Shift</th>
</tr>
</thead>
<tbody>
<tr>
<td>FOIT (default)</td>
<td>Delayed</td>
<td>Delayed</td>
<td>None</td>
</tr>
<tr>
<td>FOUT (font-display: swap)</td>
<td>Fast</td>
<td>Fast</td>
<td>High</td>
</tr>
<tr>
<td>Critical FOIT (font-display: optional)</td>
<td>Fast</td>
<td>Fast</td>
<td>Low</td>
</tr>
</tbody>
</table>
</body>
</html>

4. Text Layout and Composition

Advanced Text Layout

/* text-layout.css - Advanced text composition */
/* Multi-column Layout */
.multi-column {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #ccc;
column-width: 250px; /* Minimum column width */
}
.multi-column h2 {
column-span: all; /* Span across all columns */
margin-bottom: 1rem;
}
/* CSS Grid for Text Layout */
.text-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
align-items: start;
}
.main-content {
grid-column: 1;
}
.sidebar {
grid-column: 2;
position: sticky;
top: 2rem;
}
/* Pull Quotes */
.pull-quote {
float: right;
width: 40%;
margin: 0 0 1rem 1.5rem;
padding: 1rem;
background: #f9f9f9;
border-left: 4px solid #c00;
font-size: 1.2rem;
font-style: italic;
line-height: 1.4;
}
.pull-quote::before {
content: '"';
font-size: 3rem;
position: absolute;
opacity: 0.2;
top: -0.5rem;
left: 0;
}
/* Initial Cap / Drop Cap */
.initial-cap::first-letter {
font-size: 3.5em;
float: left;
line-height: 0.8;
margin-right: 0.5rem;
margin-top: 0.2rem;
font-weight: bold;
color: #c00;
}
/* Ornaments */
.ornament {
text-align: center;
margin: 2rem 0;
}
.ornament::before,
.ornament::after {
content: "✦";
margin: 0 0.5rem;
opacity: 0.5;
}
/* Responsive Text Columns */
@media (max-width: 768px) {
.multi-column {
column-count: 2;
}
.text-grid {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
}
@media (max-width: 480px) {
.multi-column {
column-count: 1;
}
.pull-quote {
float: none;
width: 100%;
margin: 1rem 0;
}
}

Text Wrapping and Overflow

/* text-wrapping.css */
/* Long word handling */
.long-word-container {
width: 300px;
border: 1px solid #ccc;
padding: 1rem;
margin: 1rem 0;
}
/* Different word break strategies */
.break-normal {
word-break: normal;
}
.break-all {
word-break: break-all; /* Break at any character */
}
.break-word {
word-break: break-word; /* Break only when needed */
}
.keep-all {
word-break: keep-all; /* No breaks (for CJK text) */
}
/* Overflow wrapping */
.overflow-normal {
overflow-wrap: normal;
}
.overflow-break-word {
overflow-wrap: break-word; /* Break long words */
}
.overflow-anywhere {
overflow-wrap: anywhere; /* Break anywhere if needed */
}
/* Hyphenation */
.hyphens-none {
hyphens: none;
}
.hyphens-manual {
hyphens: manual;
}
.hyphens-auto {
hyphens: auto; /* Browser adds hyphens where appropriate */
}
/* Text overflow */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-clip {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
/* Multiple line ellipsis */
.multiline-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Writing modes */
.horizontal-tb {
writing-mode: horizontal-tb; /* Default */
}
.vertical-rl {
writing-mode: vertical-rl; /* Vertical, right to left */
}
.vertical-lr {
writing-mode: vertical-lr; /* Vertical, left to right */
}
/* Text orientation */
.sideways-rl {
text-orientation: sideways-rl;
}
.upright {
text-orientation: upright;
}
/* Example usage */
<style>
.example-box {
width: 200px;
border: 1px solid #999;
padding: 10px;
margin: 10px;
background: #f5f5f5;
}
.long-word {
width: 150px;
background: #e0e0e0;
padding: 5px;
}
.japanese {
font-size: 1.2rem;
background: #f0f0f0;
}
</style>
<div class="example-box">
<h4>Word Break Examples:</h4>
<div class="long-word break-normal">
Supercalifragilisticexpialidocious
</div>
<div class="long-word break-all">
Supercalifragilisticexpialidocious
</div>
<div class="long-word break-word">
Supercalifragilisticexpialidocious
</div>
</div>
<div class="example-box">
<h4>Hyphenation:</h4>
<p class="hyphens-auto" lang="en">
This is an example of automatic hyphenation in a paragraph that contains 
some very long words like antidisestablishment and pneumonoultramicroscopicsilicovolcanoconiosis.
</p>
</div>
<div class="example-box">
<h4>Text Overflow:</h4>
<p class="text-ellipsis">
This is a very long text that will be truncated with an ellipsis because it doesn't fit in the container.
</p>
</div>
<div class="example-box">
<h4>Multiline Ellipsis:</h4>
<p class="multiline-ellipsis">
This is a longer paragraph that will be truncated after three lines. 
The text will be cut off and an ellipsis will be shown at the end of 
the third line. This is useful for previews and cards.
</p>
</div>
<div class="example-box">
<h4>Writing Modes:</h4>
<p class="vertical-rl" style="height: 200px;">
This text is written vertically from right to left.
</p>
</div>

5. Text Effects and Styling

Creative Text Effects

/* text-effects.css */
/* Gradient Text */
.gradient-text-1 {
background: linear-gradient(45deg, #f06, #9f6, #06f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 3rem;
font-weight: bold;
}
.gradient-text-2 {
background: radial-gradient(circle at top left, #f06, transparent),
linear-gradient(135deg, #9f6, #06f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Neon Text */
.neon-text {
color: #fff;
text-shadow: 
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff00de,
0 0 30px #ff00de,
0 0 40px #ff00de,
0 0 55px #ff00de,
0 0 70px #ff00de;
font-size: 3rem;
animation: neon-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes neon-pulse {
from {
text-shadow: 
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #ff00de,
0 0 30px #ff00de;
}
to {
text-shadow: 
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #ff00de,
0 0 40px #ff00de,
0 0 50px #ff00de;
}
}
/* Glitch Text */
.glitch-text {
font-size: 3rem;
font-weight: bold;
position: relative;
color: #fff;
background: #000;
padding: 1rem;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
.glitch-text::before {
animation: glitch-1 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
color: #f0f;
z-index: -1;
}
.glitch-text::after {
animation: glitch-2 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
color: #0ff;
z-index: -2;
}
@keyframes glitch-1 {
0% { transform: none; opacity: 1; }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: none; }
}
@keyframes glitch-2 {
0% { transform: none; opacity: 0.8; }
20% { transform: translate(2px, -2px); }
40% { transform: translate(2px, 2px); }
60% { transform: translate(-2px, -2px); }
80% { transform: translate(-2px, 2px); }
100% { transform: none; }
}
/* 3D Text */
.text-3d {
font-size: 3rem;
font-weight: bold;
color: #f1c40f;
text-shadow: 
1px 1px 0 #c0392b,
2px 2px 0 #c0392b,
3px 3px 0 #c0392b,
4px 4px 0 #c0392b,
5px 5px 0 #c0392b,
6px 6px 0 #c0392b,
7px 7px 0 #c0392b,
8px 8px 0 #c0392b;
}
.text-3d-perspective {
font-size: 3rem;
font-weight: bold;
transform: perspective(500px) rotateX(10deg) rotateY(10deg);
text-shadow: 
10px 10px 20px rgba(0,0,0,0.5),
-5px -5px 10px rgba(255,255,255,0.3);
}
/* Embossed / Debossed Text */
.embossed {
font-size: 3rem;
font-weight: bold;
color: #999;
text-shadow: 
-1px -1px 1px #fff,
1px 1px 1px #333;
}
.debossed {
font-size: 3rem;
font-weight: bold;
color: #999;
text-shadow: 
1px 1px 1px #fff,
-1px -1px 1px #333;
}
/* Outlined Text */
.outline-text {
font-size: 3rem;
font-weight: bold;
color: transparent;
-webkit-text-stroke: 2px #333;
text-stroke: 2px #333;
}
.outline-text-multi {
font-size: 3rem;
font-weight: bold;
color: #fff;
text-shadow: 
2px 2px 0 #000,
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000;
}
/* Blurred Text */
.blur-text {
font-size: 3rem;
font-weight: bold;
color: #333;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
transition: text-shadow 0.3s;
}
.blur-text:hover {
text-shadow: 0 0 20px rgba(0,0,0,0.8);
}
/* Animated Text */
@keyframes wave {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
75% { transform: translateY(10px); }
}
.wave-text span {
display: inline-block;
animation: wave 1s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
/* Letter spacing animation */
@keyframes letter-spacing {
0% { letter-spacing: normal; }
50% { letter-spacing: 0.5em; }
100% { letter-spacing: normal; }
}
.animate-letter-spacing {
animation: letter-spacing 3s ease-in-out infinite;
}
/* Typing effect */
.typing-effect {
width: 0;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #333;
animation: typing 4s steps(40) 1s forwards,
blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #333; }
}
/* Text mask with image */
.masked-text {
font-size: 5rem;
font-weight: bold;
background: url('texture.jpg') repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: move-background 10s linear infinite;
}
@keyframes move-background {
from { background-position: 0 0; }
to { background-position: 100% 100%; }
}

Practical Text Effects Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Text Effects</title>
<link rel="stylesheet" href="text-effects.css">
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.demo-section {
background: rgba(255,255,255,0.9);
border-radius: 10px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.demo-section h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
.demo-box {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: center;
min-height: 200px;
}
.demo-item {
text-align: center;
}
.demo-item p {
margin-top: 10px;
color: #666;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="demo-section">
<h2>Gradient Text</h2>
<div class="demo-box">
<div class="demo-item">
<div class="gradient-text-1">GRADIENT</div>
<p>Linear Gradient</p>
</div>
<div class="demo-item">
<div class="gradient-text-2">RADIAL</div>
<p>Radial + Linear</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Neon Effect</h2>
<div class="demo-box" style="background: #111;">
<div class="demo-item">
<div class="neon-text">NEON</div>
<p style="color: #fff;">Pulsing Neon</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Glitch Effect</h2>
<div class="demo-box" style="background: #000;">
<div class="demo-item">
<div class="glitch-text" data-text="GLITCH">GLITCH</div>
<p style="color: #fff;">Digital Glitch</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>3D Effects</h2>
<div class="demo-box">
<div class="demo-item">
<div class="text-3d">3D TEXT</div>
<p>Classic 3D</p>
</div>
<div class="demo-item">
<div class="text-3d-perspective">PERSPECTIVE</div>
<p>3D with Perspective</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Embossed / Debossed</h2>
<div class="demo-box" style="background: #ddd;">
<div class="demo-item">
<div class="embossed">EMBOSS</div>
<p>Embossed</p>
</div>
<div class="demo-item">
<div class="debossed">DEBOSS</div>
<p>Debossed</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Outlined Text</h2>
<div class="demo-box">
<div class="demo-item">
<div class="outline-text">OUTLINE</div>
<p>Webkit Text Stroke</p>
</div>
<div class="demo-item">
<div class="outline-text-multi">OUTLINE</div>
<p>Text Shadow Method</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>Animated Text</h2>
<div class="demo-box">
<div class="demo-item">
<div class="wave-text">
<span style="--i:1">W</span>
<span style="--i:2">A</span>
<span style="--i:3">V</span>
<span style="--i:4">E</span>
</div>
<p>Wave Animation</p>
</div>
<div class="demo-item">
<div class="typing-effect" style="width: auto;">Typing effect...</div>
<p>Typing Animation</p>
</div>
</div>
</div>
</body>
</html>

6. Responsive Typography

Fluid Typography

/* responsive-typography.css */
/* Using viewport units */
.fluid-text {
font-size: calc(16px + 1vw);
line-height: calc(1.4 + 0.2vw);
}
/* Clamp for responsive ranges */
.responsive-heading {
font-size: clamp(1.5rem, 5vw, 3rem);
line-height: clamp(1.2, 2vw, 1.5);
}
/* Fluid typography with custom properties */
:root {
--min-font: 16;
--max-font: 24;
--min-screen: 320;
--max-screen: 1200;
}
body {
font-size: calc(
var(--min-font) * 1px + 
(var(--max-font) - var(--min-font)) * 
(100vw - var(--min-screen) * 1px) / 
(var(--max-screen) - var(--min-screen))
);
}
/* Modular scale for typography */
:root {
--base-size: 1rem;
--scale-ratio: 1.25; /* Perfect fourth */
}
h1 { font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }
h2 { font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }
h3 { font-size: calc(var(--base-size) * var(--scale-ratio) * var(--scale-ratio)); }
h4 { font-size: calc(var(--base-size) * var(--scale-ratio)); }
h5 { font-size: var(--base-size); }
h6 { font-size: calc(var(--base-size) / var(--scale-ratio)); }
/* Different scales for different breakpoints */
@media (min-width: 768px) {
:root {
--scale-ratio: 1.333; /* Perfect fifth */
}
}
/* Container-based typography */
.container-typography {
font-size: clamp(1rem, 2cqw, 1.5rem);
line-height: 1.6;
}
/* Typography with CSS locks */
@supports (font-size: clamp(1rem, 5vw, 2rem)) {
.locked-typography {
font-size: clamp(1rem, 3vw, 1.5rem);
line-height: clamp(1.4, 2vw, 1.6);
}
}
/* Responsive text wrapping */
.responsive-text {
max-width: 70ch; /* Optimal reading width */
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
/* Orientation-based adjustments */
@media (orientation: landscape) {
.landscape-text {
column-count: 2;
column-gap: 2rem;
}
}
/* Print styles */
@media print {
body {
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
a::after {
content: " (" attr(href) ")";
font-size: 90%;
}
h1, h2, h3 {
page-break-after: avoid;
}
p {
orphans: 3;
widows: 3;
}
}

Responsive Typography System

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Typography System</title>
<style>
/* Responsive Typography System */
:root {
/* Base settings */
--base-font-size: 16px;
--base-line-height: 1.6;
/* Type scale */
--ratio: 1.25;
/* Breakpoints */
--mobile: 320px;
--tablet: 768px;
--desktop: 1024px;
--wide: 1440px;
/* Compute sizes */
--h6: calc(var(--base-font-size) / var(--ratio));
--h5: var(--base-font-size);
--h4: calc(var(--base-font-size) * var(--ratio));
--h3: calc(var(--base-font-size) * var(--ratio) * var(--ratio));
--h2: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio));
--h1: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
}
/* Adjust scale for larger screens */
@media (min-width: 768px) {
:root {
--ratio: 1.333; /* Larger ratio for tablets */
}
}
@media (min-width: 1024px) {
:root {
--ratio: 1.414; /* Even larger for desktop */
}
}
@media (min-width: 1440px) {
:root {
--base-font-size: 18px; /* Larger base for wide screens */
}
}
/* Apply the system */
body {
font-size: var(--base-font-size);
line-height: var(--base-line-height);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #333;
background: #fff;
margin: 0;
padding: 2rem;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: var(--h5); }
h6 { font-size: var(--h6); }
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: 600;
}
p {
margin-bottom: 1.5rem;
max-width: 70ch;
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Demo grid */
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.demo-card {
background: #f5f5f5;
padding: 2rem;
border-radius: 8px;
}
.demo-card h3 {
margin-top: 0;
border-bottom: 2px solid #ddd;
padding-bottom: 0.5rem;
}
/* Typography utilities */
.text-container {
max-width: 70ch;
margin: 0 auto;
}
.text-columns {
column-count: 2;
column-gap: 2rem;
}
@media (max-width: 768px) {
.text-columns {
column-count: 1;
}
}
/* Responsive font sizes */
.fluid-text {
font-size: clamp(1rem, 3vw, 2rem);
line-height: clamp(1.4, 4vw, 1.8);
}
.responsive-demo {
background: #f0f0f0;
padding: 2rem;
border-radius: 8px;
margin-top: 2rem;
}
.responsive-demo p {
font-size: clamp(0.875rem, 2vw, 1.125rem);
}
/* Viewport size indicator */
.viewport-size {
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.7);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-family: monospace;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Typography System</h1>
<p class="fluid-text">
This page demonstrates a complete responsive typography system. 
Resize your browser window to see how the text scales smoothly.
</p>
<div class="demo-grid">
<div class="demo-card">
<h3>Modular Scale</h3>
<p>Using a modular scale with ratio: <strong>1.25 (mobile) → 1.333 (tablet) → 1.414 (desktop)</strong></p>
<div style="background: #fff; padding: 1rem; border-radius: 4px;">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</div>
<div class="demo-card">
<h3>Fluid Typography</h3>
<p>Using <code>clamp()</code> for smooth scaling between breakpoints.</p>
<div class="fluid-text">
This text scales fluidly between 1rem and 2rem based on viewport width.
</div>
</div>
<div class="demo-card">
<h3>Optimal Line Length</h3>
<p>Text containers limited to 70 characters per line for optimal readability.</p>
<div style="background: #fff; padding: 1rem; border-radius: 4px;">
<p style="max-width: 70ch;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<div class="responsive-demo">
<h2>Responsive Text Demo</h2>
<div class="text-container">
<p>
<strong>Single column (mobile):</strong> This text container automatically adjusts 
its layout based on screen size. On larger screens, it maintains an optimal line 
length for comfortable reading. The font size also scales smoothly.
</p>
</div>
<div class="text-columns">
<p>
<strong>Column 1:</strong> On larger screens, this text will be displayed in two 
columns, making better use of available space while maintaining readability.
</p>
<p>
<strong>Column 2:</strong> The columns automatically revert to a single column 
on smaller screens using CSS media queries.
</p>
</div>
<p>
<strong>Vertical rhythm:</strong> All text elements maintain consistent vertical 
spacing with proper margins and line heights for a harmonious reading experience.
</p>
</div>
<h2>Breakpoint Information</h2>
<ul>
<li><strong>Mobile:</strong> &lt; 768px - Ratio: 1.25, Base: 16px</li>
<li><strong>Tablet:</strong> 768px - 1024px - Ratio: 1.333, Base: 16px</li>
<li><strong>Desktop:</strong> 1024px - 1440px - Ratio: 1.414, Base: 16px</li>
<li><strong>Wide:</strong> > 1440px - Ratio: 1.414, Base: 18px</li>
</ul>
</div>
<div class="viewport-size" id="viewport-size"></div>
<script>
// Display current viewport size
function updateViewportSize() {
const width = window.innerWidth;
const height = window.innerHeight;
document.getElementById('viewport-size').textContent = `${width} x ${height}`;
}
window.addEventListener('resize', updateViewportSize);
updateViewportSize();
</script>
</body>
</html>

7. Accessibility in Typography

Accessible Text Practices

/* accessible-typography.css */
/* High contrast text */
.high-contrast {
color: #000;
background: #fff;
font-weight: 500;
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #f0f0f0;
--text-secondary: #ccc;
--bg-primary: #1a1a1a;
}
body {
color: var(--text-primary);
background: var(--bg-primary);
}
a {
color: #66b0ff;
}
a:visited {
color: #cc99ff;
}
}
/* Focus indicators for accessibility */
:focus {
outline: 3px solid #4d90fe;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 3px solid #4d90fe;
outline-offset: 2px;
}
/* Skip link for keyboard navigation */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
text-decoration: none;
}
.skip-link:focus {
top: 0;
}
/* Screen reader only text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Text spacing for readability */
.readable-text {
letter-spacing: 0.12em;
word-spacing: 0.16em;
line-height: 1.8;
}
/* Dyslexia-friendly font */
.dyslexia-friendly {
font-family: 'OpenDyslexic', Arial, sans-serif;
line-height: 1.8;
letter-spacing: 0.05em;
}
/* Large text mode */
.large-text {
font-size: 1.5rem;
line-height: 1.5;
}
/* Text resize support */
.resizable-text {
font-size: 1rem;
transition: font-size 0.2s;
}
.resizable-text.large {
font-size: 1.5rem;
}
/* Aria attributes for dynamic content */
[aria-live="polite"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
[aria-hidden="true"] {
display: none;
}
/* High contrast mode adjustments */
@media (forced-colors: active) {
.button {
border: 2px solid ButtonText;
}
a {
color: LinkText;
}
}

Accessibility Checker

// accessibility-checker.js
class AccessibilityChecker {
constructor() {
this.issues = [];
}
// Check color contrast
checkContrast(element) {
const style = window.getComputedStyle(element);
const color = style.color;
const bgColor = style.backgroundColor;
// Simple contrast check (would need actual luminance calculation)
console.log('Checking contrast for:', element);
}
// Check heading hierarchy
checkHeadingHierarchy() {
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
let lastLevel = 0;
headings.forEach(h => {
const level = parseInt(h.tagName[1]);
if (level - lastLevel > 1) {
this.issues.push({
type: 'heading-skip',
element: h,
message: `Heading level skipped from h${lastLevel} to h${level}`
});
}
lastLevel = level;
});
}
// Check for alt text
checkImages() {
document.querySelectorAll('img:not([alt])').forEach(img => {
this.issues.push({
type: 'missing-alt',
element: img,
message: 'Image missing alt text'
});
});
document.querySelectorAll('img[alt=""]').forEach(img => {
if (!img.hasAttribute('role')) {
this.issues.push({
type: 'empty-alt',
element: img,
message: 'Image has empty alt text but may be decorative'
});
}
});
}
// Check link text
checkLinks() {
document.querySelectorAll('a').forEach(link => {
const text = link.textContent.trim();
const ariaLabel = link.getAttribute('aria-label');
if (text.length === 0 && !ariaLabel) {
this.issues.push({
type: 'empty-link',
element: link,
message: 'Link has no text content or aria-label'
});
}
if (text.toLowerCase() === 'click here') {
this.issues.push({
type: 'nonspecific-link',
element: link,
message: 'Link text "click here" is not descriptive'
});
}
});
}
// Check form labels
checkForms() {
document.querySelectorAll('input:not([type="hidden"])').forEach(input => {
const id = input.id;
if (id) {
const label = document.querySelector(`label[for="${id}"]`);
if (!label && !input.getAttribute('aria-label')) {
this.issues.push({
type: 'unlabeled-input',
element: input,
message: 'Input missing associated label'
});
}
}
});
}
// Check font sizes
checkFontSizes() {
document.querySelectorAll('p, li, td, th, div:not([role])').forEach(el => {
const style = window.getComputedStyle(el);
const fontSize = parseFloat(style.fontSize);
if (fontSize < 12 && el.textContent.trim().length > 0) {
this.issues.push({
type: 'small-font',
element: el,
message: `Font size ${fontSize}px may be too small`
});
}
});
}
// Run all checks
runAll() {
this.issues = [];
this.checkHeadingHierarchy();
this.checkImages();
this.checkLinks();
this.checkForms();
this.checkFontSizes();
if (this.issues.length === 0) {
console.log('✅ No accessibility issues found!');
} else {
console.group('⚠️ Accessibility Issues Found');
this.issues.forEach(issue => {
console.warn(`${issue.type}: ${issue.message}`, issue.element);
});
console.groupEnd();
}
return this.issues;
}
}
// Usage
const checker = new AccessibilityChecker();
checker.runAll();

8. Performance Optimization

Font Loading Performance

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Performance Optimization</title>
<!-- Preconnect to font origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Preload critical fonts -->
<link rel="preload" href="fonts/critical.woff2" as="font" type="font/woff2" crossorigin>
<!-- Inline critical CSS for FOUT handling -->
<style>
/* Fallback fonts system */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
}
/* Font loading classes */
.fonts-loaded body {
font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, sans-serif;
}
.fonts-failed body {
/* Stick with fallback fonts */
}
/* FOUT animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fonts-loaded body {
animation: fadeIn 0.3s ease-in;
}
/* Font size adjustment for fallback */
.fonts-loading h1 {
/* Adjust for fallback font metrics */
line-height: 1.2;
margin-bottom: 0.5rem;
}
</style>
<!-- Font loading script -->
<script>
(function() {
// Check if browser supports Font Loading API
if ('fonts' in document) {
Promise.all([
document.fonts.load('1em "CustomFont"'),
document.fonts.load('bold 1em "CustomFont"'),
document.fonts.load('italic 1em "CustomFont"')
]).then(() => {
document.documentElement.classList.add('fonts-loaded');
}).catch(() => {
document.documentElement.classList.add('fonts-failed');
});
// Timeout after 3 seconds
setTimeout(() => {
if (!document.documentElement.classList.contains('fonts-loaded')) {
document.documentElement.classList.add('fonts-timeout');
}
}, 3000);
} else {
// Fallback for older browsers
document.documentElement.classList.add('fonts-failed');
}
// Add loading class
document.documentElement.classList.add('fonts-loading');
})();
</script>
<!-- Load non-critical CSS asynchronously -->
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
<style>
/* Critical CSS inline */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero h1 {
font-size: clamp(2rem, 8vw, 5rem);
margin-bottom: 1rem;
}
/* Font subsetting example */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-latin.woff2') format('woff2');
unicode-range: U+0000-00FF; /* Latin only */
font-display: swap;
}
</style>
</head>
<body>
<div class="hero">
<div>
<h1>Font Performance Demo</h1>
<p>This page demonstrates optimal font loading strategies</p>
</div>
</div>
<main>
<section>
<h2>Performance Optimizations Applied:</h2>
<ul>
<li>✅ Preconnect to font origins</li>
<li>✅ Preload critical fonts</li>
<li>✅ FOUT handling with font-display: swap</li>
<li>✅ Font Loading API with fallback</li>
<li>✅ CSS font subsetting</li>
<li>✅ Async CSS loading</li>
<li>✅ Fallback font sizing adjustments</li>
</ul>
</section>
</main>
</body>
</html>

Subsetting and Optimization

/* font-subsetting.css */
/* Create subsets for different languages */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-latin.woff2') format('woff2');
unicode-range: U+0000-00FF; /* Latin */
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-latin-ext.woff2') format('woff2');
unicode-range: U+0100-017F, U+0180-024F; /* Latin Extended */
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-cyrillic.woff2') format('woff2');
unicode-range: U+0400-04FF; /* Cyrillic */
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-greek.woff2') format('woff2');
unicode-range: U+0370-03FF; /* Greek */
font-display: swap;
}
/* Optimize font loading for different weights */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-300.woff2') format('woff2');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font-700.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
/* Variable font (one file contains all weights) */
@font-face {
font-family: 'VariableFont';
src: url('fonts/variable-font.woff2') format('woff2-variations');
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
/* Font loading strategy */
.fonts-loading body {
/* Adjust layout for fallback fonts */
line-height: 1.5;
}
.fonts-loaded body {
/* Smooth transition when fonts load */
animation: font-fade 0.3s ease-in;
}
@keyframes font-fade {
from { opacity: 0.8; }
to { opacity: 1; }
}

9. Internationalization

Multi-language Support

/* i18n.css */
/* Language-specific styles */
:lang(ar) {
font-family: 'Cairo', 'Traditional Arabic', sans-serif;
line-height: 1.8;
direction: rtl;
}
:lang(he) {
font-family: 'Heebo', 'Arial Hebrew', sans-serif;
direction: rtl;
}
:lang(ja) {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
line-height: 1.8;
}
:lang(zh) {
font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}
:lang(ko) {
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
:lang(th) {
font-family: 'Noto Sans Thai', 'Tahoma', 'Leelawadee', sans-serif;
line-height: 2;
}
/* Bidirectional text support */
[dir="rtl"] .float-left {
float: right;
}
[dir="rtl"] .text-left {
text-align: right;
}
[dir="rtl"] .text-right {
text-align: left;
}
[dir="rtl"] .margin-left {
margin-left: 0;
margin-right: auto;
}
/* Language-specific quotes */
:lang(en) q {
quotes: '“' '”' '‘' '’';
}
:lang(fr) q {
quotes: '«' '»' '‹' '›';
}
:lang(de) q {
quotes: '„' '“' '‚' '‘';
}
:lang(ja) q {
quotes: '「' '」' '『' '』';
}
/* Language-specific hyphenation */
:lang(en) {
hyphens: auto;
}
:lang(de) {
hyphens: auto;
word-break: break-word;
}
:lang(zh),
:lang(ja),
:lang(ko) {
hyphens: none;
word-break: keep-all;
}
/* Line breaking for different scripts */
:lang(zh),
:lang(ja) {
line-break: strict;
}
:lang(en) {
line-break: normal;
}

Internationalization Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>International Typography</title>
<link rel="stylesheet" href="i18n.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.language-selector {
margin-bottom: 2rem;
padding: 1rem;
background: #f5f5f5;
border-radius: 4px;
}
.language-selector button {
padding: 0.5rem 1rem;
margin-right: 0.5rem;
border: 1px solid #ccc;
background: white;
cursor: pointer;
border-radius: 4px;
}
.language-selector button.active {
background: #007bff;
color: white;
border-color: #007bff;
}
.example-block {
margin: 2rem 0;
padding: 2rem;
border: 1px solid #ddd;
border-radius: 8px;
}
.example-block h2 {
margin-top: 0;
border-bottom: 2px solid #eee;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<h1>International Typography Examples</h1>
<div class="language-selector">
<button onclick="setLanguage('en')" class="active">English</button>
<button onclick="setLanguage('ar')">العربية</button>
<button onclick="setLanguage('he')">עברית</button>
<button onclick="setLanguage('ja')">日本語</button>
<button onclick="setLanguage('zh')">中文</button>
<button onclick="setLanguage('ko')">한국어</button>
</div>
<div id="content">
<!-- Content will change based on language selection -->
</div>
<script>
const content = {
en: {
title: "Typography Across Languages",
description: "Different scripts require different typographic considerations.",
paragraph: "This paragraph demonstrates English text with proper line-height, hyphenation, and spacing. The quick brown fox jumps over the lazy dog.",
quote: "To be, or not to be, that is the question."
},
ar: {
title: "الطباعة عبر اللغات",
description: "تتطلب النصوص المختلفة اعتبارات طباعية مختلفة.",
paragraph: "هذه الفقرة توضح النص العربي مع ارتفاع السطر المناسب والواصلة والتباعد. هذا مثال على النص العربي.",
quote: "أكون أو لا تكون، هذا هو السؤال."
},
he: {
title: "טיפוגרפיה בין שפות",
description: "טקסטים שונים דורשים שיקולים טיפוגרפיים שונים.",
paragraph: "פסקה זו מדגימה טקסט עברי עם גובה שורה מתאים, מיקוף ומרווחים. זוהי דוגמה לטקסט בעברית.",
quote: "להיות או לא להיות, זו השאלה."
},
ja: {
title: "言語を超えたタイポグラフィ",
description: "異なるスクリプトには異なるタイポグラフィの考慮事項が必要です。",
paragraph: "この段落は、適切な行の高さ、ハイフネーション、間隔を持つ日本語テキストを示しています。これは日本語のテキストの例です。",
quote: "生きるべきか、死ぬべきか、それが問題だ。"
}
};
function setLanguage(lang) {
// Update active button
document.querySelectorAll('.language-selector button').forEach(btn => {
btn.classList.remove('active');
});
event.target.classList.add('active');
// Update HTML lang attribute
document.documentElement.lang = lang;
// Update direction for RTL languages
document.documentElement.dir = ['ar', 'he'].includes(lang) ? 'rtl' : 'ltr';
// Update content
const data = content[lang];
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = `
<div class="example-block">
<h2>${data.title}</h2>
<p><strong>${data.description}</strong></p>
<p>${data.paragraph}</p>
<blockquote>${data.quote}</blockquote>
</div>
<div class="example-block">
<h2>Typography Features</h2>
<ul>
<li><q>Quotation marks</q> - language-specific</li>
<li>Hyphenation: supercalifragilisticexpialidocious</li>
<li>Line breaking: Pneumonoultramicroscopicsilicovolcanoconiosis</li>
</ul>
</div>
`;
}
// Initialize with English
setLanguage('en');
</script>
</body>
</html>

10. Best Practices and Checklist

Typography Checklist

# Typography Best Practices Checklist
## 🎯 Foundation
- [ ] Choose appropriate typefaces for body text (serif/sans-serif)
- [ ] Select complementary fonts for headings
- [ ] Establish a typographic scale (modular scale)
- [ ] Set base font size (16px recommended for body)
- [ ] Define fallback font stacks
## 📏 Measurements
- [ ] Use relative units (rem, em, %) instead of pixels
- [ ] Set appropriate line-height (1.5-1.8 for body text)
- [ ] Maintain optimal line length (45-75 characters)
- [ ] Define consistent vertical rhythm
- [ ] Use proper letter-spacing for readability
## 📱 Responsiveness
- [ ] Implement fluid typography with clamp()
- [ ] Adjust font sizes at breakpoints
- [ ] Test on multiple device sizes
- [ ] Optimize for different orientations
- [ ] Consider print styles
## 🌐 Web Fonts
- [ ] Use font-display: swap to prevent FOIT
- [ ] Preload critical fonts
- [ ] Preconnect to font origins
- [ ] Subset fonts for language support
- [ ] Optimize font file sizes (WOFF2 format)
- [ ] Implement fallback fonts
## ♿ Accessibility
- [ ] Maintain sufficient color contrast (WCAG AA/AAA)
- [ ] Support text resizing (minimum 200%)
- [ ] Use semantic heading hierarchy (h1-h6)
- [ ] Provide focus indicators
- [ ] Support reduced motion preferences
- [ ] Include skip navigation links
- [ ] Test with screen readers
## 🌍 Internationalization
- [ ] Support RTL languages
- [ ] Use language-specific fonts
- [ ] Implement proper quotation marks
- [ ] Handle different hyphenation rules
- [ ] Support various character sets
## 🎨 Visual Hierarchy
- [ ] Create clear heading hierarchy
- [ ] Use adequate spacing between elements
- [ ] Highlight important text appropriately
- [ ] Maintain consistent typography throughout
- [ ] Use appropriate font weights
## 📝 Content
- [ ] Check for widows and orphans
- [ ] Use proper punctuation
- [ ] Implement proper quote styling
- [ ] Handle long words and URLs
- [ ] Format lists consistently
## ⚡ Performance
- [ ] Minimize number of font files
- [ ] Use font subsetting
- [ ] Implement font loading strategies
- [ ] Lazy load non-critical fonts
- [ ] Monitor font loading performance
## 🔧 Technical
- [ ] Validate HTML and CSS
- [ ] Test cross-browser compatibility
- [ ] Include print stylesheets
- [ ] Use CSS custom properties for theming
- [ ] Document typography system
## 📊 Testing
- [ ] Test on different devices
- [ ] Check in multiple browsers
- [ ] Verify with browser zoom
- [ ] Test with different font sizes
- [ ] Validate with accessibility tools
- [ ] Check performance metrics

Typography System Documentation

/* typography-system.css - Complete Documentation */
/* ====================================
Typography System Documentation
==================================== */
/* 
* This typography system uses a modular scale
* Scale ratio: 1.25 (perfect fourth)
* Base size: 16px
* Scale: 16px → 20px → 25px → 31.25px → 39.0625px
*/
:root {
/* ------------------------------------
Base Settings
------------------------------------ */
--font-base: 1rem;          /* 16px */
--line-height-base: 1.6;     /* 1.6 × font-size */
/* ------------------------------------
Type Scale
------------------------------------ */
--text-xs: 0.75rem;   /* 12px - Small text, captions */
--text-sm: 0.875rem;  /* 14px - Secondary text */
--text-base: 1rem;     /* 16px - Body text */
--text-lg: 1.125rem;   /* 18px - Large body */
--text-xl: 1.25rem;    /* 20px - H6 */
--text-2xl: 1.5rem;    /* 24px - H5 */
--text-3xl: 1.875rem;  /* 30px - H4 */
--text-4xl: 2.25rem;   /* 36px - H3 */
--text-5xl: 3rem;      /* 48px - H2 */
--text-6xl: 4rem;      /* 64px - H1 */
/* ------------------------------------
Font Families
------------------------------------ */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 
'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-serif: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
--font-mono: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 
'Roboto Mono', monospace;
--font-heading: var(--font-sans);
--font-body: var(--font-sans);
/* ------------------------------------
Line Heights
------------------------------------ */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
--leading-loose: 2;
/* ------------------------------------
Letter Spacing
------------------------------------ */
--tracking-tight: -0.025em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* ------------------------------------
Colors
------------------------------------ */
--text-primary: #1a1a1a;
--text-secondary: #4a4a4a;
--text-tertiary: #6a6a6a;
--text-disabled: #999;
--text-inverse: #fff;
--text-link: #0066cc;
--text-link-visited: #663399;
--text-link-hover: #004080;
/* ------------------------------------
Spacing (Vertical Rhythm)
------------------------------------ */
--space-unit: 1.5rem;  /* Base vertical spacing */
--space-xs: calc(var(--space-unit) * 0.5);
--space-sm: calc(var(--space-unit) * 0.75);
--space-md: var(--space-unit);
--space-lg: calc(var(--space-unit) * 1.5);
--space-xl: calc(var(--space-unit) * 2);
--space-2xl: calc(var(--space-unit) * 3);
/* ------------------------------------
Breakpoints
------------------------------------ */
--screen-sm: 640px;
--screen-md: 768px;
--screen-lg: 1024px;
--screen-xl: 1280px;
--screen-2xl: 1536px;
}
/* ------------------------------------
Base Typography
------------------------------------ */
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
}
/* ------------------------------------
Headings
------------------------------------ */
h1, .h1 {
font-size: var(--text-6xl);
line-height: var(--leading-tight);
font-weight: 700;
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-lg);
}
h2, .h2 {
font-size: var(--text-5xl);
line-height: var(--leading-tight);
font-weight: 600;
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-md);
}
h3, .h3 {
font-size: var(--text-4xl);
line-height: var(--leading-snug);
font-weight: 600;
margin-bottom: var(--space-sm);
}
h4, .h4 {
font-size: var(--text-3xl);
line-height: var(--leading-snug);
font-weight: 600;
margin-bottom: var(--space-sm);
}
h5, .h5 {
font-size: var(--text-2xl);
line-height: var(--leading-normal);
font-weight: 600;
margin-bottom: var(--space-xs);
}
h6, .h6 {
font-size: var(--text-xl);
line-height: var(--leading-normal);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
margin-bottom: var(--space-xs);
}
/* ------------------------------------
Body Text
------------------------------------ */
p {
margin-bottom: var(--space-md);
max-width: 70ch;  /* Optimal reading width */
}
.lead {
font-size: var(--text-lg);
font-weight: 300;
color: var(--text-secondary);
}
.small {
font-size: var(--text-sm);
color: var(--text-tertiary);
}
/* ------------------------------------
Links
------------------------------------ */
a {
color: var(--text-link);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
transition: color 0.2s ease;
}
a:hover {
color: var(--text-link-hover);
}
a:visited {
color: var(--text-link-visited);
}
/* ------------------------------------
Lists
------------------------------------ */
ul, ol {
margin-bottom: var(--space-md);
padding-left: 1.5rem;
}
li {
margin-bottom: var(--space-xs);
}
/* ------------------------------------
Blockquotes
------------------------------------ */
blockquote {
margin: var(--space-lg) 0;
padding: var(--space-md) var(--space-lg);
font-style: italic;
border-left: 4px solid #ccc;
color: var(--text-secondary);
background: #f9f9f9;
border-radius: 0 8px 8px 0;
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote footer {
margin-top: var(--space-sm);
font-style: normal;
font-size: var(--text-sm);
color: var(--text-tertiary);
}
/* ------------------------------------
Code
------------------------------------ */
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
background: #f4f4f4;
border-radius: 4px;
}
code {
padding: 0.2em 0.4em;
}
pre {
padding: var(--space-md);
overflow-x: auto;
line-height: var(--leading-normal);
border: 1px solid #e0e0e0;
}
pre code {
padding: 0;
background: transparent;
}
/* ------------------------------------
Responsive Adjustments
------------------------------------ */
@media (max-width: 768px) {
:root {
--text-6xl: 3rem;      /* 48px */
--text-5xl: 2.25rem;   /* 36px */
--text-4xl: 1.875rem;  /* 30px */
--text-3xl: 1.5rem;    /* 24px */
}
p {
max-width: 100%;
}
}
@media (max-width: 480px) {
:root {
--text-6xl: 2.25rem;   /* 36px */
--text-5xl: 1.875rem;  /* 30px */
--text-4xl: 1.5rem;    /* 24px */
}
}
/* ------------------------------------
Print Styles
------------------------------------ */
@media print {
body {
font-size: 12pt;
line-height: 1.5;
color: #000;
}
a {
text-decoration: none;
color: #000;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 90%;
}
pre, code {
background: none;
border: 1px solid #ccc;
}
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
}
p, li {
orphans: 3;
widows: 3;
}
}
/* ------------------------------------
Utility Classes
------------------------------------ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

Conclusion

Text content is the heart of web communication. Mastering HTML and CSS for text involves understanding semantics, typography, accessibility, and performance.

Key Takeaways

  1. Semantic HTML: Use appropriate elements for meaning, not just presentation
  2. Typography Fundamentals: Understand font properties, line-height, and spacing
  3. Web Fonts: Optimize loading with font-display, preloading, and subsetting
  4. Responsive Text: Use fluid typography with clamp() and relative units
  5. Accessibility: Ensure readable text with proper contrast and structure
  6. Internationalization: Support multiple languages and writing directions
  7. Performance: Optimize font loading and text rendering
  8. Consistency: Maintain a typographic system with CSS variables

Best Practices Summary

AreaBest Practice
HTMLUse semantic elements (h1-h6, p, em, strong)
Font SizeUse rem units, set base size to 16px
Line Height1.5-1.8 for body text
Line Length45-75 characters per line
Web FontsUse font-display: swap, preload critical fonts
ResponsiveImplement fluid typography with clamp()
AccessibilityWCAG contrast ratios, focus indicators
PerformanceSubset fonts, use WOFF2 format
TestingTest across browsers, devices, and zoom levels

Mastering text content in HTML and CSS is a fundamental skill that combines technical knowledge with design sensibility. A well-crafted typography system enhances readability, user experience, and overall site quality.

HTML & CSS Learning Guides, Exercises, Projects, Design Systems, Accessibility & Performance (Related to HTML & CSS Development)

HTML & CSS Quiz – Comprehensive Assessment:
This quiz evaluates core knowledge of HTML and CSS including structure, styling, layout, forms, and responsive design. It is used to test practical understanding of front-end fundamentals and identify skill levels in web development.
Read more: https://macronepal.com/bash/html-and-css-quiz-comprehensive-assessment/

Complete Guide to HTML & CSS Tooling & Automation:
This guide explains tools and automation workflows used in modern web development, such as preprocessors, build tools, and task runners that improve efficiency in HTML and CSS projects.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-tooling-automation/

Complete HTML & CSS Exercises:
A collection of practical exercises designed to strengthen HTML and CSS skills through hands-on coding tasks, covering layout, styling, and responsive design concepts.
Read more: https://macronepal.com/bash/complete-html-and-css-exercises/

Complete HTML & CSS Landing Page Project:
This project focuses on building a full landing page using HTML and CSS, helping learners understand real-world website structure, layout design, and UI development.
Read more: https://macronepal.com/bash/complete-html-css-landing-page-project/

HTML & CSS Debugging and Testing Guide:
This guide teaches how to identify and fix errors in HTML and CSS code, along with testing techniques to ensure websites work correctly across browsers.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-debugging-testing/

HTML & CSS Design Systems Guide:
A design system approach helps maintain consistency in UI development using reusable components, styles, and patterns across web projects.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

HTML & CSS Accessibility (A11y) Guide:
This guide focuses on making websites accessible for all users, including proper semantic HTML, keyboard navigation, alt text, and screen reader support.
Read more: https://macronepal.com/bash/complete-guide-to-html-css-accessibility-a11y/

HTML & CSS Performance Guide:
This topic explains optimization techniques such as reducing file size, improving loading speed, and writing efficient HTML and CSS for better website performance.
Read more: https://macronepal.com/bash/complete-guide-to-html-and-css-performance/

HTML & CSS Design Systems (Advanced Overview):
Design systems help developers maintain scalable and consistent UI components across large projects using structured HTML and reusable CSS patterns.
Read more: https://macronepal.com/html-and-css/complete-guide-to-html-and-css-design-systems/

Category : HTML AND CSS

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper