Typography Flashcards
How to style texts?
We have to use font-family:
There are three types of fonts
Serif - formal
sans-serif - informal-
monospace - all charaters are of same width.
What are web safe fonts?
Fonts that are easily available in web. No need to download.
WHat is CSS inhritance?
When a style is defined in parent, its children will get the same style. Children can override the parent’s styles.
How to make text look bigger or smaller?
font-size
How to make the text bolder?
font-weight
How to make text italic?
font-style
How to change the color of the text?
color:
What is Flash of Unstyled Text (FoUT)?
When we use custom font, the font might take sometime to download the custom font. During this time, the default font will be shown to the user. This is a bad user experience. There may be a layout shift.
To reduce, we use
font-display: auto | swap | optional* | block
We can also make the font file size to small by selecting very basic fonts.
What is a font service?
Services such as google font provides free fonts. To use, select the font, google will provide a code with . Then, use it just like other fonts.
What is a system font?
System fonts are readily available in the machine. to use, use font-famly: -(press ctrl+space)
What are the guidelines for sizing the fonts?
use type-scale.com to calculate the fonts.
h1,h2..h6
{
font-family
}
h1{
font-size:
}
….
How to set vertical spacing?
line-height; 1.5;
How to set space between words?
word-spacing:
How to set space between letters
letter-spacing:
What is ideal length of characters in a line?
50-70 characters
p
{
width: 50ch;
}
