Prelims - Fonts

Question 1

fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.

Answer 1

Serif

Question 2

fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.

Answer 2

Sans-serif

Question 3

fonts here all the letters have the same fixed width. They create a mechanical look

Answer 3

Monospace

Question 4

fonts imitate human handwriting

Answer 4

Cursive

Question 5

fonts are decorative/playful fonts

Answer 5

Fantasy

Question 6

property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems

Answer 6

font-family

Question 7

property is mostly used to specify italic text.

Answer 7

font-style

Question 8

The font-style property is mostly used to specify italic text.

This property has three values:

Answer 8

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is “leaning” (oblique is very similar to italic, but less supported)

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

Question 9

property specifies the weight of a font:

Answer 9

font-weight

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

Question 10

property specifies whether or not a text should be displayed in a small-caps font

Answer 10

font-variant

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

Question 11

property sets the size of the text.

Answer 11

font-size

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

Question 12

The font-size value can be

Answer 12

absolute or relative

Question 13

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• is useful when the physical size of the output is known

Answer 13

Absolute size

Question 14

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Answer 14

Relative size

Question 15

To allow users to resize the text (in the browser menu), many developers use this instead of pixels

Answer 15

Em

1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px

Question 16

The size can be calculated from pixels to em using this formula:

Answer 16

pixels/16=em

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

Question 17

The text size can be set with a vw unit, which means the

Answer 17

viewport width

Question 18

That way the text size will follow the size of the browser window

Answer 18

vw or viewport width

<h1 style="font-size:10vw">Hello World</h1>

Question 19

The font property is a shorthand property for:

Answer 19

font-style
font-variant
font-weight
font-size/line-height
font-family

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}