CSS: Typography Flashcards
(31 cards)
What is Typography?
Typography is the art of choosing the right fonts and format to make text visually appealing and easy to read. “Type” refers to how the individual characters are designed and arranged.
What is Typeface?
A typeface is the overall design and style of a set of characters, numbers, and symbols. It’s like a blueprint for a family of fonts.
What is a Font?
A font is a specific variation of a typeface with specific characteristics, such as size, weight, style, and width.
What is Serif Typeface?
This typeface has a classical style with small lines at the end of characters. Serif typefaces are commonly used for printed materials, like books.
What is Sans Serif Typeface?
This typeface has a more modern look, without the small lines at the end of characters. Sans Serif typefaces are commonly used in digital design because they are easy to read on screen. Some examples include Helvetica, Arial, and Roboto.
What is Font Weight?
This is the thickness of the characters, including light, regular, bold, and black.
What is Font Style?
This is the slant and orientation of the characters, like italic and oblique.
What is Font Width?
This is the horizontal space occupied by characters, like condensed and expanded.
What is the Baseline?
This is the imaginary line on which most characters rest.
What is the Cap Height?
This is the height of uppercase letters, measured from the baseline to the top.
What is the X-Height?
This is the average height of lowercase letters, excluding ascenders and descenders.
What are Ascenders?
These are the parts of lowercase letters that extend above the x-height, such as the tops of the letters ‘h’, ‘b’, ‘d’, and ‘f’.
What are Descenders?
These are the parts of lowercase letters that extend below the baseline, such as the tails of ‘y’, ‘g’, ‘p’, and ‘q’.
What is Kerning?
This is how space is adjusted between specific pairs of characters to improve their readability and aesthetics. For example, reducing the space between the letters A and V.
What is Tracking?
This is how space is adjusted between all characters in a block of text. It’s essentially the distance between the characters. It affects how dense and open the text will be.
What is Leading?
This is the vertical space between lines of text. It’s measured from the baseline of one line to the baseline of the next line.
What are Best Practices in Typography?
You should choose clear and simple fonts to make your designs easy to understand. This is particularly important for the main text of your website. Users are more likely to engage with your content if the font is easy to read.
What is the “font-family” Property?
A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface but they also have variations in their style, weight, and width. You can specify multiple font families in order of priority, from highest to lowest, by separating them with commas. These alternative fonts will act as fallback options. You should always include a generic font family at the end of the font-family list.
What are some Common Font Families?
Here are some common font families used in CSS: serif, sans-serif, monospace, cursive, fantasy
What are Web Safe Fonts?
These fonts are a subset of fonts that are very likely to be installed on a computer or device. When the browser has to render a font, it tries to find the font file on the user’s system. But if the font is not found, it will usually fall back to a default system font.
What is an At-rule?
At-rules are statements that provide instructions to the browser. You can use them to define various aspects of the stylesheet, such as media queries, keyframes, font faces, and more.
What is the “@font-face” At-rule?
This allows you to define a custom font by specifying the font file, format, and other important properties, like weight and style. For the @font-face at-rule to be valid, you also need to specify the src property. This property contains references to the font resources.
What are Font Formats?
For each font resource, you can also specify the format. This is optional. It’s a hint for the browser on the font format. If the format is omitted, the resource will be downloaded and the format will be detected after it’s downloaded. If the format is invalid, the resource will not be downloaded. Possible font formats include collection, embedded-opentype, opentype, svg, truetype, woff, and woff2.
What are “woff” and “woff2” Font Formats?
woff stands for “Web Open Font Format.” It’s a widely used font format developed by Mozilla in collaboration with Type Supply, LettError, and other organizations. The difference between woff and woff2 is the algorithm used to compress the data.
