Typography in CSS
CSS allows us to manage how the text is shown, from the type to its size and alignment for example. To use a font, we can provide one or we can use ‘web safe fonts’, fonts that the end user has. Some of them are: Arial, Georgia, Times New Roman and Verdana. As mentioned in the post before, it is possible to mention more than one in case it is not possible to use the first option. It is also important to include the type of font we expect to be used in these cases. The previous post I mentioned ‘sans-serif’, but we can also say ‘serif’. In the code, when we offer more than one option, we separate them by a comma and if the font has more than one word, we use the quotation marks. Among the styling text properties, we have ‘font-style’. This means we can define if they are normal, oblique or italic. Then we have ‘font-weight’. It can define if the type will be normal or bold. To define the font size, we can use different values, such as pixels (px), points (pt), percentage (%), em size (em) or root em size (rem). Rem, at least for me, was pretty new and I never heard of it before. So, to make it a bit easier, let’s compare with pixels. 1 rem is 16px. 10px is 0.625rem, 12px is 0.75rem. Another thing we are allowed to do is align the text. It can be centered, justified, aligned to the right or left. Text transform and text decoration are other possibilities that can be defined in the css document. Text decoration is very handy to change the underline of a link.
Example:
.highlight {
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
font-style: italic;
font-weight: bold;
font-size: 0.75rem;
text-align: center;
text-transform: lowercase;
}
