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:
-
"normal" (default): This specifies a normal font variant, where the characters are displayed in their default typographic style.
-
"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:
- "normal" (default): This specifies the normal font weight.
- "bold": This specifies a bold font weight.
- "bolder": This specifies a font weight that is bolder than the inherited value.
- "lighter": This specifies a font weight that is lighter than the inherited value.
- 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:-