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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

Small Caps Can Be Useful... But Don't OverDo It!.

Also see the list of text codes.

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

My Related Sites

Here are some of my other sites: