Recommended
Challenge - 5 Problems
Font Family Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
📝 Syntax
intermediate2:00remaining
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>Attempts:
2 left
💡 Hint
Tailwind's font-serif class applies a serif font stack.
✗ Incorrect
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
intermediate2:00remaining
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?
Attempts:
2 left
💡 Hint
Monospace fonts have equal width for all characters.
✗ Incorrect
The font-mono class in Tailwind applies a monospace font family, which is ideal for code or text that requires fixed-width characters.
❓ rendering
advanced2:00remaining
What is the visual difference between font-sans and font-serif in Tailwind?
You have two paragraphs:
How will these paragraphs look different in a browser?
<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>
Attempts:
2 left
💡 Hint
Serif fonts have small lines at the ends of letters; sans-serif fonts do not.
✗ Incorrect
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
advanced2:00remaining
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?
Attempts:
2 left
💡 Hint
font-mono sets monospace; font-bold sets bold weight.
✗ Incorrect
The font-mono class applies monospace fonts, and font-bold makes the text bold. Combining these gives bold monospace text.
❓ accessibility
expert2:00remaining
Why is choosing the right font family important for accessibility?
Which statement best explains why font family choice matters for users with reading difficulties?
Attempts:
2 left
💡 Hint
Think about different reading needs and contexts.
✗ Incorrect
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.