Why typography control is needed in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a readable font size using Tailwind CSS.

Tailwind

<p class="text-[1]">This is a paragraph with controlled typography.</p>

Drag options to blanks, or click blank then click option'

Asm

Bxl

Cbase

D2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a font size too large or too small for body text.

Using heading sizes for paragraphs.

The text-base class sets a comfortable default font size for body text, improving readability.

2fill in blank

medium

Complete the code to add proper line spacing for better readability.

Tailwind

<p class="leading-[1]">Good line height helps users read text easily.</p>

Drag options to blanks, or click blank then click option'

Anormal

Brelaxed

Csnug

Dtight

Attempts:

3 left

💡 Hint

Common Mistakes

Using too tight line height causing text to look cramped.

Using line heights meant for headings.

The leading-relaxed class increases line height, making text easier to scan and read.

3fill in blank

hard

Fix the error in the class to set the font weight for emphasis.

Tailwind

<strong class="font-[1]">Important text</strong>

Drag options to blanks, or click blank then click option'

Abold

Blight

Cnormal

Dmedium

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light which makes text thinner.

Using font-normal which is default weight.

The font-bold class makes text bold, which is good for emphasis.

4fill in blank

hard

Fill both blanks to create a heading with large size and tight letter spacing.

Tailwind

<h1 class="text-[1] tracking-[2]">Welcome to the site</h1>

Drag options to blanks, or click blank then click option'

A4xl

B5xl

Ctight

Dwide

Attempts:

3 left

💡 Hint

Common Mistakes

Using too small font size for headings.

Using wide letter spacing which looks spaced out.

Using text-5xl makes the heading large, and tracking-tight reduces space between letters for a neat look.

5fill in blank

hard

Fill all three blanks to style a paragraph with medium font weight, relaxed line height, and base font size.

Tailwind

<p class="font-[1] leading-[2] text-[3]">This paragraph is easy to read.</p>

Drag options to blanks, or click blank then click option'

Amedium

Brelaxed

Cbase

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using bold font weight which can be too strong for paragraphs.

Using tight line height making text cramped.

Using too large or too small font size.

The combination of font-medium, leading-relaxed, and text-base creates balanced and readable text.

Practice

1. Why is typography control important in web design?

easy

A. It makes text easier to read and visually appealing.

B. It increases the website's loading speed.

C. It reduces the number of images needed.

D. It automatically translates text to other languages.

Solution

1. Step 1: Understand typography's role

   Typography controls how text looks, affecting readability and attractiveness.

2. Step 2: Identify the main benefit

   Making text easy to read and attractive helps users stay engaged.

3. Final Answer:

   It makes text easier to read and visually appealing. -> Option A

4. Quick Check:

   Typography improves readability = D [OK]

Hint: Think about what helps users read text comfortably [OK]

Common Mistakes:

• Confusing typography with site speed
• Thinking typography changes images
• Assuming it translates text

2. Which Tailwind CSS class controls the font size of text?

easy

A. p-4

B. font-bold

C. bg-blue-500

D. text-lg

Solution

1. Step 1: Identify font size classes in Tailwind

   Classes starting with text- control font size, e.g., text-lg.

2. Step 2: Differentiate from other classes

   font-bold controls weight, bg-blue-500 controls background color, p-4 controls padding.

3. Final Answer:

   text-lg -> Option D

4. Quick Check:

   Font size uses text- prefix = A [OK]

Hint: Look for classes starting with 'text-' for font size [OK]

Common Mistakes:

• Choosing font weight class
• Confusing background color with text size
• Picking padding class

3. What will be the visual effect of applying class="text-sm font-semibold text-gray-700" to a paragraph?

medium

A. Small, semi-bold, dark gray text

B. Medium, normal weight, black text

C. Large, light, blue text

D. Extra small, bold, red text

Solution

1. Step 1: Decode each class

   text-sm means small text size, font-semibold means semi-bold weight, text-gray-700 means dark gray color.

2. Step 2: Match classes to options

   Small, semi-bold, dark gray text matches small size, semi-bold weight, and dark gray color exactly.

3. Final Answer:

   Small, semi-bold, dark gray text -> Option A

4. Quick Check:

   Class meanings = small + semi-bold + gray = C [OK]

Hint: Break down each class meaning separately [OK]

Common Mistakes:

• Mixing font weight with size
• Confusing gray with black or blue
• Ignoring semi-bold meaning

4. You want to make text bold and increase spacing between letters using Tailwind, but your code <p class="font-bold letter-spacing-2">Hello</p> doesn't work. What is the error?

medium

A. You must use font-semibold instead of font-bold.

B. The class letter-spacing-2 is invalid in Tailwind.

C. The font-bold class should be placed after letter-spacing-2.

D. Tailwind does not support letter spacing control.

Solution

1. Step 1: Check Tailwind letter spacing classes

   Tailwind uses tracking- prefix for letter spacing, e.g., tracking-wide, not letter-spacing-2.

2. Step 2: Identify invalid class

   letter-spacing-2 is not a valid Tailwind class, so it won't apply spacing.

3. Final Answer:

   The class letter-spacing-2 is invalid in Tailwind. -> Option B

4. Quick Check:

   Letter spacing uses tracking- prefix = A [OK]

Hint: Use 'tracking-' prefix for letter spacing in Tailwind [OK]

Common Mistakes:

• Using wrong class names
• Thinking order of classes matters
• Believing Tailwind lacks letter spacing

5. You want to create a heading that is large, bold, with extra line spacing and a blue color using Tailwind. Which class combination achieves this best?

hard

A. text-sm font-light leading-tight text-blue-300

B. text-lg font-semibold leading-normal text-red-500

C. text-xl font-bold leading-loose text-blue-600

D. text-base font-bold leading-snug text-green-700

Solution

1. Step 1: Identify classes for large, bold, and blue text

   text-xl means large text, font-bold means bold weight, text-blue-600 means blue color.

2. Step 2: Check line spacing class

   leading-loose adds extra line spacing, matching the requirement.

3. Step 3: Verify other options

   Other options have smaller text, lighter weight, or wrong colors.

4. Final Answer:

   text-xl font-bold leading-loose text-blue-600 -> Option C

5. Quick Check:

   Large + bold + loose spacing + blue = B [OK]

Hint: Match size, weight, spacing, and color classes carefully [OK]

Common Mistakes:

• Choosing smaller text sizes
• Ignoring line spacing class
• Picking wrong color classes