Why consistent typography matters in Bootsrap - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is consistent typography important in web design?

Which of the following best explains why consistent typography matters for a website's user experience?

A It allows the website to load faster by using fewer fonts.

B It helps users read content easily and creates a professional look.

C It makes the website compatible with all browsers automatically.

D It ensures the website uses only one font size everywhere.

💡 Hint

Think about how typography affects readability and trust.

Consistent typography improves readability and gives the website a polished, trustworthy feel. It helps users focus on content without distraction.

📝 Syntax

intermediate

Bootstrap typography classes usage

Which Bootstrap class should you use to apply a consistent heading style across your website?

A class="display-1"

B class="text-center"

C class="lead"

D class="btn-primary"

💡 Hint

Look for a class that styles headings with large font size.

The display-1 class in Bootstrap is used for large, consistent heading styles. Other classes serve different purposes like alignment or buttons.

❓ selector

advanced

CSS selector for consistent typography

You want to apply the same font family and size to all paragraphs inside a <main> element using CSS. Which selector is correct?

A .main p { font-family: Arial, sans-serif; font-size: 1.2rem; }

B p main { font-family: Arial, sans-serif; font-size: 1.2rem; }

C main p { font-family: Arial, sans-serif; font-size: 1.2rem; }

D main > p { font-family: Arial, sans-serif; font-size: 1.2rem; }

💡 Hint

Think about the correct order of parent and child in CSS selectors.

The selector main p targets all <p> elements inside the <main> element, applying consistent typography. Option C reverses the order, which is invalid. Option C targets elements with class main, not the <main> tag. Option C only targets direct children, which may miss nested paragraphs.

❓ layout

advanced

Using Bootstrap to maintain consistent typography layout

Which Bootstrap utility class helps maintain consistent vertical spacing between text elements for better typography layout?

A mb-3

B text-muted

C d-flex

D bg-primary

💡 Hint

Look for a class that controls margin spacing.

The mb-3 class adds a consistent bottom margin to elements, helping maintain vertical rhythm in typography. Other classes control text color, display, or background color.

❓ accessibility

expert

Accessibility and consistent typography

Which practice best supports accessibility while maintaining consistent typography on a website?

A Use decorative fonts for all text to create a unique style.

B Use fixed pixel font sizes to keep text uniform on all devices.

C Use only one font family and ignore color contrast for simplicity.

D Use relative font sizes (like rem) and ensure sufficient color contrast.

💡 Hint

Think about how users with different needs read text.

Using relative font sizes allows users to scale text easily, and good color contrast ensures readability for people with vision impairments. Fixed sizes and ignoring contrast reduce accessibility. Decorative fonts can harm readability.