† Hide or show labels
† This is a megatitle (H1) for stylistic use on subject area introductions. You may want to kern this manually.
† This is an article title (H1)
† This is an article standfirst
† Subheadings and body copy
† Bullets hang in the gutter,
don't indent the text
† Punctuation is not required at the end of list items
† Tables should use stripy rows,
emphasis on the key numbers - the point of using the table
† Columns of numbers align to the right, or the decimal place
† Pull quotes site beside, or stepping outside of body copy, wrapping using a float
† Pages end, and a logical 'next' is provided

Typography

It has been said 95% of the information on the web is written. Typography is the way our words appear on the screen and how well designed the typography is can improve or damage reading, understanding and outcomes. The text is the user interface, so we will cover this first.

Notes on reading and understanding

Good typography is based on a hierarchy of styles that combine in weight and size to improve comprehension while being attractive. Using this hierarchy with care we can guide the reader through with the least amount of effort required. A strong left hand edge helps do this.

Page edge

Here is the edge of our main column. Having a single, central column lets us control how many characters and words appear on each line and gives us plenty of white space.

The combination of shorter lines and more space slows down reading speed and increases comprehension. Financial advice is difficult enough to understand for the smartest of us, we need to make every improvement we can to help people.

A note on links and linking

It’s what makes this the web. It’s great that we can suggest related topics alongside an article however links in the body copy get clicked more often. Credibility for information can also be improved by directly linking to a reference source.

Be generous with external links – it makes us credible and confident in what we say. Include a link title so people know where they will be going.

On the typefaces

Display type is designed to be bold, beautiful and read at large sizes, for example in headlines. A typeface designed for use in display is not considered appropriate for reading at small sizes or in pieces containing many words.

Museo is a display typeface, and it should be used sparingly on-screen. The heaviest weight 900 should also be avoided entirely as the letter details become indistinct when smoothed on screen.

Type for directions, labels, links, sections and general use should be a clear well-spaced sans-serif. We will use Helvetica Neue, and Arial on Windows.

Main body copy for articles will also use Helvetica/Arial, at a minimum of 16px (ideally 18px) set with larger than normal linespace and in a dark grey #333 or colour.

To avoid the extreme contrast problems caused by very bright screens 100% black text should be reserved for headings. Reversed out type, white on black or a colour should be avoided as it is more difficult to read, especially for older people. Don't use for critical items or smaller than 18 pixels.

Example content from a live page follows


Credit cards

Should you transfer a credit card balance?

Balance transfers can help you to lower the cost of your credit card borrowings and consolidate multiple debts. They could potentially help you lower your outgoings as well.

How a balance transfer could work

Transferring your balance means moving all or part of a debt from one financial provider to another. People often use them to take advantage of lower interest rates. Banks and credit card companies often charge a fee for balance transfers. These fees usually depend on the size of the transfer and may also vary according to the length of the introductory period. Be sure to check the fee and take this into account when calculating potential savings.

If you have a balance on a credit card, it’s a good idea to reduce the interest you pay

What it costs

Banks and credit card companies often charge a fee for balance transfers. These fees usually depend on the size of the transfer and may also vary according to the length of the introductory period. Be sure to check the fee and take this into account when calculating potential savings.

Things to watch out for

Switching your debt to a card with a lower interest rate lets you do these things:

What are they for?

Credit cards are genuinely useful, provided you know how best to use them:

Working out the total cost

Rachel has £1,000 of debt on a credit card with an APR of 17.9%. She can afford to pay off £20 a month. Here are examples of the savings she could make by transferring her balance:

Introductory rateBalance transfer
handling fee
How much
Rachel saves
0% for 23 months23.32%£260.93
0% for 22 months2.9%£253.29
0% for 21 months2.6%£244.54
0% for 18 months3%£94.00
0% for 16 months1.99%£60.23

You’ll need to transfer an amount that’s within the credit limit on your new card, minus the fee.

How to transfer a balance

Before you start, it’s best to speak to your bank or credit card company to find out how to transfer your balance. You may be able to do this online.

Important

Make sure you repay your debt by the time the preferential interest rate period runs out. Don’t assume that you’ll qualify for another deal.

What it costs

Banks and credit card companies often charge a fee for balance transfers. These fees usually depend on the size of the transfer and may also vary according to the length of the introductory period. Be sure to check the fee and take this into account when calculating potential savings.

Tool
Email this page Print this page
Next



Hide or show annotations

type-scale-a

For more on columns, see the grid

Print text hierarchy

Text hierarchy for print from brand guidelines, 3 words set in Museo

body-copy-examples

Browser screengrab text of Arial and Helvetica

Museo Slab 100 using Typekit
4em / 72px / #72bf44 green

Museo Slab 100 using Typekit
2em / 36px / black

Helvetica Neue / Arial
1.1em / 20px / black

H2 is Museo Slab 500
1.33em / 24px / black

Body is Helvetica Neue / Arial
1em / 18px / #333 grey

Inline links are always blue
#1D5F9E / yellow highlight

Alert box in red, green or amber
MAS stance: bad v good

H3 is Helvetica Neue / Arial
1.1em / 20px / black / bold

Footer break in #333
Museo 500 1em white

The only reversed text in the design

Text links below, useful for people brilliant for machines