5.5 KiB
Working With Text And Fonts
How we can make our information look beautiful.
Comparing Generic Families And Font Families
We have generic families which represent a family of fonts that share similar characteristics and contain many font families:
| Generic | Font |
|---|---|
serif |
Times New Roman, Georgia |
sans-serif |
Helvetica, Verdana |
cursive |
Brush Script |
monospace |
Courier New |
fantasy |
... |
Understanding The Browser Settings
In chrome, we can go to browser settings, and customize fonts, and see the available font families and generic families.
There are several options for setting the font family:
- By default the font families are applied by the browser.
- We can change this behavior by defining a generic family in our css file, and the browser will then select the font family in the browser settings under that generic family.
- And the third option would be to specify a font family in our css, which won't be influenced by the browser settings.
The third option can be further divided into:
- User's computer (Not recommended)
- Web fonts (Google fonts etc)
- Retrieved from server (self hosted fonts)
Using The Default Font Families
We have overwritten the default browser's font using a web font from Google Fonts, which we have linked in our HTML, and applied to the body selector, so any text element inside body will have this font by default, or we can use the font: inherit; property on an element which is overwritten by browser:
body {
font-family: "Montserrat", sans-serif;
}
Understanding The font-family Syntax
The font-family property can have multiple font families defined, the browser will fallback to the next font family from left to right if it doesn't find it, and in the end we will always define a generic family if none of the font familied specified are found by the browser.
In the following example, the browser will use the default font family under sans-serif in the browser settings:
body {
font-family: "Unknown", "Also Unknown", sans-serif;
}
Working With Google Fonts
We can add the web font using <link> in our html file, but a better approach is to add them to our shared css file using @import annotation.
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400');
Understanding font-weight And font-style
font-weight allows you to set the weight or thickness of the font, we can assign different values to it, e.g. font-weight: 400; or font-weight: normal; which both are equivalent. Similarly 700 and bold are equivalent as well.
We have to import each font face we want to use from a web font.
font-style is used to change the style of the font to italic etc.
Diving Into Font Properties
font-size for changing the size of font. e.g. font-size: 20px;.
font-variant for changing the font style, e.g. font-variant: small-caps will display all letters as uppercase but maintaining lowercase height.
font-stretch change the stretch level of our font, but the font availability for this property is not best.
letter-spacing increase the space between each letter. e.g. letter-spacing: 5px;
white-space impacts the way white space is treated inside out elements. e.g. assigning no-wrap to this property would display the text in single line. Additional values that we can use are pre, pre-wrap, pre-line etc.
line-height is used to increase or decrease the space between text and the content box or between lines. e.g. line-height: 2; will increase the spacing between content box or other lines 2 times of its font-size. We can also use px or % with line-height but not recommended.
Applying text-decoration And text-shadow
We can use text-decoration with values like underline, overline or line-through, followed by dotted or wavy, and finally a color.
text-decoration: underline dotted red;
We also use text-decoration: none; to remove browser's default text decoratoin from links.
We can use text-shadow to add a shadow to our text, the values assigned are x and y offsets followed by blurr radius and a color:
text-shadow: 2px 2px 7px rgb(185, 180, 180);
Understanding The font Shorthand
With font shorthand, we must define a font size and font family as last values, and additional values are optional, but keep in mind the order maters as with any other shorthand property.
font: 1.2rem "AnonymousPro", sans-serif;
...
font: 700 1.2rem "AnonymousPro", sans-serif;
...
font: small-caps 700 1.2rem "AnonymousPro", sans-serif;
...
font: italic small-caps 700 1.2rem "AnonymousPro", sans-serif;
...
font: italic small-caps 700 1.2rem/2 "AnonymousPro", sans-serif;
The line height in the shorthand is defined in combination with font size separated by a /.
We can also use the font shorthand to refer to system fonts, or fonts of the operating system. e.g. font: menu; applies a font used by the OS for menu options.
Loading Performance And font-display
font-display is used to configure block-period or swap-period of our font. Fonts on our website are not loaded directly and a fallback font might be applied by the browser during that time which is called block-period. And swap-period as you can imagine is when browser sets our custom font.
You can view the available values for the font-display property at MDN.