Skip to main content

Styling Text

Styling text is a fundamental aspect of web design and development.

Font Family​

Generic font families serve as a fallback mechanism in case the specified fonts are not available on the user's system. These generic families are designed to be a last resort to ensure that some form of the styled text is displayed.

Here are the commonly used generic font families:

Serif​

Serif fonts have small lines or decorative features ("serifs") at the ends of some of the strokes. They are often used for body text in print and on the web.

font-family: "Times New Roman", Times, serif;

Sans-Serif​

Sans-serif fonts do not have the small lines at the end of the strokes. They are generally considered more modern and are commonly used for headings and UI elements.

font-family: Arial, Helvetica, sans-serif;

Monospace​

In monospace fonts, each character takes up the same horizontal space. Monospace fonts are often used for code snippets or tabular data.

font-family: "Courier New", Courier, monospace;

Cursive​

Cursive fonts mimic handwriting styles and are often used for decorative text.

font-family: "Comic Sans MS", cursive, sans-serif;

Fantasy​

Fantasy fonts are primarily decorative fonts that contain playful representations of characters. They are not suitable for body text and are best used sparingly for headings or decorative text.

font-family: Impact, fantasy;

System UI (CSS4)​

The system-ui value is a modern addition that tells the browser to use the default UI font of the operating system, providing a more native look and feel.

font-family: system-ui;

Example Usage​

Here's how you might specify a font family in CSS, including a generic family as a fallback:

p {
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
}

In this example, the browser will try to display the text in "Helvetica Neue" first. If that's not available, it will try Arial, then "Segoe UI", and finally fall back to any available sans-serif font.

Font Size​

The font-size property sets the size of the font. You can use various units like px, em, rem, %, vw, etc.

h1 {
  font-size: 2rem;
}

Font Weight​

The font-weight property sets the thickness of the font characters.

strong {
  font-weight: bold;
}

Font Style​

The font-style property is mainly used to set italic text.

em {
  font-style: italic;
}

Text Color​

The color property sets the color of the text.

p {
  color: #333;
}

Text Alignment​

The text-align property is used to set the horizontal alignment of text.

p.center {
  text-align: center;
}

Text Decoration​

The text-decoration property is used to set decoration on text such as underline, overline, and line-through.

a {
  text-decoration: none;
}

Line Height​

The line-height property sets the amount of space between lines of text.

p {
  line-height: 1.5;
}

Letter Spacing​

The letter-spacing property controls the space between characters.

p {
  letter-spacing: 1px;
}

Text Transform​

The text-transform property controls the capitalization of text.

p.uppercase {
  text-transform: uppercase;
}

Text Shadow​

The text-shadow property adds shadows to text.

h1 {
  text-shadow: 2px 2px 4px #000;
}

Word and Text Wrapping​

The white-space, word-wrap, and overflow-wrap properties control how text wraps and behaves in relation to its container.

p {
  white-space: nowrap;
  word-wrap: break-word;
}

Custom Fonts​

Using local font files in CSS allows you to include custom fonts that may not be available on the user's system or through web font services. This can be particularly useful for ensuring a consistent look and feel across different platforms and browsers.

Steps to Use Local Font Files​

  1. Download the Font Files: Download the font files you want to use. These are usually available in formats like .woff, .woff2, .ttf, .otf, etc.

  2. Place Font Files: Place the downloaded font files in a directory within your project, such as a fonts/ folder.

  3. Include with @font-face: Use the @font-face CSS rule to specify the path to the font file and to define a name for the font.

  4. Use the Font: Once the font is defined, you can use it like any other font by referencing its name in the font-family property.

Example​

Here's a simple example using a hypothetical font named "MyCustomFont":

  1. @font-face Rule
@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff'),
       url('fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

In this example, the src property specifies multiple file paths to allow for different supported formats. The browser will use the first format it supports.

  1. Using the Font
body {
  font-family: 'MyCustomFont', Arial, sans-serif;
}

Here, "MyCustomFont" is used as the primary font, and if it's not available, the browser will fall back to "Arial" and then to any generic "sans-serif" font.

Example HTML​

Here's how your HTML might look:

<p class="center uppercase">This is a sample text.</p>

Complete Example​

Combining all the above, here's a complete example:

/* Basic text styling */
p {
  font-family: "Helvetica, Arial, sans-serif";
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  color: #333;
  text-align: left;
  text-decoration: none;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: none;
  text-shadow: none;
  white-space: normal;
  word-wrap: break-word;
}

/* Additional classes for variants */
p.center {
  text-align: center;
}

p.uppercase {
  text-transform: uppercase;
}

List of google fonts that you can either download or include url as dependency