Using the right font when creating a webpage can have a significant impact on the user experience. Different fonts can create a visual hierarchy, establish your unique branding, improve esthetics and design, highlight critical information, and more.
Types of fonts
We generally classify fonts into different categories based on their styles. The most common ones are:
- Serif fonts: These fonts have small decorative lines attached to the ends of the letters, also known as serifs. Some examples include Times New Roman, Georgia, and Garamond.
- Sans-serif fonts: These fonts do not have serifs. Some examples are Arial, Helvetica, and Calibri.
- Monospace fonts: These fonts have all characters the same width. They are most commonly used in coding environments. Some examples include Courier New, Lucida Console, and so on.
- Handwritten fonts: Fonts that mimic handwritings. They are also called cursive fonts, such as Comic Sans MS.
- Display fonts: These fonts are attention-grabbing and often used for headings, titles, or logos. Examples include Impact, Lobster, and Bebas Neue. They are also called fantasy fonts.
Font family
You can use the font-family property to specify the font you wish to use. For example:
html