Font Code
The following font codes contain the word word "font" in their name eg, font-size, font-stretch etc.
Also see text codes, which are the properties that contain "text" in their name eg, text-transform, text-align etc.
The font Property
The font property is shorthand code that allows you to set multiple font properties in one go. The font property enables you to set the following properties: font-style, font-variant, font-weight, font-size, line-height, and font-family.
| Source Code | Result |
|---|---|
|
Sample text to demonstrate HTML font code. |
The font-family Property
If you only need to set one or two font properties, you might prefer to use the explicit font property, rather than the shorthand property as outlined above.
The font-family property is probably the most common font property. It allows you to set the font family - often simply referred to as "font" (eg, "How do I change the font?").
| Source Code | Result |
|---|---|
|
The font-family property enables you to change the font. |
The font-size Property
To change the size of the font, you can use the font-size property. This property accepts various values, including a pixel size, points, percentage value, and more. Here are some examples of setting the font size using different values:
| Source Code | Result |
|---|---|
|
Font size using pixels (12px). Font size using points (12pt). Font size using a percentage value (130%). Font size using an absolute value (medium). Font size using a relative value (larger). |
The font-weight Property
To set text to bold, use the font-weight property. Although this font code allows you to specify various levels of boldness, most browsers can only render two levels (bold and normal). Therefore, the most common values are bold and normal (which overrides any bold setting).
Here are some examples. If your browser doesn't render these properly, you'll probably only see two levels of bold.
| Source Code | Result |
|---|---|
|
font-weight: normal font-weight: bold font-weight: bolder font-weight: lighter font-weight: 100 font-weight: 200 font-weight: 300 font-weight: 400 font-weight: 500 font-weight: 600 font-weight: 700 font-weight: 800 font-weight: 900 |
The font-style Property
The font-style property enables you to specify italics and oblique font styles. Examples below:
| Source Code | Result |
|---|---|
|
font-style:normal font-style:italic font-style:oblique font-style:inherit (ie, inherit style from parent element). |
The font-size-adjust Property
Now we'll look at some of the less commonly used font codes. First up, the font-size-adjust property.
The font-size-adjust property scales the x-height of your font. This font code can be used if you're using a font that's hard to read at a given size. Using this property can make your font more legible.
Note: At the time of writing, most browsers don't support this property, therefore, don't be surprised if you can't see any difference in this example.
| Source Code | Result |
|---|---|
|
This text does not use font-size-adjust. This text has a font-size-adjust value of 0.58. |
The font-stretch Property
You can stretch your fonts horizontally by using the font-stretch property. Examples below.
Note: At the time of writing, most browsers don't support this property, therefore, don't be surprised if you can't see any difference in this example.
| Source Code | Result |
|---|---|
|
This text does not use font-size-adjust. This text uses font-stretch:wider. This text uses . This text uses font-stretch:narrower. This text uses font-stretch:extra-condensed. This text uses font-stretch:condensed. This text uses font-stretch:semi-condensed. This text uses font-stretch:semi-expanded. This text uses font-stretch:expanded. This text uses font-stretch:extra-expanded. This text uses font-stretch:ultra-expanded. |
The font-variant Property
To render your text in small caps, use the font-variant property. Example:
| Source Code | Result |
|---|---|
|
Small Caps Can Be Useful... But Don't OverDo It!. |
Also see the list of text codes.