JavaScript Tutorial

CSS Fonts

This property is used to control the look of texts. Choosing the right font and style is very crucial for the readability of text on a page.

CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on.

 

Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to change the color of the text.

There are three different formats to define a color:

  • By a color name(red, blue)
  • By hexadecimal value (#000, #ccc)
  • By RGB(rgb(0,0,0))

Input:-

 

Output:-

 

Font Family

This property is used to specify the font to be used to render the text.

This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user's system, browser tries to use the second one, and so on.

Hence, we should list the font we want first, then any fonts that might fill in for the first if first is not available. We should end the list with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy so that if no font is there, atleast the element will fall in this default font family.

Note: If the name of a font family contains more than one word, it must be placed inside quotation marks, like "Times New Roman", "Courier New", "Segoe UI", etc.

Input:-

 

Output:-

The most common font families used in web design are serif and sans-serif, as they are more suitable for reading. While monospace fonts are commonly used to display code, because in this font face each letter takes up the same space which looks like typewritten text.

The cursive font looks like cursive writing or handwriting. The fantasy font represents artistic font, but they are not used widely because of poor availability across the OS.

 

Font Size

CSS font size property is used to change the size of the font. These are the possible values that can be used to set the font size:

Font Size Value

Description

xx-small

display the extremely small text size.

x-small

display the extra small text size.

small

display small text size.

medium

display medium text size.

large

display large text size.

x-large

display extra large text size.

xx-large

display extremely large text size.

smaller

display comparatively smaller text size.

larger

display comparatively larger text size.

size in pixels or %

set value in percentage or in pixels.

Input:-

 

Output:-

When specifying font sizes in pixels (px), it can limit accessibility because users cannot easily change the font size from their browser settings. This can be problematic for users with limited vision who may need to increase the font size significantly.

To create a more inclusive design, it is recommended to use values that are relative to the user's default font size. Relative units such as percentages (%), ems (em), or rems (rem) allow the font size to adapt to the user's preferences.

Using relative units ensures that the font size scales proportionally based on the user's preferred settings, making the content more accessible and accommodating for users with different visual needs.

Font Style

The font-style property is used to set the font face style for the text content of an element. The font style can be normal, italic, or oblique. The default value is normal.

Input:-

 

Output:-

 

Font Variant

The font-variant property is used to set the font variant of an element. It can have two possible values:

  1. "normal" (default): This specifies a normal font variant, where the characters are displayed in their default typographic style.

  2. "small-caps": This specifies that the font should be rendered in small capitals. The lowercase letters are replaced with smaller uppercase letters while the uppercase letters remain unchanged.

By using the font-variant property, you can modify the appearance of text and apply small caps styling if desired.

Input:-

 

Output:-

 

Font Weight

The font-weight property is used to define the weight or thickness of a font. It allows you to specify how bold or light the font should appear. The possible values for the font-weight property are:

  1. "normal" (default): This specifies the normal font weight.
  2. "bold": This specifies a bold font weight.
  3. "bolder": This specifies a font weight that is bolder than the inherited value.
  4. "lighter": This specifies a font weight that is lighter than the inherited value.
  5. Numeric values ranging from 100 to 900: These values represent specific font weights where higher numbers indicate a bolder weight and lower numbers indicate a lighter weight. Not all numeric values are supported by all fonts, and the available weights vary depending on the font family.

By using the font-weight property, you can adjust the thickness of the text to achieve the desired visual effect.

 

Input:-

 

Output:-

 

Font Shorthand Property

The font shorthand property is used to set multiple font-related properties in a single declaration. It allows you to specify various font properties such as font-size, font-family, font-weight, font-style, and font-variant in a compact form.

Input:-

 

Output:-

 

Go back to Previous Course