Font family utilities in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the rendered font family for this Tailwind class?

Given the HTML snippet below, what font family will the text use in a browser?

<p class="font-serif">Hello World</p>

Tailwind

<p class="font-serif">Hello World</p>

A The text uses a monospace font family like Courier New.

B The text uses a sans-serif font family like Arial or Helvetica.

C The text uses a serif font family like Times New Roman or Georgia.

D The text uses a cursive font family like Comic Sans.

💡 Hint

Tailwind's font-serif class applies a serif font stack.

The font-serif utility in Tailwind applies a serif font stack, which typically includes fonts like Times New Roman or Georgia. This changes the text to have small decorative strokes at the ends of letters.

🧠 Conceptual

intermediate

Which Tailwind class applies a monospace font?

You want your code snippet text to look like typed code with fixed-width letters. Which Tailwind class should you use?

A font-sans

B font-serif

C font-code

D font-mono

💡 Hint

Monospace fonts have equal width for all characters.

The font-mono class in Tailwind applies a monospace font family, which is ideal for code or text that requires fixed-width characters.

❓ rendering

advanced

What is the visual difference between font-sans and font-serif in Tailwind?

You have two paragraphs:

<p class="font-sans">Sans-serif text</p>
<p class="font-serif">Serif text</p>

How will these paragraphs look different in a browser?

Tailwind

<p class="font-sans">Sans-serif text</p>
<p class="font-serif">Serif text</p>

A font-sans text has no small strokes at letter ends; font-serif text has small decorative strokes.

B font-sans text is italic; font-serif text is bold.

C font-sans text uses fixed-width letters; font-serif text uses variable-width letters.

D font-sans text is uppercase; font-serif text is lowercase.

💡 Hint

Serif fonts have small lines at the ends of letters; sans-serif fonts do not.

Sans-serif fonts have clean letter shapes without extra strokes, making them look modern and simple. Serif fonts have small decorative strokes at the ends of letters, giving a classic look.

❓ selector

advanced

Which Tailwind class combination sets a monospace font with bold weight?

You want text that uses a monospace font and appears bold. Which class combination achieves this?

A font-mono font-bold

B font-serif font-semibold

C font-sans font-light

D font-mono font-light

💡 Hint

font-mono sets monospace; font-bold sets bold weight.

The font-mono class applies monospace fonts, and font-bold makes the text bold. Combining these gives bold monospace text.

❓ accessibility

expert

Why is choosing the right font family important for accessibility?

Which statement best explains why font family choice matters for users with reading difficulties?

A Serif fonts are always easier to read for everyone, so use font-serif everywhere.

B Monospace fonts improve readability for code but may reduce readability for long text.

C Font family choice does not affect accessibility; only font size matters.

D Sans-serif fonts are never recommended because they cause eye strain.

💡 Hint

Think about different reading needs and contexts.

Monospace fonts help distinguish characters in code, aiding users who read code. However, for long paragraphs, sans-serif or serif fonts are usually easier to read. Accessibility means choosing fonts based on context and user needs.