CSS Text & Fonts — Interview Questions & Answers

Ques: What are the main text properties in CSS?

Ans: CSS provides several properties to control the appearance and alignment of text, such as:

Property	Description	Example
color	Sets text color	color: navy;
text-align	Aligns text	text-align: center;
text-transform	Changes case	text-transform: uppercase;
text-decoration	Adds decoration (underline, line-through)	text-decoration: underline;
letter-spacing	Space between letters	letter-spacing: 2px;
line-height	Space between lines	line-height: 1.6;

Ques: How do you align text in CSS?

Ans: Use the text-align property.

Value	Description
left	Aligns text to the left (default)
right	Aligns text to the right
center	Centers the text
justify	Aligns text evenly on both sides

Example:

p {
  text-align: justify;
}

Ques: What is text-transform in CSS?

Ans: It controls the capitalization of text.

Value	Description
uppercase	Converts all letters to uppercase
lowercase	Converts all letters to lowercase
capitalize	Capitalizes the first letter of each word

Example:

h2 {
  text-transform: capitalize;
}

Ques: How do you underline or remove underline from text?

Ans: Use the text-decoration property.

Value	Description
underline	Adds underline
none	Removes underline
line-through	Adds strike-through
overline	Adds a line above text

Example:

a {
  text-decoration: none;
}

Ques: What is text-shadow in CSS?

Ans: text-shadow adds shadow effects to text.

Syntax:

text-shadow: horizontal-offset vertical-offset blur color;

Example:

h1 {
  text-shadow: 2px 2px 5px gray;
}

Ques: What is line-height and why is it important?

Ans: line-height defines the space between lines of text.

It improves readability and visual spacing.

Example:

p {
  line-height: 1.8;
}

Ques: What are generic font families in CSS?

Ans: Generic font families are broad categories of fonts:

Family	Description
serif	Has small strokes at the end of letters (e.g., Times New Roman)
sans-serif	Clean and modern (e.g., Arial, Helvetica)
monospace	Fixed-width characters (e.g., Courier New)
cursive	Imitates handwriting
fantasy	Decorative or creative styles

Example:

p {
  font-family: "Arial", sans-serif;
}

Ques: How does font-family property work?

Ans: Specifies a priority list of fonts — the browser picks the first available one.

Example:

body {
  font-family: "Roboto", "Helvetica Neue", sans-serif;
}

Ques: What is the difference between serif and sans-serif fonts?

Font Type	Example	Description
Serif	Times New Roman	Traditional, formal, better for print
Sans-serif	Arial, Roboto	Clean, modern, better for screens

Ques: How can you add custom fonts in CSS?

Ans: Use the @font-face rule to load custom web fonts.

Example:

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2');
}

body {
  font-family: 'MyFont', sans-serif;
}

Ques: What is Google Fonts and how to use it?

Ans: Google Fonts provides free, web-hosted fonts that can be linked directly.

Example:

<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap>" rel="stylesheet">

body {
  font-family: "Poppins", sans-serif;
}

Ques: What are variable fonts?

Ans: Variable fonts are single font files containing multiple weights and styles, allowing dynamic changes via CSS.

Example:

p {
  font-variation-settings: "wght" 700;
}

Ques: What is font-weight, font-style, and font-variant?

Property	Description	Example
font-weight	Controls boldness	font-weight: 700;
font-style	Italic or normal	font-style: italic;
font-variant	Small caps effect	font-variant: small-caps;

Ques: How do you control spacing in text?

Property	Description	Example
letter-spacing	Space between characters	letter-spacing: 1px;
word-spacing	Space between words	word-spacing: 5px;
line-height	Space between lines	line-height: 1.6;

Ques: What are CSS icons and how are they added?

Ans: You can add icons using:

1. Font Awesome
2. SVG Icons
3. Icon Fonts

Example (Font Awesome):

<i class="fa fa-home"></i>

Example (SVG):

<svg width="24" height="24">
  <circle cx="12" cy="12" r="10" fill="blue"/>
</svg>