typography & vertical rhythm - resources.mygov.scot · good typography isn’t noticed. css css...

Typography & vertical rhythmTypeface: Roboto Baseline: Aligned to 7px grid

Thin 100 – Display text (non-reverse)

The quick brown fox jumps over the lazy dog

Light 300 – Strapline, Leader, Quotes, Guide heading emphasis


Normal/Regular 400 – Body text / default


Medium 500 – Alt headings


Bold 700 – Headings, Emphasis lists, Caution notes


Ultra Bold/Black 900 – Display text


Font-weights

Tablet / Desktop 768px+


h1 letter-spacing: -0.5px

35px

-2px

56px

14px

28px

Mobile 320-767px

Mobile 320-767px

42px

14px

Core typographical elements

CSS

h1: Heading 1font-size: 49px; line-height: 56px; font-weight: 700 CSS font-size: 28px; line-height: 35px; font-weight: 700

CSS


CSS


CSS



42px

7px

Mobile 320-767px

35px

7px

Mobile 320-767px

35px

7px Tablet / Desktop 768px+

35px

7px

CSS

p: Paragraphfont-size: 19px; line-height: 28px; font-weight: 400/Regular CSS font-size: 16px; line-height: 21px; font-weight: 400/Regular


28px

Mobile 320-767px

21px

These resources have been made available to help deliver clear content and to guide you in building transactional services that will appear on mygov.scot.

CSS CSS

Good typography isn’t noticed.

CSS CSS

35px

35px

28px

28px

LeaderUse: First para of article or supporting overview text.

font-size: 24px; line-height: 35px; font-weight: 300 font-size: 21px; line-height: 28px; font-weight: 300

These resources have been made available to help deliver clear content and to guide you in building transactional services that will appear on mygov.scot.

35px

35px

28px

28px

StraplineUse: Short snappy supporting headline statements / soundbites.

font-size: 32px; line-height: 42px; font-weight: 300 font-size: 26px; line-height: 35px; font-weight: 300

Good typography isn’t noticed.

CSS CSS

Unordered Listsfont-size: 19px; line-height: 28px; font-weight: 400 font-size: 16px; line-height: 21px; font-weight: 400

Lists

You must provide:

a free collection point for all kinds of portable batteries,

not only the types you sell.

Information to customers about collection, eg a poster in your

21px

14px

28px

20px10px

You must provide:

a free collection point for all kinds of

portable batteries, not only the types you

sell.

Information to customers about collection,

eg a poster in your shop

21px

14px

21px

20px5px

left-aligned numbers

right-aligned numbers

hanging indentation

flush left list items

lorem ipsum dolor sit amet

consectetur adipiscing elit, sed do eiusmod tempor incididunt

ut labore et

dolore magna aliqua.

CSS CSS

Ordered ListsList text: font-size: 19px; line-height: 28px; font-weight: 400Number: font-weight: 500

List text: 16px; line-height: 21px; font-weight: 400Number: font-weight: 500

Lots of ways to style a list:21px

14px

28px

30px

A few ways to style a list:


Information to customers about collection,

21px

14px

25px

1.

2.

3.

4.

5.

6.

7.

1.

2.

28px

a free collection point for all kinds of portable batteries, not

only the types you sell

information to customers about collection, eg a poster in

your

a free collection point for all kinds of portable batteries, not

only the types you sell

information to customers about collection, eg a poster in

your shop

CSS CSS

Ordered ListsList text: font-size: 19px; line-height: 28px; font-weight: 700Number: font-size: 35px; font-weight: 900; letter-spacing: -1px

List text: font-size: 16px; line-height: 21px; font-weight: 700Number: font-size: 26px; font-weight: 900; letter-spacing: -1px

Lots of ways to style a list:

35px

21px

28px

30px


portable batteries, not only the types

you sell

information to customers about collec-

tion, eg a poster in your shop

A few ways to style a list:28px

21px

28px

25px

1

2

3

4

1

2

CSS CSS

Step 1 of 2 Step 1 of 2

CSS CSS

Contact Contact

Large heading emphasisfont-size: 26px; line-height: 35px; font-weight: 500 font-size: 24px; line-height: 28px; font-weight: 500

Emphasis headings

28px

21px

28px

21px

Small heading emphasisfont-size: 26px; line-height: 35px; font-weight: 500 font-size: 21px; line-height: 28px; font-weight: 500

28px

21px

28px

21px

Selling and distributing

overseas

CSS CSS

Guide heading emphasisfont-size: 38px; line-height: 42px; font-weight: 300; letter-spacing: -0.5px font-size: 25px; line-height: 35px; font-weight: 300; letter-spacing: -0.5px

Selling and distributing overseas42px

21px

35px

21px

Home › Working, jobs and pensions › Holidays, time off, sick leave, maternity and paternity pay › Home › Working, jobs and pensions ›

CSS CSS

Breadcrumbsfont-size: 14px; line-height: 28px; font-weight: 400 font-size: 14px; line-height: 21px; font-weight: 400

Page structure

14px

42px

14px

35px

CSS CSS

Standard note eg. Legal aid is different if you’ve been charged.

Find out more about criminal legal assistance.

Info Notefont-size: 17px; line-height: 28px; font-weight: 400 font-size: 15px; line-height: 21px; font-weight: 400

Notes

Standard note eg. Legal aid is

different if you’ve been charged

with a crime. Find out more about

criminal legal assistance.

CSS CSS

You can be fined up to £5,000 and your company

struck off the register if you don't send Companies

House your accounts or annual return.

Caution notefont-size: 19px; line-height: 28px; font-weight: 700 font-size: 16px; line-height: 21px; font-weight: 700

You can be fined up to £5,000

and your company struck off

the register if you don't send

Companies House your

accounts or annual return.

We must never shy away from robust

debate, but we should strive always to be

constructive and respectful.

Verbal Kint

Disclaimer. Used most commonly at the end of an article

or block element. eg. We can not be held responsible for

the content of this feed.

CSS CSS

We must never shy away from robust debate, but we should

strive always to be constructive and respectful.

Verbal Kint

CSS CSS

Disclaimer. Used most commonly at the end of an article or block element. eg. We can not be held responsible for the content of this feed.

Block notefont-size: 19px; line-height: 28px; font-weight: 300 italicSource: font-size: 15px; line-height: 21px; font-weight: 400

font-size: 16px; line-height: 21px; font-weight: 300 italicSource: font-size: 13px; line-height: 21px; font-weight: 400

Small Textfont-size: 15px; line-height: 21px; font-weight: 400 font-size: 13px; line-height: 21px; font-weight: 400

SGD00008 Published 2018

Designed in in-house by theScottish Government Digital Directorate

© The Scottish Government 2018

This rescource may be made available inalternative formats upon request. Please contact themygov.scot to make a request.

Typography Guide

typography & vertical rhythm - resources.mygov.scot · good typography isn’t noticed. css css...

Documents