CSS Properties – Fonts & Text - Long Answer Questions

---

🟦 Medium Level (Application & Explanation)

---

Q1. Explain the role of the font-family property in CSS and how fallback fonts work. Give an example.

Answer:

• The font-family property in CSS sets the type of font used for displaying text on a webpage.
• It defines which font the browser should use to render the text, supporting both common fonts (like Arial, Times New Roman) and generic font families (such as serif or sans-serif).
• Fallback fonts come into play when the first font is not available on the user's device. In this case, the browser tries the next font in the list until it finds one installed.
• This ensures that text is always displayed in an acceptable font style, maintaining readability.
• Example of fallback fonts usage:

h1 {
  font-family: "Times New Roman", serif;
}

If "Times New Roman" isn't available, the browser uses any available serif font.

---

Q2. How does the font-style property influence the appearance of text? Mention the possible values and their effects.

Answer:

• The font-style property changes the slant or posture of the text.
• It has three main values:
  • normal – Displays the regular text with no slant.
  • italic – Shows the text in a slanted style, commonly used to emphasize parts.
  • oblique – Similar to italic but less commonly used, it's a slanted version of normal text.
• Changing font-style helps
  highlight

  meaning of word here

  meaning of word here
  important text or create stylistic differences.
• Example:

p {
  font-style: italic;
}

makes the paragraph content appear slanted.

---

Q3. Describe the text-align property and its different values. How does it affect the readability of text?

Answer:

• The text-align property controls the horizontal alignment of text inside an element.
• Its values include:
  • left – Aligns text to the left, which is the default and easiest to read for left-to-right languages.
  • center – Centers the text, often used for headings or titles.
  • right – Aligns text to the right, used in special layouts or right-to-left languages.
  • justify – Adjusts spacing so the text aligns evenly on both left and right sides, creating a neat block like in newspapers.
• Proper alignment affects readability and aesthetics; for example, justified text is formal but can cause uneven spaces, whereas left alignment is more natural for most users.
• Example:

div {
  text-align: justify;
}

makes paragraphs neatly aligned on both sides.

---

Q4. What is the significance of font-weight in CSS? How can it be used to improve user interface design?

Answer:

• The font-weight property adjusts the thickness or boldness of the font used in the text.
• It ranges from normal (regular thickness) to bold (heavier weight), and also includes bolder and lighter for relative changes.
• Using different font weights helps create visual hierarchy on a page; for example, making headings bold to contrast with normal body text.
• This guides the reader’s attention to important sections and improves overall clarity and usability of the webpage.
• Example:

h2 {
  font-weight: bold;
}

makes headings stand out by thickening the text.

---

Q5. How does using relative units like em and % for font-size differ from fixed units like px? Why are relative units important?

Answer:

• font-size property defines the size of text and can use fixed units like px (pixels) or relative units like em and %.
• px sets an exact size (e.g., 16px), which is consistent on most screens but may be less flexible on different devices or zoom settings.
• em and % sizes are relative to the parent element's font size. For example, 1.5em means 1.5 times the size of the parent.
• Relative units are important for responsive design, making text scale properly on different screen sizes and improving accessibility for users who need larger fonts.
• While CBSE typically uses px, understanding relative units is useful for flexible webpages.

---

🟦 High Complexity (Analytical & Scenario-Based)

---

Q6. Analyze how combining multiple font properties in CSS can improve the user experience on a website.

Answer:

• Combining font properties such as font-family, font-style, font-size, font-weight, and text-align allows web designers to customize text presentation effectively.
• For example, using a readable font-family like Verdana helps legibility, while setting font-size to a comfortable value (like 18px) ensures users can read without strain.
• Applying font-style: italic to quotes emphasizes them distinctly, and font-weight: bold draws attention to titles or important information.
• Proper text-align (centered for headings, justified for paragraphs) creates an organized layout.
• Together, these properties enhance readability, aesthetics, and accessibility, making the website engaging and easy to navigate.
• A combined example:

p {
  font-family: Verdana;
  font-style: italic;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

creates a stylish, legible, and well-structured text block.

---

Q7. Imagine you are designing a webpage for an educational site for children. Which CSS font properties will you prioritize? Justify your choices.

Answer:

• For a children’s educational website, I would prioritize:
  • font-family: Use clean, easy-to-read fonts like Arial or Verdana to ensure clarity.
  • font-size: Use larger font sizes (e.g., 20px or more) so text is easily visible to children.
  • font-weight: Prefer normal or slightly bold to keep text clear but not harsh.
  • font-style: Avoid italic or oblique unless emphasizing small parts; italics can be harder for children to read.
  • text-align: Left alignment is standard and easiest to follow for young readers; avoid center or justified text in body paragraphs.
• These choices help make the content accessible, friendly, and legible, supporting learning without frustration.

---

Q8. Explain why the correct use of text-align: justify might not always be the best choice for web page text.

Answer:

• Although text-align: justify creates neat edges on both left and right, it can cause uneven spaces between words especially on narrow screens or with short lines.
• This irregular spacing breaks the flow of reading and can confuse readers, reducing overall readability.
• For languages that flow left to right, left-aligned text often feels more natural and comfortable.
• Justified text might be better suited for newspapers or printed materials but may not be ideal for most web pages or mobile devices.
• Designers must weigh the aesthetic appeal against reading comfort when choosing justification.

---

Q9. You want a webpage heading to use 'Times New Roman' font, but if it is not available, you want to use any serif font. Write the CSS code for that and explain how the browser handles this.

Answer:

h1 {
  font-family: "Times New Roman", serif;
}

• This code tells the browser to first use “Times New Roman” for the <h1> heading if it is installed on the user’s device.
• If not available, the browser falls back to any available font in the generic serif family, which includes fonts with small decorative strokes on letters.
• This fallback mechanism ensures that the heading is displayed in a visually consistent style, maintaining design integrity even if the specific font is missing.
• Using generic families guarantees graceful degradation of the font style.

---

Q10. Discuss how improper use of CSS font properties can negatively impact website accessibility and user experience.

Answer:

• Using fonts that are too small (font-size too low) can strain users’ eyes, especially those with visual impairments.
• Choosing decorative or overly stylized fonts (font-family) may reduce readability, confusing users or making the site look unprofessional.
• Excessive use of italic or oblique text (font-style) can make reading slower and tiring.
• Overuse of boldness or inconsistent font-weight can distract readers and reduce clarity.
• Using inappropriate text alignment (e.g., justified on narrow columns) can cause uneven spacing and disrupt reading flow.
• Collectively, these issues reduce user accessibility, leading to a poor browsing experience and may cause users to leave the site quickly.
• Proper font property usage ensures the website is inclusive, readable, and user-friendly for all.

---