curriculum/challenges/english/blocks/quiz-css-typography/66ed9010f45ce3ece4053eb8.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
Which of the following is the correct way to write an @font-face rule in CSS?
@font-face { font: 'MyFont'; size: 12px; }
@font-family { url: 'myfont.ttf'; }
font-face: 'MyFont', sans-serif;
@font-face { font-family: 'MyFont'; src: url('myfont.woff2'); }
How do the offset values in the CSS text-shadow property affect the shadow's appearance?
They adjust the weight and color of the shadow.
They change the color of the shadow.
They remove the text from the path of the shadow.
They control the position of the shadow relative to the text.
What does kerning refer to in the context of typography?
How the space between lines of text is adjusted to improve readability and aesthetics.
How the overall spacing of a text block is adjusted for visual purposes.
How the font size is adjusted for accessibility purposes.
How the space between specific pairs of characters is adjusted to improve readability and aesthetics.
What is a font family in the context of typography?
A specific font style used for headings and body text.
A collection of text options for formatting text.
A set of visually consistent colors used for text.
A group of fonts that share similar design characteristics.
How do you import the Roboto font from Google Fonts into your CSS using the @import rule?
@font-face { font-family: 'Roboto'; url: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap'; }
link: 'https://fonts.googleapis.com/css2?family=Roboto';
@import google-font('Roboto');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
Which one of the following is a web safe font?
Comic Sans MS
Papyrus
Impact
Times New Roman
What is the purpose of the @font-face rule in CSS?
It defines the font size.
It creates a fallback font for web pages.
It adjusts the line height for text.
It allows you to use custom fonts by importing them.
What is the baseline in the context of typography?
The parts of lowercase letters that extend above the x-height.
The average height of lowercase letters, excluding ascenders and descenders.
The height of uppercase letters, measured from the baseline to the top.
The imaginary line on which most characters rest.
Why is it important to include multiple font options in the font-family property?
It reduces page load time by optimizing the process of loading fonts.
It prevents browser compatibility issues by providing multiple options.
It makes the web page more engaging and interactive.
It ensures a consistent user experience in case the custom font doesn't load.
What is the purpose of the text-shadow property in CSS?
It changes the color and font family of the text.
It adds a decorative border and background color to the text.
It makes the text bold and adjusts the space between the characters.
It creates a visual effect by adding a blurred or offset duplicate of the text.
What is leading in the context of Typography?
A group of fonts that share a common design.
How space is adjusted between specific pairs of characters in a block of text.
How space is adjusted between all characters in a block of text.
The vertical space between lines of text.
Why is typographic hierarchy important in design?
It improves the readability of large blocks of text.
It ensures consistency across different devices.
It ensures that all text elements are the same size.
It helps organize content and guide users through the information.
Which of the following is NOT a CSS property related to fonts?
font-size
font-weight
font-family
font-padding
Which of the following is a correct example of the text-shadow property in CSS?
text-shadow: solid 5px black;
text-shadow: 5px blur black;
text-shadow: inset 2px 2px white;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
What are web safe fonts?
Fonts that provide advanced typographic features.
Fonts that automatically adjust to the user's preferred settings.
Fonts that are specifically designed for print media.
Fonts that are very likely to be available on most devices and browsers.
Why are sans-serif fonts generally considered easier to read on screens than serif fonts?
Because they have small lines at the end of characters.
Because they are primarily used for decorative purposes.
Because they were specifically designed for print media.
Because they have simple and clean lines.
How do you specify multiple font families in the font-family property in CSS?
By separating them with spaces and listing the preferred font last.
By separating them with commas and listing the preferred font last.
By enclosing them in curly braces and listing the preferred font first.
By separating them with commas and listing the preferred font first.
In the @font-face rule, which property specifies where the font file is located?
font-size
url
font-family
src
Which of the following is a good practice when using fonts in web design?
Always using at least eight different font families throughout the website.
Using decorative fonts for both headings and body text.
Avoiding fallback fonts whenever possible.
Using no more than two or three font families to ensure visual consistency.
What is tracking in the context of typography?
The parts of lowercase letters that extend below the baseline.
The average height of lowercase letters, excluding ascenders and descenders.
How space is adjusted between all lines of text in a block of text.
How space is adjusted between all characters in a block of text.
What is typography?
It is the overall design and style of a set of characters, numbers, and symbols.
It is about how the individual characters are designed and arranged on a page.
It is the specific variation of a typeface with specific characteristics.
It is the art of choosing fonts and format to make text visually appealing and easy to read.
What characteristics does the font weight NOT include?
Light
Regular
Bold
Italics
Which lowercase letter does NOT contain an ascender?
h
b
f
g
Which lowercase letter does NOT contain a descender?
y
g
q
d
What does tracking affect in typography?
It affects the vertical alignment of characters.
It affects how complementary fonts are used.
It affects the slant and orientation of characters.
It affects how dense and open the text will be.
Where are web safe fonts stored?
In the website hosting the web page.
In folders on internet servers.
In the styles.css file.
In the system files of the computer or device.
Which of the following is NOT a valid format for a font?
woff
collection
svg
ett
What does the acronym woff stand for?
Web Only Font Format.
Web Open Font Family.
Web Only Font Family.
Web Open Font Format.
Which character can you use to separate multiple text-shadow property values?
.
;
:
,
How is leading measured in typography?
From the end of one character to the start of the next character.
From the average height of uppercase letters to average height of lowercase letters.
From the baseline to the top of uppercase letters.
From the baseline of one line to the baseline of the next line.
What is an example of kerning?
Moving the tails of lowercase letters y and g above the baseline.
Adjusting the space between all characters.
Adjusting the white space between words.
Reducing the space between the letters A and V.
What is an example of a serif font?
It does not have small lines at the end of characters.
It has small dots at the end of characters.
It has large dots at the end of characters.
It has small lines at the end of characters.
Which of the following is TRUE about a sans-serif font?
It has small dots at the end of characters.
It has large dots at the end of characters.
It has small lines at the end of characters.
It does not have small lines at the end of characters.
Which example correctly uses the font-family property?
font-family {
body: Arial;
}
body {
Arial: font-family;
}
body {
font-family; Arial:
}
body {
font-family: Arial;
}
What is font weight in typography?
It is the weight of the font.
It is the size of the font.
It is the average weight of the characters.
It is the thickness of the characters.
What is a best practice with typography?
Choosing commonly used fonts as they can load in a short amount of time.
Using metrics to see how many users visit your site and engage with the content.
Using unique fonts and images that are eye catching and relevant to the content.
Choosing clear and simple fonts to make your designs easy to understand.
How are font families related?
They are developed by the same design team.
They are all designed by the same designer.
They share the same name but are based on a different typeface.
They are a group of fonts that share a common design.
Which element is used when accessing external fonts?
style
meta
head
link
Which of the following can be used to access external fonts?
style
@font-face
meta
@import
Which attribute does the link element use to access fonts?
rel
url
src
href