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
<!-- Codes by surenko.blog--> <p style="font:italic small-caps bold 18px/24px Garamond, Georgia, Times, Serif;width:200px;"> Sample text to demonstrate HTML font code.</p>	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
<!-- Codes by surenko.blog --> <p style="font-family:Garamond, Georgia, Times, Serif"> The font-family property enables you to change the font.</p>	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
<!-- Codes by surenko.blog --> <p style="font-size:12px;"> Font size using pixels (12px).</p> <p style="font-size:12pt;"> Font size using points (12pt).</p> <p style="font-size:130%;"> Font size using a percentage value (130%).</p> <p style="font-size:medium;"> Font size using an absolute value (medium).</p> <p style="font-size:larger"> Font size using a relative value (larger).</p>	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

<!-- Codes by surenko.blog--> <p style="font-weight:normal;"> font-weight: normal</p> <p style="font-weight:bold;"> font-weight: bold</p> <p style="font-weight:bolder;"> font-weight: bolder</p> <p style="font-weight:lighter;"> font-weight: lighter</p> <p style="font-weight:100;"> font-weight: 100</p> <p style="font-weight:200;"> font-weight: 200</p> <p style="font-weight:300;"> font-weight: 300</p> <p style="font-weight:400;"> font-weight: 400</p> <p style="font-weight:500;"> font-weight: 500</p> <p style="font-weight:600;"> font-weight: 600</p> <p style="font-weight:700;"> font-weight: 700</p> <p style="font-weight:800;"> font-weight: 800</p> <p style="font-weight:900;"> font-weight: 900</p>

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
<!-- Codes by surenko.blog--> <p style="font-style:normal;"> font-style:normal</p> <p style="font-style:italic;"> font-style:italic</p> <p style="font-style:oblique;"> font-style:oblique</p> <p style="font-style:inherit;"> font-style:inherit (ie, inherit style from parent element).</p>	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
<!-- Codes by surenko.blog --> <p> This text does not use font-size-adjust.</p> <p style="font-size-adjust: 0.58;"> This text has a font-size-adjust value of 0.58.</p>	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

<!-- Codes by surenko.blog--> <p> This text does not use font-size-adjust.</p> <p style="font-stretch:wider;"> This text uses font-stretch:wider.</p> <p style="font-stretch:narrower;"> This text uses .</p> <p style="font-stretch:ultra-condensed;"> This text uses font-stretch:narrower.</p> <p style="font-stretch:extra-condensed;"> This text uses font-stretch:extra-condensed.</p> <p style="font-stretch:condensed;"> This text uses font-stretch:condensed.</p> <p style="font-stretch:semi-condensed;"> This text uses font-stretch:semi-condensed.</p> <p style="font-stretch:semi-expanded;"> This text uses font-stretch:semi-expanded.</p> <p style="font-stretch:expanded;"> This text uses font-stretch:expanded.</p> <p style="font-stretch:extra-expanded;"> This text uses font-stretch:extra-expanded.</p> <p style="font-stretch:ultra-expanded;"> This text uses font-stretch:ultra-expanded.</p>

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
<!-- Codes by surenko.blog --> <p style="font-variant:small-caps;"> Small Caps Can Be Useful... But Don't OverDo It!.</p>	Small Caps Can Be Useful... But Don't OverDo It!.

Also see the list of text codes.

Share on Google Plus

About Saroj Thapa Magar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.