Styling text is a way to help a reader distinguish one bit of text from another. The right choice and use of type can give design impact. There are a number of variables you can alter when styling text for web. These properties can be added to a style sheet or used as an inline style. Font-family is one styling property; Helvetica looks very different from Times New Roman. A word’s colour is another part of its style; red text is easily distinguished from green text. Whether designing web pages or a blog article, bookmark this article for easy access to make styling your next web text easy.
Specify a hierarchical list of preferred fonts that a browser should use to create the text. The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
A font family is a generic name for a type of font. The specified font families are:
- serif (e.g. Times)
- sans-serif (e.g. Helvetica)
- cursive (e.g. Zapf-Chancery)
- fantasy (e.g. Western)
- monospace (e.g. Courier)
Font names should be capitalized. So for example, write Ariel, not ariel.
Google Web Fonts (GWF) is a free system which allow the use of fonts hosted on their servers. You can also download a desktop version of the fonts to use in a website project’s design phase. For a list of fonts you can use, see Google Fonts. You can start using Google fonts on your website or blog in few easy steps
Either with style sheets
Style sheets are an important component in contemporary web design allowing web page designers the ability to easily improve and alter the appearance of their pages. You can add a stylesheet link to request the desired Google Web Font(s):
then style an element with the requested web font in a stylesheet:
Or with inline style
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. Link to a Google Web Font with an inline style on the element itself:
Specify the foreground as well as the background colour of an element.
With CSS, a colour is most often specified by:
- a HEX value – like “#ff0000”
- an RGB value – like “rgb(255,0,0)” as well as RGB value with opacity like “rgba(255,0,0,0.3)”
- a color name – like “red”
Setting background colour – background-color:rgb(255,0,0);
Please note that colour is not an accepted variant spelling for the purposes of CSS syntax.
Specify text to be oblique or italic. This property has three values:
- normal – The text is shown normally
- italic – The text is shown in italics
- oblique – The text is “leaning” (oblique is very similar to italic, but less supported)
Specify the size of the text inside selected elements, using any CSS units available, such as pixels, ems, percentage, etc.
Specify the boldness of text in selected elements. Font-weight may take two kinds of values, keywords and numerical values. You can use the following keywords: normal or bold.
Font-weight can also be specified using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900. Each value is one degree bolder than the previous. Normal is equivalent to 400. bold is equivalent to 700. However, note that many common computer fonts are only available in a limited number of weights (often, the only options are normal and bold)
Specify an element’s text to be small-caps, also known as copperplate letters. Font-variant can take the value of normal or small-caps.
Specify the following styles to text: none, underline, overline, line-through, blink. If there is more than one value in the list, values are separated by spaces.
Specify the capitalization of text. The text-transform property allows you to ensure that an element conforms to a specific type of capitalization. The three types of capitalization supported are:
- capitalize, where every word is capitalized, ie the first letter of each word is in capital letters
- uppercase, where every letter is in uppercase
- lowercase, where every letter is in lowercase
Regardless of the actual capitalization of the text in the source, the browser transforms the text to conform to the desired capitalization.
9. Text Alignment
Specify the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to “justify”, each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
10. Text Indentation
Specify the indentation of the first line of a text. This property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element. Spacing is calculated from the starting edge of the block-level container element.
Specify the space between letters. This property is used to increase or decrease the space between characters.
Specify the space between lines. This property is used to specify the space between the lines in a paragraph.
Specify the space between words.
Specify the vertical alignment of an image. This example demonstrates how to set the vertical align of an image in a text.
15. Alt text
You can also consider styling your alt text in case visitors don’t display images.
There are a wide range of typographic tricks and tips that can help make your text stand out from the crowd. One of the reasons people will be visiting your website or blog is to read what you or your authors have written so it makes sense to make to deliver your information with careful consideration of its appearance. Have fun styling your text but don’t go overboard!