Author
Typography plays a crucial role in readability, aesthetics, and the overall user experience of a website. CSS provides properties to control spacing between lines, letters, and words.
Here are the core typography basics every web designer should know:
The font family defines the typeface used for text. You can use web-safe fonts or import custom fonts from Google Fonts.
Example:
<p style="font-family: Arial, sans-serif;">
This text is in Arial (a sans-serif font).
</p>
<p style="font-family: 'Times New Roman', serif;">
This text is in Times New Roman (a serif font).
</p>
Output :
Controls the size of the text. You can use:
Example:
<h1 style="font-size: 40px;">This is a large heading (40px)</h1>
<p style="font-size: 18px;">This is normal paragraph text (18px)</p>
<p style="font-size: 12px;">This is small text (12px)</p>
Output :
The line-height property controls the vertical spacing between lines of text. Proper line spacing makes text easier to read and prevents it from looking crowded or cluttered.
Example:
<p style="line-height: 1;">
This paragraph has a line-height of 1 (tight spacing).
<br>Each line looks very close to the other.
</p>
<p style="line-height: 2;">
This paragraph has a line-height of 2 (loose spacing).
<br>Each line has extra breathing space.
</p>Output :
letter-spacing adjusts the space between individual characters. It’s often used in headings, logos, or stylized text to improve clarity or create a visual effect.
Example:
<h2 style="letter-spacing: 0px;">Normal Letter Spacing</h2>
<h2 style="letter-spacing: 4px;">Wide Letter Spacing</h2>
<h2 style="letter-spacing: -2px;">Tight Letter Spacing</h2>Output :
word-spacing controls the space between words in a line of text. This can improve readability, especially for justified text or large blocks of content.
Example:
<p style="word-spacing: 0px;">
Normal word spacing in this sentence.
</p>
<p style="word-spacing: 10px;">
Increased word spacing in this sentence.
</p>
<p style="word-spacing: -2px;">
Reduced word spacing in this sentence.
</p>Output :
Shifts the first line of a paragraph inward.
<p style="text-indent: 50px;">
The first line of this paragraph is indented by 50px.
</p>Output :
Adds depth, glow, or stylistic effects to text.
Example:
<h1 style="text-shadow: 2px 2px 5px gray;">
This heading has a gray shadow.
</h1>
<h1 style="text-shadow: 0 0 8px red;">
This heading has a glowing red shadow.
</h1>Output :
Controls how text handles spaces and breaks.
Example:
<p style="white-space: nowrap; background: #eee;">
This sentence will not wrap to the next line no matter how long it gets.
</p>
<p style="width: 200px; word-wrap: break-word; background: #eee;">
ThisIsAReallyLongWordThatWillBreakAndWrapIntoMultipleLines.
</p>Output :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Basics Demo</title>
<style>
body {
font-family: "Georgia", "Times New Roman", serif;
background: #f9f9f9;
padding: 30px;
color: #333;
line-height: 1.6;
}
h1 {
font-family: "Roboto", Arial, sans-serif;
font-size: 42px;
text-align: center;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
h2 {
font-size: 28px;
letter-spacing: 2px;
margin-top: 40px;
margin-bottom: 10px;
color: #185a9d;
}
p {
font-size: 18px;
word-spacing: 4px;
text-indent: 30px;
margin-bottom: 20px;
}
.nowrap {
white-space: nowrap;
background: #eee;
padding: 5px;
display: inline-block;
}
.break {
width: 200px;
background: #eee;
padding: 5px;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>Typography Basics in CSS</h1>
<h2>Font Family, Size & Line Height</h2>
<p>
This paragraph is styled using the <strong>Georgia</strong> font with a line-height of 1.6 and font-size of 18px. Proper line-height makes text easier to read and visually balanced across different devices.
</p>
<h2>Letter Spacing & Word Spacing</h2>
<p>
Notice how this paragraph uses increased <em>word spacing</em> and the heading above used <em>letter spacing</em>. These small tweaks improve readability and add style to text content.
</p>
<h2>Text Indent</h2>
<p>
The first line of this paragraph is indented by 30px, which is often used in books, blogs, and articles to signal the start of a new section. It gives a professional, editorial feel to text layout.
</p>
<h2>Text Shadow</h2>
<p style="text-shadow: 1px 1px 4px rgba(255,87,51,0.5); font-size:20px;">
This paragraph has a soft orange shadow applied, making it stand out from the background while maintaining readability.
</p>
<h2>White-Space & Wrapping</h2>
<p>
<span class="nowrap">This sentence will never break into a new line.</span>
</p>
<p class="break">
ThisIsAVeryLongWordThatWouldNormallyBreakTheLayoutButWithWordWrapItBreaksNicely.
</p>
</body>
</html>