CSS Font Style

CSS font-style property sets the style of the font to be used for an element. It can take the following values:

  • normal: Specifies a normal font style. This is default
  • italic: Specifies an italic font style
  • oblique: Specifies an oblique font style

It can be used in CSS by setting the font-style property to one of the above values, and applying it to a specific HTML element using a class or ID selector.

For example:

p.italic {
  font-style: italic;
}

This will make all the text within <p> tags with class italic display in italic.

CSS Font Weight

CSS font-weight property sets the weight, or thickness, of the font for an element. It can take the following values:

  • normal: Specifies a normal font weight. This is default
  • bold: Specifies a bold font weight
  • bolder: Specifies a bolder font weight
  • lighter: Specifies a lighter font weight
  • 100 - 900: Specifies a numeric font weight value.

It can be used in CSS by setting the font-weight property to one of the above values, and applying it to a specific HTML element using a class or ID selector.

For example:

p.bold {
  font-weight: bold;
}

This will make all the text within <p> tags with class bold display in bold.

It's also possible to use font-weight in combination with font-family property to specify a webfont, with a specific weight, like:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

and then apply it to an element:

p {
  font-family: 'MyWebFont';
}

It's important to note that not all font-weights are available for all fonts, so it's always recommended to check the availability of the desired font-weight before using it.

CSS Font Variant

CSS font-variant property sets the variant of the font for an element. It can take the following values:

  • normal: Specifies a normal font variant. This is default
  • small-caps: Specifies a small-caps font variant

It can be used in CSS by setting the font-variant property to one of the above values, and applying it to a specific HTML element using a class or ID selector.

For example:

p.small-caps {
  font-variant: small-caps;
}

This will make all the text within <p> tags with class small-caps display in small-caps.

Small-caps are uppercase letters that are slightly taller and not as wide as the regular lowercase letters. They are often used to give a more formal or elegant look to a text and are useful to distinguish the title of a text or a section of it.

It's important to note that not all fonts support small-caps, so it's always recommended to check the availability of the desired font-variant before using it. Some browsers may use a different font or simulate a small-caps effect if the font doesn't have the small-caps variant.

CSS Font Size

CSS font-size property sets the size of the font for an element. It can take various values, including:

  • length values (e.g. 12px, 1em, 2rem)
  • percentage values (e.g. 150%)
  • predefined keyword values (e.g. xx-small, x-small, small, medium, large, x-large, xx-large)

It can be used in CSS by setting the font-size property to one of the above values, and applying it to a specific HTML element using a class or ID selector.

Example with pixels values:

p {
  font-size: 16px;
}

This will make all the text within <p> tags display in 16px.

Example with percentage value:

p {
  font-size: 150%;
}

This will make all the text within <p> tags display at 150% of the parent element's font-size.

Examples with predefined keyword values:

h1 {
  font-size: x-large;
}

This will make all the text within <h1> tags display at the x-large font-size, which is typically larger than the default medium font-size.

p.small {
  font-size: small;
}

This will make all the text within <p> tags with class small display at the "small" font-size, which is typically smaller than the default medium font-size.

p.xx-small {
  font-size: xx-small;
}

This will make all the text within <p> tags with class xx-small display at the xx-small font-size, which is the smallest predefined font-size.

It's also possible to use font-size in combination with other font properties like font-family, font-weight, font-style, etc. to specify a complete font-face.

It's important to note that different browsers and devices may interpret the values differently, so it's always recommended to test how the font size looks on different platforms before making a final decision.

Also, it's important to keep in mind accessibility guidelines and to ensure that the text is readable for people with visual impairments.

Responsive Font Size

Responsive font-size is a technique used in web design to ensure that text is legible and easy to read across different devices and screen sizes. It uses CSS media queries to adjust the font-size based on the screen size, resolution and other features of the device being used to view the website.

One way to implement responsive font size is to set different font-size values for different screen sizes using media queries, like this:

p {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1280px) {
  p {
    font-size: 20px;
  }
}

This will make the font-size of <p> tags to be 16px for screens under 768px, 18px for screens between 768px and 1279px, and 20px for screens 1280px and larger.

Another way is to use viewport units (vw, vh, vmin, vmax) that are based on the size of the viewport.

For example:

p {
  font-size: 2vw;
}

This will make the font-size 2% of the viewport width.

It's also possible to use responsive font-size libraries like vh-unit, a library that allows the usage of vh units in a way that works consistently across all devices and browsers, or using CSS preprocessors like SASS, LESS, etc.

CSS Basics