CSS Text & Typeface

The color property sets the text color. It can take different types of values. The most commonly used are:

• Color names — for example, red
• HEX values — for example, #800080
• RGB values — for example, rgb(128,0,128)

To define the default text color for a page, add the declaration for the body selector. For example:

body {

color: grey;

}

There are several CSS properties that allow you to position text the way you want. The text-align property defines the horizontal alignment of a text. The values it can take are left, right, center, or justify. Using justify will stretch each line to have equal width, like in magazines and newspapers.

To set the vertical alignment of an element, use the vertical-align property. The values it can take are top, middle, and bottom, which are pretty self-explanatory.

Decoration in CSS refers to adding a horizontal line to the text. The text-decoration property allows you to add a line under the text with the value underline, over the text (overline), or through it (line-through). You can also remove underlines from links with the following rule:

a {

text-decoration: none;

}

The text-transform property allows you to specify uppercase and lowercase letters in a text. Let's say you want to use the title case in all headings. Instead of making copywriters mind the case when adding titles, you can add a simple CSS rule to do that automatically:

h1 {

text-transform: capitalize;

}

Other values this property can take are lowercase and uppercase — to set all text to be displayed in lowercase and uppercase, respectively.

CSS allows you to make your text more interesting by adding shadows. You can define what type of shadow you want with the text-shadow property.

Each shadow can have up to 4 values:

• Horizontal offset (required)
• Vertical offset (required)
• Blur radius
• Color

In the example above, the heading has a light purple shadow with an 8px radius, an 8px vertical offset, and a 0px horizontal offset.

As an American architect Frank Lloyd Wright once said, "Space is the breath of art." In design, spacing can make or break the user experience. CSS has several properties that allow you to precisely control how much space you want to leave between characters, words, and lines.

Here are some of those text spacing properties:

• letter-spacing specifies the space between characters
• text-indent sets the indentation of the first line of a text
• line-height sets the space between lines
• word-spacing defines the space between words

Length values in px are most commonly used with these properties.

The font-family property specifies the selected element's typeface. Since there are no typefaces that are universally supported across all browsers and platforms, the best practice is to indicate several typefaces, font families, and generic family names that would definitely work with your design.

Start with your preferred typeface — for example, "Open Sans". If the typeface is more than one word, you must use quotation marks. Then enter your second, third, etc., choices, separated by commas. The browser will choose the first available font. At the end, include at least one generic family name^[1] — serif, sans-serif, monospace, cursive, or fantasy — in case none of your preferred fonts are available.

There's a number of typefaces that are very likely to be pre-installed on most operating systems, browsers, and devices — the so-called web-safe fonts. "Very likely" is the keyword here — because there's always a chance that a font is not found or is not installed properly.

If you want your design to look good on all devices, it's vital to provide browsers with several fallback font options so that if the first font does not work, the browser will try the next one.

Some of the best web-safe fonts are:

• Garamond (serif)
• Georgia (serif)
• Times New Roman (serif)
• Arial (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Verdana (sans-serif)
• Courier New (monospace)
• Brush Script MT (cursive)

The font-style property is mostly used to specify italic text. This property has three values: normal, Italic, and oblique.

Both Italic and oblique fonts look slanted. The difference is that Italic fonts are created by type designers and usually have specific, cursive letterforms, while obliques are just sloped versions of regular fonts. Most fonts have either Italic or an oblique version. If the Italic version is not available, the browser will use the oblique one and vice versa. If neither is available, the browser simulates the style artificially by sloping the glyphs of the regular face.

The font-weight property sets the weight (or boldness) of the font. This property can take either keyword values — normal, bold, lighter, and bolder — or numeric values between 1 and 1000, with 1 being the thinnest.

Keep in mind that available weights depend on the font-family set. For example, not all typefaces have bold versions.

The font-size property sets the size of the text. There are several ways to specify the font size, including keywords and numerical values. The choice depends on your needs, but the most commonly used values are absolute length values in px and relative length values in em and rem. The property also accepts percentage values.^[2]

To shorten the code, you can actually specify all individual font properties in one — the font property. It must include values for:

• font-size
• and font-family

Optionally, it may also include values for:

• font-style
• font-variant
• font-weight
• font-stretch
• and line-height

If one of the non-required values is missing, the browser will use the initial value. For example, if you don't specify the font-style property like in the example above, the browser uses the initial value normal, and the font is regular and not Italic.

If you do not want to use any of the standard fonts in HTML, Google Fonts are a great alternative — you can choose from 1000+ free typefaces.

Adding Google Fonts to your web page requires 2 steps:

1. Add a special stylesheet link to your HTML document in the <head> tag
2. Refer to the font in the font-family property

Done! Enjoy your page with the body text in beautiful tall and narrow Trirong font reminiscent of traditional Thai typefaces.