Font weight control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Which Tailwind class sets the font weight to bold?

Choose the Tailwind CSS class that correctly applies a bold font weight to text.

A font-bold

B font-heavy

C text-bold

D font-strong

💡 Hint

Tailwind uses the prefix font- for font weight classes.

The correct Tailwind class for bold font weight is font-bold. Other options are not valid Tailwind classes.

❓ rendering

intermediate

What font weight will the text have with class font-light?

If you apply the Tailwind class font-light to a paragraph, what font weight will the text display in the browser?

Tailwind

<p class="font-light">Sample text</p>

A Font weight 900 (black)

B Font weight 700 (bold)

C Font weight 300 (light)

D Font weight 400 (normal)

💡 Hint

Tailwind font weights follow numeric values similar to CSS font-weight property.

The font-light class applies a font weight of 300, which is lighter than normal (400).

❓ selector

advanced

Which Tailwind class applies the heaviest font weight?

Select the Tailwind CSS class that applies the heaviest (boldest) font weight available by default.

A font-black

B font-extrabold

C font-thin

D font-semibold

💡 Hint

Tailwind font weights range from thin (100) to black (900).

font-black applies font weight 900, which is the heaviest font weight in Tailwind by default.

🧠 Conceptual

advanced

How does Tailwind's font-semibold compare to font-bold?

Choose the correct statement about the difference between font-semibold and font-bold in Tailwind CSS.

A <code>font-semibold</code> is heavier than <code>font-bold</code>

B <code>font-semibold</code> is lighter than <code>font-bold</code>

C Both have the same font weight

D <code>font-semibold</code> is not a valid Tailwind class

💡 Hint

Think about numeric font-weight values: semibold is usually less than bold.

font-semibold applies font weight 600, which is lighter than font-bold at 700.

❓ accessibility

expert

Why is controlling font weight important for accessibility?

Select the best reason why adjusting font weight using Tailwind classes can improve accessibility on websites.

A Using font weight classes disables screen readers

B Lighter font weights reduce page load time significantly

C Font weight changes do not affect accessibility

D Heavier font weights improve readability for users with low vision by increasing contrast

💡 Hint

Think about how text visibility helps users with vision difficulties.

Heavier font weights increase the thickness of letters, making text easier to see and read for users with low vision, improving accessibility.