CSS Fonts
CSS (Cascading Style Sheets) provides a variety of font properties that can be used to style and customize text on a web page
The font-size
This property sets the size of the font. It can be specified in pixels
(px), ems
(em), or other units.
As an example:
h1 {
font-size: 32px;
}
The font-weight
This property sets the weight (or boldness) of the font. It can be set to values such as normal, bold, or a numeric value between 100 and 900.
As an example:
p {
font-weight: bold;
}
The font-style
This property sets the style (such as italic
or oblique
) of the font.
As an example:
em {
font-style: italic;
}
The text-transform
This property specifies how text should be capitalized. It can be set to values such as uppercase
, lowercase
, or capitalize
.
As an example:
h2 {
text-transform: uppercase;
}
Why Font Selection is Important
- Font selection is an important aspect of web design.
- A well-chosen font can enhance readability, convey tone, and contribute to visual appeal.
- The font should be legible at different sizes and not strain the eyes of the reader.
- The font should match the tone and style of the content.
- Accessibility is an important consideration.
Generic Font Families
Generic font families are categories of fonts that share common characteristics and can be used as fallback options when a specific font is not available.
The five generic font families in CSS are:
serif
: Fonts that have small lines or flourishes at the ends of characters, such as Times New Roman or Georgia.sans-serif
: Fonts that do not have small lines or flourishes at the ends of characters, such as Arial or Helvetica.monospace
: Fonts in which all characters have the same width, such as Courier or Consolas. These fonts are often used for programming or code content.cursive
: Fonts that have a flowing, handwriting-like style, such as Comic Sans or Brush Script.fantasy
: Fonts that have decorative or stylized designs, such as Impact or Jokerman.
The CSS font-family Property
The CSS font-family
property is used to specify the font(s) that should be used for the text content of an HTML element. The value of the font-family
property can be a comma-separated
list of font names, with the first font being the preferred choice and subsequent fonts used as fallback options.
As an example:
p {
font-family: "Open Sans", Arial, sans-serif;
}
In this example:
- The font family for paragraphs (
<p>
) is set to"Open Sans"
. - If
"Open Sans"
is not available, the browser will try to useArial
. - If
Arial
is also not available, it will fall back to any other sans-serif font that is available on the user's device.
Font Shorthand
The font
shorthand property is used to set multiple font-related properties in a single declaration. Instead of setting font-size
, font-family
, font-weight
, font-style
, and other font-related properties separately, the font shorthand property can be used to set them all at once.
As an example:
p {
font: italic 1.2em "Open Sans", Arial, sans-serif;
}
In this example:
- The font style is set to
italic
, the font size is set to1.2em
, and the font family is set to"Open Sans"
. - If
"Open Sans"
is not available, the browser will try to useArial
. - If
Arial
is also not available, it will fall back to any other sans-serif font that is available on the user's device.
CSS Google Fonts
Google Fonts is a free web font service that provides a collection of over 1000 fonts that can be used on websites.
To use Google Fonts follow these steps:
- Choose a font from the Google Fonts website that you want to use on your website.
- Click on the
"+ Select this style"
button next to the font you want to use. - Once you have selected the font, click on the "Use" button in the bottom right corner.
- Choose the styles and character sets that you want to include in your font download.
- Copy the HTML code and the CSS code provided by Google Fonts.
- Paste the HTML code in the
<head>
section of your HTML document. - Paste the CSS code in your CSS file or between
<style>
tags in your HTML document.
As an example:
Editor
In this example:
- We are using the
"Open Sans"
font from Google Fonts. - We first link to the Google Fonts CSS file in the
<head>
section of our HTML document. - Then, we set the
font-family
property of thebody
element to'Open Sans'
,sans-serif
. If"Open Sans"
is not available, the browser will use any other sans-serif font that is available on the user's device.
CSS Font Pairings
Choosing the right font pairings can greatly enhance the readability and visual appeal of your website.
Here are some great font pairings that you can use in your CSS:
Open Sans
andLato
: These two fonts are both sans-serif and have a similar geometric shape, making them a great pairing for modern and minimalist designs.Montserrat
andMerriweather
: Montserrat is a bold and geometric sans-serif font that pairs well with the more traditional serif font Merriweather, which has a classic and elegant look.Roboto
andNoto Serif
: Roboto is a popular sans-serif font that has a clean and modern look, while Noto Serif is a serif font that has a timeless and elegant style.Raleway
andPlayfair Display
: Raleway is a thin and elegant sans-serif font that pairs well with the more decorative serif font Playfair Display, which has a classic and sophisticated look.Source Sans Pro
andSource Serif Pro
: These two fonts are part of the same family, designed to work together seamlessly. Source Sans Pro is a sans-serif font with a clean and modern look, while Source Serif Pro is a serif font with a classic and elegant style.