DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Fonts

CSS Font

Choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.

Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.

Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.

Cursive fonts imitate human handwriting.

Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

The CSS font-family Property: In CSS, we use the font-family property to specify the font of a text. The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".

CSS Code:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
Enter fullscreen mode Exit fullscreen mode

Font Style: The font-style property is mostly used to specify italic text. This property has three values:

  • Normal - The text is shown normally

  • Italic - The text is shown in italics

  • Oblique - The text is "leaning" (oblique is very similar to italic, but less supported).

CSS Code:

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}
Enter fullscreen mode Exit fullscreen mode

Font Weight: The font-weight property specifies the weight of a font.

CSS Code:

p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Font Variant:

The font-variant property specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appear in a smaller font size than the original uppercase letters in the text.

CSS Code:

p.normal {
  font-variant: normal;
}
p.small {
  font-variant: small-caps;
}
Enter fullscreen mode Exit fullscreen mode

CSS Font Size: The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size.

Absolute size: Sets the text to a specified size. Does not allow a user to change the text size in all browsers (bad for accessibility reasons). Absolute size is useful when the physical size of the output is known

Relative size: Sets the size relative to surrounding elements. Allows a user to change the text size in browsers. If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

CSS Code:

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 40px;
}
body {
  font-size: 100%;
}
P {
  font-size: 2.5em;
}
Enter fullscreen mode Exit fullscreen mode

Google Fonts: If you do not want to use any of the standard fonts in HTML, you can use Google Fonts. Google Fonts are free to use, and have more than 1000 fonts to choose from.

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Resources

Latest comments (0)

Read next

dwayne_mcdaniel profile image

Managing Secrets Security at any Scale: introducing the GitGuardian Secrets Management Needs Quiz

Dwayne McDaniel -

prashantrmishra profile image

Max product subarray

Prashant Mishra -

oz profile image

Angular Signals, Reactive Context, and Dynamic Dependency Tracking

Evgeniy OZ -

wyattdave profile image

Creating a Turing Complete Game in Power Apps

david wyatt -