Adding a touch of style

By July 17, 2014Design, Fonts
style

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. 

Styling properties

1. Font-family

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):

<link href=’http://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’ type=’text/css’>

then style an element with the requested web font in a stylesheet:

body{font-family: ‘Open Sans’, sans-serif;}

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:

<div style=”font-family: ‘Playball’, cursive;”>This is another great new font</div>
This is a sample of Playball

2. Colour

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 text colour – color: #530FAD;
Setting background colour – background-color:rgb(255,0,0); 
This is a sample of colour #73E6E6
This is a sample of background colour #73E6E6

Please note that colour is not an accepted variant spelling for the purposes of CSS syntax.

3. Font-style

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)
font-style: italic;
This is a sample of italics

4. Font-size

Specify the size of the text inside selected elements, using any CSS units available, such as pixels, ems, percentage, etc.

font-size: 40px;
This is a sample of 40px
… and this is 20px

5. Font-weight

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: 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)

This is a sample of bold

6. Font-variant

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.

font-variant:small-caps;
This is a sample of small-caps

7. Text-decoration

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.

text-decoration:overline;
text-decoration:line-through;
text-decoration:underline;
text-decoration:blink;
This is a sample of underline

8. Text-transform

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.

text-transform:uppercase;
text-transform:lowercase;
text-transform:capitalize;
This is a sample of uppercase
…and this is capitilization

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).

text-align: center;
text-align: right;
text-align: justify;
This is a sample of justify … Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis mauris eget accumsan tristique. Mauris vitae vulputate arcu, a malesuada tellus. In at purus venenatis, mattis elit eu, ultrices ipsum. Donec sapien nunc, bibendum in est eget, pharetra egestas augue. Fusce ac mi eu justo aliquet fermentum in vitae tellus. Etiam hendrerit est eros, vitae tempus mi vestibulum id.

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.

text-indent: 50px;
This is a sample of text indented 50px
… and this is indented 20px

11. Letter-spacing

Specify the space between letters. This property is used to increase or decrease the space between characters.

letter-spacing: 3px;
letter-spacing: -3px;
This is a sample of letter spacing 5px
… and this is a sample of letter spacing -2px

12. Line-spacing

Specify the space between lines. This property is used to specify the space between the lines in a paragraph.

line-height: 70%;
line-height: 200%;
This is a sample of line spacing 130% … Donec nec augue faucibus, hendrerit nunc vitae, consectetur risus. Duis pellentesque a risus vel facilisis. Mauris consequat elit metus, id ultrices diam viverra vitae. Vestibulum venenatis odio nibh, non rutrum purus viverra a. Aliquam erat volutpat. Proin id ligula sed erat porta dapibus eleifend in ante. Nullam at eros nec quam interdum molestie. In ultricies leo justo, vitae molestie est semper ac. Aenean id risus viverra, rutrum felis a, condimentum magna
… and this is line spacing 200% … Quisque ac purus sed lectus feugiat gravida egestas iaculis enim. Praesent et vehicula tellus. Ut condimentum orci ligula, eget hendrerit eros adipiscing ac. Nam vestibulum diam nec est varius interdum. Mauris sit amet rhoncus enim, vitae iaculis libero. Pellentesque euismod aliquam vestibulum. Vivamus facilisis posuere mauris, at adipiscing mi posuere eu.

13. Word-spacing

Specify the space between words.

word-spacing:30px;
This is a sample of word spacing 30px

14. Vertical-alignment

Specify the vertical alignment of an image. This example demonstrates how to set the vertical align of an image in a text.

vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: text-middle;

15. Alt text

You can also consider styling your alt text in case visitors don’t display images.

<img src=“link-to-image” alt=“your-alt-text-here width=”300″ height=”230″ />

 

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!

About Caroline

Caroline is a specialist in business creation, growth and change management. Her aim is to empower start-ups and small businesses to drive growth through the development of business ideas, product and service development, strategy and system planning as well as business branding and promotion.

Leave a Reply