Typography
A Dance of Letters and Words
In the heart of a magnificent, endless library, ancient tomes and mysterious scrolls pile up, filled with adventures and secrets. Each script carries its own personality. Some whisper gently like an ancient prophecy, while others almost shout their message, like exuberant wizards performing magic tricks in the marketplace.
With CSS, you have the power to shape and direct these voices.
The size? A simple spell, and it adjusts to your will!
The color? A little alchemy trick, and your text shines in the perfect hue.
Weight and style? No problem!
In your hands, the simplest text transforms into an epic tale. Every tweak is a spell that breathes life into your words.
The Art of Typography
From Delicate Lines to Bold Headlines
The Font Family
A Library of Typographic Styles
In this magical library, you’ll stumble upon font families, each offering a range of styles and weights. Web-safe fonts stand by your side like old, reliable companions, as they are available on almost every device. But if you’re brave enough, you can summon other fonts as well. How to do that will be revealed in a chapter of its own.
h1 {
font-family: Arial, Helvetica, sans-serif;
}Example font-family: Arial;
If this font family is not available on the system, Helvetica or a sans-serif font will be used instead.
Font Weight
The Touch of the Artist
A true calligrapher knows how to vary the pressure of their pen to create delicate or bold strokes. Lighter font weights are like gentle brushstrokes, softly whispering their message. On the other hand, heavier weights are like a booming thunder, drawing all eyes and exuding authority straight away.
h1 {
font-weight: 700;
}Font weight 700 (bold).
Many fonts offer different weights, ranging from 100 (very thin) to 900 (black). Alternatively, you can use terms like light, lighter, bold, or bolder.
Font Size
Scaling the Narrative
The size of your font dictates whether your words tower like majestic mountains or meander quietly through the river of text. Large font sizes are the peaks that demand attention, impossible to miss. Smaller sizes, on the other hand, are like winding trails, beckoning you closer to uncover their secrets.
h1 {
font-size: 2.5rem;
}A font size of 2.5rem translates to 40px, provided the document’s root font size is set to the standard 16px.
Line Height
The Steps of the Story
Line height is the space between rows of words—sometimes expansive, like the grand ballroom of a palace, and sometimes snug, like a bustling marketplace full of energy. Every adjustment changes the rhythm of your text, giving it its own unique cadence.
p {
line-height: 1.5;
}A line height of 1.5 times the font size ensures easy-to-read body text. Other units, such as pixels or percentages, are also allowed for precise adjustments.
Letter Spacing
The Art of Stretching
Increasing the spacing between letters, like the open fields of a meadow, gives them a sense of ease and freedom. Conversely, when the letters huddle close, like houses in a bustling alley, it creates energy and movement.
h1 {
letter-spacing: 5px;
}Here, the letter spacing of the h1 is increased by 5px for a more expansive appearance.
Word Spacing
The Bard’s Art of Storytelling
A skilled bard knows when to let the words flow and when to insert pauses. Word spacing is just that—the dance between the words. A wider spacing, like a stroll through a forest, allows thoughts to linger. A tighter spacing drives the narrative forward, giving it urgency and momentum.
p {
word-spacing: 5px;
}In this case, the word spacing for paragraphs is increased by 5px to encourage a more leisurely reading experience.
In this lesson, you have learned…
- How to use font-family to select suitable fonts for creating clear and readable typography.
- Why font-weight influences the impact of text by varying between light, normal, and bold font weights.
- How font-size determines readability by scaling font sizes with px, rem, or em units.
- Why line-height is important for adjusting line spacing and making text more readable.
- How to control letter-spacing and word-spacing to optimize the spacing between letters and words for better readability and visual appeal.
Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!
The Secrets of the Runes
In a tangled corner of the forest, where even the trees seem to whisper at times, Seran, the old ranger, has uncovered an ancient relic: a tablet where the elders inscribed their most secret knowledge. To unravel these mysteries, you must learn to wield the proper HTML elements. They are like magical keys to the doors of wisdom.
Your Task: Styling the Rune Script
- Font Family:
- Apply a font family like Arial or Georgia to all text.
- Assign the Verdana font family specifically to the .subtext class.
- Font Weight:
- For the .emphasis class, set a font weight of bold.
- Font Size and Line Height:
- Set the
<h1>element to a font size of 36px, and the<p>elements to 18px. - For the .subtext class, assign a font size of 13px.
- Apply a line height of 1.5 for paragraphs to ensure readability.
- Set the
- Letter and Word Spacing:
- Add a letter-spacing of 2px and a word-spacing of 5px to the .emphasis class.
Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!
body {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.subtext {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
}
p {
font-size: 18px;
line-height: 1.5;
}
.emphasis {
font-weight: bold;
letter-spacing: 2px;
word-spacing: 5px;
}