Know What Font Styles Are in CSS!

Know What Font Styles Are in CSS! CSS fonts are essential for specifying how text appears on a page, giving developers the power to manipulate typography for readability, accessibility, and aesthetics. The following are important font-related CSS properties:

• font-family: Specifies the typeface. Multiple fonts can be listed as fallbacks in a prioritized order (e.g., font-family: “Roboto”, Arial, sans-serif;).
• font-size: Determines the size of the text (e.g., font-size: 16px;, font-size: 1.5em;).
• font-weight: Adjusts the thickness of the text (e.g., font-weight: normal;, font-weight: 700;).
• font-style: Defines styles like italic or oblique (e.g., font-style: italic;).
• line-height: Controls the vertical spacing between lines of text, aiding in readability (e.g., line-height: 1.5;).
• letter-spacing and word-spacing: Modify the spacing between characters and words, respectively.
• @font-face: Enables the use of custom web fonts by specifying the font source, allowing unique typography beyond system-installed fonts.

Serif, sans-serif, monospace, cursive, and fantasy are examples of generic font families that CSS allows as fallbacks to guarantee consistent rendering on various platforms. A website that is both aesthetically pleasing and easily navigable can be achieved by carefully combining these attributes.

Exploring Font Properties in CSS

CSS’s font properties provide programmers the flexibility to alter how text appears on web pages, improving both readability and aesthetics. To specify the typeface, use font-family; to change the text size, use font-size; to change the thickness, use font-weight, and to specify italic or regular text, use font-style. Line-height, letter-spacing, and word-spacing are additional attributes that manage spacing for better readability. By allowing bespoke web fonts, the @font-face rule increases the possibilities for design. These qualities combine to produce typography that is both aesthetically pleasing and usable by a variety of audiences.

1. The font-family Property

The typeface used for text is specified by the font-family property in CSS, which gives developers the ability to specify the visual style of their content. By accepting a prioritized list of font names, it allows users to have fallback options in case their favorite font isn’t accessible on their device. For example:

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

Here, the browser attempts to generate text using Arial, Helvetica, and then any sans-serif font that is available. Certain typefaces or general families, such as serif, sans-serif, monospace, cursive, or fantasy, can be specified for fonts. When font-family is used correctly, consistency is guaranteed, and web typography’s visual appeal and usefulness are improved.

2. The font-size Property

The size of text is defined by the font-size property in CSS, which has a big impact on a webpage’s readability and visual hierarchy. It provides flexibility for various design and accessibility requirements by supporting a range of value types:

• a. Absolute Units (Fixed sizes):
  • Pixels (px): The most common unit for precise control, e.g., font-size: 16px;.
    • Pixels do not scale relative to other elements or user settings, which can make them less flexible in responsive designs.
  • Points (pt): Traditionally used in print media, not ideal for web design.
  • Other absolute units: cm, mm, in, but these are rarely used in web design.
• b. Relative Units (Scalable sizes):
  • em: Relative to the font-size of the parent element.
    • Example: If the parent element’s font size is 16px, font-size: 1.5em; results in 24px.
    • Useful for creating scalable designs but requires careful consideration of inheritance.
  • rem: Relative to the root element (), ensuring consistency across components.
    • Example: If the root font size is 16px, font-size: 1.5rem; equals 24px.
    • Preferred over em for global scalability in responsive design.
  • Percentage (%): Relative to the parent element’s font size.
    • Example: font-size: 150%; means 1.5 times the parent’s font size.
  • Viewport units (vw, vh): Relative to the size of the viewport.
    • Example: font-size: 2vw; adapts based on the width of the browser window.
• c. Keywords (Predefined values):
  • Keywords such as xx-small, x-small, small, medium, large, x-large, xx-large, and larger or smaller adjust size relative to parent or default values.

Proper implementation of the font-size property ensures that text remains accessible, visually appealing, and adaptable across various devices and contexts.

3. The font-size-adjust Property

Text readability is enhanced with the CSS font-size-adjust feature, which modifies the font size of fallback fonts according to their x-height (the height of lowercase characters like “x”). When the chosen font is not accessible, this guarantees that the text will appear consistently. Adjustments can be disabled by selecting none (default) or by entering a numeric value (e.g., 0.5) to set the x-height ratio. For example:

body {
    font-family: "Arial", "Georgia", serif;
    font-size: 16px;
    font-size-adjust: 0.5;
}

Support for font-size-adjust is limited in some older browsers, so it should be used with caution and tested across different environments.

4. The font-stretch Property

With CSS’s font-stretch property, you can employ smaller or larger fonts by adjusting the text’s width. Values such as regular, condensed, and expanded, and their variants (such as ultra-condensed and extra-expanded) are all accepted. Only when the font supports these variants can this feature aid in fine-tune typography for design purposes.

p {
    font-stretch: expanded;
}

Values:
Normal: Default value, uses the font’s normal width.
Condensed: Shrinks the width of the characters. Variants include ultra-condensed, extra-condensed, condensed, semi-condensed.
Expanded: Widens the width of the characters. Variants include semi-expanded, expanded, extra-expanded, ultra-expanded.

Note:
Not all fonts support condensed or expanded styles, so testing is essential for proper rendering.

5. The font-style Property

The font-style property in CSS is used to specify the style of the font. It can have the following values:

• normal: Default, no special styling.
• italic: Slanted text, often used for emphasis.
• oblique: Similar to italic but less pronounced; it slants the text.

p {
    font-style: italic;
}

6. The font-variant Property

Alternate glyphs, or special character variations, can be used in a typeface and are controlled by the font-variant attribute in CSS. Features like style sets, ligatures, and small capitals are usually affected.

Common values:
normal: Default, no special variants.
small-caps: Displays text in small capital letters.
ligatures: Controls the use of ligatures (e.g., common-ligatures, discretionary-ligatures).

p {
    font-variant: small-caps;
}

7. The font-weight Property

The thickness of the text can be adjusted using CSS’s font-weight attribute. It is capable of accepting both keyword and numeric values:

• Keywords:
  • normal: Default weight, usually 400.
  • bold: Bold text, typically 700.
  • bolder: Bolder than the parent element’s font weight.
  • lighter: Lighter than the parent element’s font weight.
• Numeric values: Ranges from 100 (thinnest) to 900 (thickest). Example: font-weight: 600;.

Table 1 – Number Values of the Font-Weight Property

8. The font Property

In CSS, the font property is a shortcut that condenses multiple properties relating to fonts into one. Font-style, font-variant, font-weight, font-size, line-height, and font-family can all be set in a single declaration.

Syntax:

font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

Example:

p {
    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

In this example:

• italic sets the font style.
• small-caps applies small caps.
• bold specifies the font weight.
• 16px is the font size.
• 1.5 is the line height.
• “Arial”, sans-serif defines the font family.

Note: The font-size and font-family are mandatory in the shorthand; others are optional.

Introducing Web Font

Web designers can employ bespoke fonts that might not be installed on a user’s device by using web fonts, which are fonts that are downloaded and rendered by the browser. This makes it possible to have a more distinctive and consistent typographic experience on many platforms and devices. Usually, the @font-face rule or services like Google Fonts or Adobe Fonts are used to load web fonts.

@font-face rule: This allows you to define custom fonts directly in CSS by specifying the font file URL.

@font-face {
    font-family: "CustomFont";
    src: url("path/to/font.woff2") format("woff2");
}

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

Using web fonts enhances typography and design by offering more font choices, ensuring that users see the same fonts regardless of the system or device they use. For more examples click here