Fonts

Fonts are a critical aspect of web design as they significantly impact the readability, aesthetic appeal, and overall user experience of a website.

CSS provides various properties and rules to control how a text is displayed, in the following ways.

1. font-family
2. font-size
3. font-weight
4. custom web fonts through the @font-face rule.

Font-family

The font-family property in CSS specifies the typeface that should be applied to the text content of an element. This property allows you to define a list of fonts, from most preferred to least, with the browser choosing the first available font in the list. if the browser does not support the first font, it will try the next one in the list. The last option is usually a generic font family, list of these font families defined as values is called font stack.

selector {
  font-family: "font1", "font2", "generic-family";
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

The browser will first attempt to use “Helvetica Neue”. If it’s unavailable, it will fall back to Arial, and if neither is available, it will use any available sans-serif font.

Generic Families There are five generic font families that can be used they include serif,sans-serif,monospace,cursive,fantasy.

Font Size

The font-size property controls the size of the text. You can define it using various units, including:

Absolute units

1. px (pixels) Specifies an exact size, like 16px.
2. pt (points): Mainly used for print media, 1pt = 1/72 of an inch.

Relative units

1. em relative to the font size of the parent element. For instance, 2em is twice the size of the parent font size.
2. rem relative to the font size of the root element (html), providing consistency across the document.
3. % relative to the parent element’s font size. 100% would be equal to the parent font size.
4. vw, vh relative to the viewport width and height respectively.

html {
  font-size: 16px;
} /* Base size - all rems refer to this */
p {
  font-size: 18px;
} /* Specifies exact size */
.header {
  font-size: 24pt;
} /*For print stylesheets*/
.caption {
  font-size: 0.75em;
} /* 12px (75% of parent) */

h1 {
  font-size: 2.5rem;
} /* 40px (2.5 × 16px) */

h2 {
  font-size: 150%;
} /* 24px (150% of parent) */

.hero-title {
  font-size: 5vw;
} /* 5% of viewport width */
.vertical-headline {
  font-size: 4vh;
} /* 4% of viewport height */

We can use clamp() and calc() for responsive typography

{
font-size: clamp(MIN, VAL, MAX);
}

Where: MIN: Minimum value (won’t go smaller than this) VAL: Preferred value (usually a responsive unit like vw) MAX: Maximum value (won’t go larger than this)

clamp() creates a responsive font size that

1. Scales proportionally with the viewport (middle value)
2. Has guardrails to prevent text from becoming too small or too large

where as calc() enables arithmetic operations where expression can include arithmetic operations (+, -, \*, /) and mix different units.

{
font-size: calc(expression);
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  /* Min: 24px, Preferred: 5vw, Max: 48px (assuming 16px root) */
}

/* Fluid typography formula - we will discuss more about this in responsive design */
h2 {
  font-size: calc(1.25rem + 1.5vw);
  /* Base size (20px) plus responsive component */
}

Font Weight

The font-weight property determines the thickness or boldness of the font.

You can use predefined keywords like normal, bold, bolder, and lighter or specify weights using numeric values from 100 (thin) to 900 (extra bold).

h1 {
  font-weight: bold;
}
p {
  font-weight: 300; /* Light weight */
}
.normal-weight {
  font-weight: 400; /*Normal Weight */
}
.bold-weight {
  font-weight: 700; /*Bold */
}

@font-face

The @font-face rule allows you to load custom fonts; it can be your own font or font that is not available to load through CDN / font serving web services, essentially you can load font from your server, enabling the use of fonts that are not installed on the user’s device.

This is particularly useful for ensuring a consistent visual appearance across different devices and browsers.

@font-face {
  font-family: "CustomFont";
  src:
    url("CustomFont.woff2") format("woff2"),
    url("CustomFont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "MyCustomFont", Arial, sans-serif;
}

Here, “MyCustomFont” is loaded and applied to the body text. If the custom font fails to load, the browser will fall back to Arial, and then to a sans-serif font. Lets look at the properties in the font-face rule,

font-family help you define name you want to assign to the custom font. This name will be used in the font-family property elsewhere in your CSS. src defines the source of the font file. You can provide multiple formats (like .woff, .woff2, .ttf, etc.) to ensure compatibility across different browsers. Each format has its strengths:

1. woff (Web Open Font Format) and woff2 - Highly recommended for web use due-to-compression and browser support.
2. ttf (TrueType Font) - A widely supported font format.
3. otf (OpenType Font) - Similar to TTF with additional features like advanced typography.

font-weight specifies the weight (normal, bold, etc.) of the font depending on the font you file you have sourced. font-style specifies the style (normal, italic, etc.) of the font.

Web Fonts

If you dont want to manage your own fonts, you can use it from online font services which provides easier and faster font integration, following are the most commonly used services.

1. Google Fonts one of the most popular sources of web fonts, Google Fonts offers a wide range of free fonts that can be easily integrated using a simple @import rule or <link> tag in HTML.

2. Adobe Fonts (Typekit) a subscription-based service offering a vast collection of high-quality fonts for web and desktop use.

Integrating google fonts,

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: "Roboto", sans-serif;
}