Block size

Blocks have three sizes

Blocks have three different sizes. Don’t be afraid to use the two larger blocks, which give the typography more air and space.

How blocks are constructed

Block typography consists of headings, body text and vertical headings. Don’t forget to add the vertical heading. They serve as a sort of DNA that unifies the entire website.

Full-width blocks function as separate modules. Thus a block should not be able to work as a heading for a block located below it, as in the example below.

Try to rework the content so that we don’t have blocks that are only headings for other blocks.

The vertical heading

The vertical heading may be a category or a topic such as: “OUR PROFESSIONS” “OCCUPATIONAL HEALTH SERVICES” “INTEGRATED VALUE CHAIN”

Amount of text

Blocks are nearly always ways in to other pages with more in-depth information. Try to keep the amount of text down to two or three lines. The pieces of text in blocks should be viewed as a small sample of what will be displayed once the user chooses to click their way onward.

Tips for block content

Here are three types of examples where the text used in the block is too long.

Body text: Try to keep the amount of body text down, especially in blocks that are ways in to other pages. Two to three lines of body text is a benchmark.

Quote: This can be longer, but remember to keep the amount of text down here as well.

Links: Try to keep the number of links down. When there are more than three to four links, this often looks cluttered to visitors.

In general, try to keep down the amount of text in blocks.

Other examples

All body text against light backgrounds must be set as G5. Dark green. In the examples below, the text has been set as G3. SCA Green.

Try to set all body text as G5. Dark green against light backgrounds.

All text in blocks must be centered. The image below shows an example of where we did not use centered text in a block.

Try to center all pieces of text in blocks.