Skip to content
Internet Programming
GitHub
Next
Intro to JavaScript

Working with CSS Font Properties

Switch to Zen Mode

CSS Font Properties

  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • line-height
  • letter-spacing
  • text-transform

Font Size, Style, and Variants

Section titled “Font Size, Style, and Variants”

Font Size

Section titled “Font Size”

The font-size property controls the size of the text. You can set it using various units such as pixels (px), ems (em), rems (rem), percentages (%), and viewport units (vw, vh).

Example:

p {
  font-size: 16px;
}
css
  • px: Fixed size, good for precise control.
  • em: Relative to the parent element’s font size.
  • rem: Relative to the root element’s font size (usually <html>).
  • vw/vh: Relative to the viewport width/height, useful for responsive design.

Font Weight

Section titled “Font Weight”

The font-weight property sets the thickness of the text. It can be specified using numeric values (100 to 900) or keywords like normal, bold, or bolder.

Example:

h2 {
  font-weight: bold;
}
css

Font Style

Section titled “Font Style”

The font-style property defines the style of the font, such as normal, italic, or oblique.

Example:

em {
    font-style: italic;
}
css

Font Variant

Section titled “Font Variant”

The font-variant property is used to control features such as small caps, alternate characters, and others that might be supported by certain fonts.

Example:

small {
    font-variant: small-caps;
}
css

Line Height and Letter Spacing

Section titled “Line Height and Letter Spacing”

Line Height

Section titled “Line Height”

The line-height property controls the space between lines of text. You can set it in units such as px, em, or rem, or use a unitless value (which is a multiplier of the font size).

Example:

p {
    line-height: 1.6; /* 1.6 times the font size */
}
css

Letter Spacing

Section titled “Letter Spacing”

The letter-spacing property controls the spacing between characters in a text.

Example:

h1 {
    letter-spacing: 1px;
}
css

Text Alignment and Transformation

Section titled “Text Alignment and Transformation”

Text Align

Section titled “Text Align”

The text-align property is used to set the horizontal alignment of text within a container.
Common values include:

  • left: Aligns text to the left.
  • right: Aligns text to the right.
  • center: Centers the text.
  • justify: Stretches text to fit the width of the container.

Example:

p {
    text-align: justify;
}
css

Text Transformation

Section titled “Text Transformation”

The text-transform property is used to control text casing:

  • uppercase: Converts all letters to uppercase.
  • lowercase: Converts all letters to lowercase.
  • capitalize: Capitalizes the first letter of each word.

Example:

h2 {
    text-transform: uppercase;
}
css

Font Rendering and Smoothing

Section titled “Font Rendering and Smoothing”

Some browsers and operating systems allow you to control font rendering and anti-aliasing. In CSS, you can use the -webkit-font-smoothing and font-smooth properties for smoother text rendering, particularly on macOS.

Example:

body {
    -webkit-font-smoothing: antialiased; /* For Webkit-based browsers (e.g., Chrome, Safari) */
    font-smooth: always; /* For Firefox */
}
css

Responsive Typography with viewport Units

Section titled “Responsive Typography with viewport Units”

You can make font sizes responsive to screen sizes using relative and viewport units (vw, vh, em, rem). This allows the text to scale appropriately based on the size of the viewport, providing a better user experience across different devices.

Responsive typography ensures that your text looks good on all screen sizes. A common technique is using relative units like em or rem for font size. You can also use media queries to adjust font sizes based on the viewport.

h1 {
    font-size: 5vw; /* Font size will adjust to 5% of the viewport width */
}
css

Example using rem and Media Queries:

Section titled “Example using rem and Media Queries:”
body {
  font-size: 16px; /* Base font size */
}


@media (min-width: 600px) {
  body {
    font-size: 18px; /* Larger font for bigger screens */
  }
}
css