CSS Typography Flashcards
Web safe fonts are good fallback fonts that can be used if your preferred font is not available.
e.g. h1 {
font-family: Caslon, Georgia, ‘Times New Roman’;
}
In the example above, Georgia and Times New Roman are fallback fonts to Caslon. When you specify a group of fonts, you have what is known as a font stack. A font stack usually contains a list of similar-looking fonts.
Here, the browser will first try to use the Caslon font. If that’s not available, it will try to use a similar font, Georgia. And if Georgia is not available, it will try to use Times New Roman.
The font of an element can be changed using the font-family property.
When specifying a typeface(font) with multiple words, like Times New Roman, it is recommended to use quotation marks (‘ ‘) to group the words together.
There is a selection of fonts that will appear the same across all browsers and operating systems. These fonts are referred to as web safe fonts.
serif and sans-serif are also keyword values that can be added as a final fallback font if nothing else in the font stack is available.
Serif fonts have extra details on the ends of each letter, as opposed to Sans-Serif fonts, which do not have the extra details.
In CSS, the font-weight property controls how bold or thin text appears. It can be specified with keywords or numerical values.
Keyword Values
The font-weight property can take any one of these keyword values:
Numerical values can range from 1 (lightest) to 1000 (boldest), but it is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.
bold: Bold font weight.
normal: Normal font weight. This is the default value.
lighter: One font weight lighter than the element’s parent value.
bolder: One font weight bolder than the element’s parent value
You can also italicize text with the font-style property.
e.g. h3 {
font-style: italic;
}
The italic value causes text to appear in italics.
The font-style property also has a normal value which is the default.
Text can also be styled to appear in either all uppercase or lowercase with the text-transform property.
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters.
For example, a website that reports breaking news may decide to format all <h1> heading elements such that they always appear in all uppercase, as in the example above.
It would also avoid uppercase text in the HTML file, which could make code difficult to read.
The letter-spacing property is used to set the horizontal spacing between the individual characters in an element.
It’s not common to set the spacing between letters, but it can sometimes help the readability of certain fonts or styles.
The letter-spacing property takes length values in units, such as 2px or 0.5em.
You can set the space between words with the word-spacing property.
It’s also not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text.
The word-spacing property also takes length values in units, such as 3px or 0.2em.
We can use the line-height property to set how tall we want each line containing our text to be.
Line height values can be a unitless number, such as 1.2, or a length value, such as 12px, 5% or 2em.
Generally, the unitless value is preferred since it is responsive based on the current font size. In other words, if the line-height is specified by a unitless number, changing the font size will automatically readjust the line height.
Web fonts
Free font services, like Google Fonts and Adobe Fonts, host fonts that you can link to from your HTML document with a provided <link></link> element.
Go to percipio to css and then typography PAGE 8 AND 9.
