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:

Font Awesome
SVG Icons
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>