{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "typography-fonts", "title": "Typography", "description": "Learn how to control text appearance through font selection, sizing, spacing, and styling.", "difficulty": "beginner", "lessons": [ { "id": "monospace-font", "title": "Monospace Fonts", "description": "Different font families create different visual impressions. monospace fonts have equal-width characters, making them perfect for displaying code, data, or keyboard shortcuts.

Every computer has a monospace font built in, so font-family: monospace always works. This makes it a safe choice for inline code in any web project.", "task": "Style the inline code with a monospace font. Add font-family: monospace.", "previewHTML": "
\n

Quick Tip

\n

Press Ctrl + S to save your work, or Ctrl + Z to undo.

\n
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.6; } .code { background: #f0f0f0; padding: 0.2rem 0.4rem; border-radius: 4px; }", "sandboxCSS": "", "codePrefix": ".code {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "font-family: monospace;", "validations": [ { "type": "property_value", "value": { "property": "font-family", "expected": "monospace" }, "message": "Set font-family to monospace" } ] }, { "id": "font-size-line-height", "title": "Readable Body Text", "description": "Good typography is invisible—readers focus on content, not struggling to read it. Two properties work together for readability:

font-size controls how big the text appears. For body text, 1rem (16px by default) is a comfortable starting point.

line-height sets the space between lines. A value of 1.6 means the line height is 1.6 times the font size—giving text room to breathe.", "task": "Make the text comfortable to read. Add font-size: 1rem and line-height: 1.6.", "previewHTML": "
\n

The Art of Coffee

\n

Great coffee starts with quality beans. The roast level affects flavor—light roasts are fruity and acidic, while dark roasts are bold and smoky.

\n

Water temperature matters too. Brew between 90-96°C for optimal extraction. Too hot burns the coffee; too cold leaves it weak.

\n
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } h2 { margin: 0 0 1rem; color: #333; } p { margin: 0 0 1rem; color: #444; } p:last-child { margin-bottom: 0; }", "sandboxCSS": "", "codePrefix": "article {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "font-size: 1rem;\n line-height: 1.6;", "validations": [ { "type": "property_value", "value": { "property": "font-size", "expected": "1rem" }, "message": "Set font-size to 1rem" }, { "type": "property_value", "value": { "property": "line-height", "expected": "1.6" }, "message": "Set line-height to 1.6" } ] }, { "id": "font-weight", "title": "Bold Headings", "description": "Font weight controls how thick or thin text appears. Common values include:

• normal (400) — default body text
• bold (700) — strong emphasis
• lighter / bolder — relative to parent

Card titles and headings often use bold text to create visual hierarchy and draw attention to key information.", "task": "Make the card title stand out. Add font-weight: bold.", "previewHTML": "
\n Weekend Special\n

Fresh pastries and artisan coffee, 20% off all items this Saturday and Sunday.

\n
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .card { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; max-width: 320px; } .title { display: block; font-size: 1.25rem; color: steelblue; margin-bottom: 0.5rem; font-weight: normal; } p { margin: 0; color: #555; line-height: 1.5; }", "sandboxCSS": "", "codePrefix": ".title {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "font-weight: bold;", "validations": [ { "type": "property_value", "value": { "property": "font-weight", "expected": "bold" }, "message": "Set font-weight to bold" } ] }, { "id": "text-transform", "title": "Uppercase Labels", "description": "The text-transform property changes text capitalization without editing the HTML. This keeps content semantic while styling it differently:

• uppercase — ALL CAPS (great for labels, buttons)
• lowercase — all lowercase
• capitalize — First Letter Of Each Word

Combined with letter-spacing, uppercase text creates a clean, modern label style often used in UI design.", "task": "Style the tag labels. Add text-transform: uppercase and letter-spacing: 1px.", "previewHTML": "
\n
\n Design\n CSS\n Tutorial\n
\n

Getting Started with Typography

\n

Learn the fundamentals of web typography in this beginner-friendly guide.

\n
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .tags { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .tag { background: #e8f4f8; color: steelblue; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; } h3 { margin: 0 0 0.5rem; } p { margin: 0; color: #555; line-height: 1.5; }", "sandboxCSS": "", "codePrefix": ".tag {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "text-transform: uppercase;\n letter-spacing: 1px;", "validations": [ { "type": "property_value", "value": { "property": "text-transform", "expected": "uppercase" }, "message": "Set text-transform to uppercase" }, { "type": "property_value", "value": { "property": "letter-spacing", "expected": "1px" }, "message": "Set letter-spacing to 1px" } ] }, { "id": "text-decoration", "title": "Text Decoration", "description": "The text-decoration property adds lines to text. Common values:

• underline — line below text
• line-through — strikethrough
• none — removes decoration (useful for links)

You can also style decorations with text-decoration-color and text-decoration-style.", "task": "Show the old price with a strikethrough. Add text-decoration: line-through.", "previewHTML": "
$49.99$29.99
", "previewBaseCSS": "body { font-family: system-ui; padding: 1rem; } .price-box { display: flex; gap: 1rem; align-items: center; } .old-price { color: #999; font-size: 1rem; } .new-price { color: coral; font-size: 1.5rem; font-weight: bold; }", "sandboxCSS": "", "codePrefix": ".old-price {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "text-decoration: line-through;", "validations": [ { "type": "property_value", "value": { "property": "text-decoration", "expected": "line-through" }, "message": "Set text-decoration to line-through" } ] }, { "id": "text-shadow", "title": "Text Shadow", "description": "The text-shadow property adds shadow effects to text. The syntax is:

text-shadow: x-offset y-offset blur color;

Example: text-shadow: 2px 2px 4px gray creates a soft shadow offset down and right.", "task": "Add depth to the heading with text-shadow: 2px 2px 4px gray.", "previewHTML": "

Welcome

", "previewBaseCSS": "body { font-family: system-ui; padding: 2rem; background: linear-gradient(135deg, #667eea, #764ba2); } .hero-title { margin: 0; font-size: 3rem; color: white; text-align: center; }", "sandboxCSS": "", "codePrefix": ".hero-title {\n ", "initialCode": "", "codeSuffix": "\n}", "previewContainer": "preview-area", "solution": "text-shadow: 2px 2px 4px gray;", "validations": [ { "type": "contains", "value": "text-shadow", "message": "Use text-shadow property" }, { "type": "contains", "value": "2px 2px", "message": "Set offset to 2px 2px" } ] } ] }