CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In this section, we will learn how to change the size of our font by the use percentage. The following are a few critical attributes which we can use in our text to make it more attractive:

Attributes Description
Font color Font color property is applied to modify the text color.
Font size Font size property is applied to either increase the font size or decrease the font size.
Font family Font family property is applied to modify the font face.
Font style Font style property is applied to produce the font oblique, italic, or bold.
Font weight Font weight property is applied to increase the font’s lightness and boldness or decrease the same.
Font variant The font-variant is applied to makes an effect of small-caps.

Font Color

The font color property of CSS is a unique and standalone attribute, although it looks like a type of fonts in CSS. It is applied to make modifications to the text color. We can define the font color by one of the following formats:

  • Color name
  • Hexadecimal value
  • RGB

Example:

Output:

CSS Font

Font Size

The font size attribute of CSS is applied to modify the font size. Some of the essential values that are applied to set-up the size of the font:

  • xx-small:  It isapplied to show the text in extremely small size.
  • x-small: It isapplied to show the text in extra small size.
  • small: It isapplied to show the text in small size.
  • medium: It isapplied to show the text in medium size.
  • large: It isapplied to show the text in large size.
  • x-large: It isapplied to show the text in extra-large size.
  • xx-large: It isapplied to explain the text in extremely large size.
  • smaller: It isapplied to show the text comparatively in smaller size.
  • larger: It isappliedto show the text comparatively in larger size.
  • % or pixels size: It isemployed to set the font size in percentage or in pixels.

Example:

Output:

CSS Font

Font Family

The font family is categorized into two parts:

  • Font family: It defines the name of the font family such as Times New Roman, Arial etc.
  • Generic family: The generic family includes Sans-serif, Monospace, and Serif.

Serif: These types of fonts incorporate tiny lines at any character’s end. Its examples are- Georgia, and Times New Roman.

Sans-serif: It does not hold tiny lines at any character end. The examples are- Verdana, Arial, etc.

Monospace: Every character of monospace has the similar width.

Example:

Output:

CSS Font

Font Style

This property describes what kind of font view we wish to illustrate on the screen. These styles can be normal, italic, oblique etc.

Example:

Output:

CSS Font

Font Weight

It is used to depict the weight of the font. Some of the values to determine the font’s weight are- bold, bolder, lighter, normal, number, or lighter.

Example:

Output:

CSS Font

Font Variant

It determines that either the text should be viewed in the small-caps font effect. The effect can also be set as normal.

Example:

Output:

CSS Font

Pin It on Pinterest

Share This