Formatting

Overview

Formatting is how we structure and display different types of data, like date and time.

Principles

• Clarity
• Consistency

Date

General

These are copy best practices for banner messages, toast notifications, and all other written communications.
Don't use ordinals when writing the date. Refer to 12 AM as midnight and 12 PM as noon.

👍

Try this

• September 1 at noon
• Midnight on December 3

❗️

Not this

• September 1st at 12 PM
• 12 AM on December 3rd

When referring to a date in the current calendar year, there's no need to add the year. If the date isn't in the calendar year, include the year.

👍

Try this

• Next update will happen June 17.
• We started working remotely March 20, 2020.

❗️

Not this

• Next update will happen June 17, 2020
• We started working remotely March 20.

If the day of the week is significant or adds clarity, you can include it. For example, writing Saturday or Sunday might be helpful since they're outside the work week.

Abbreviations

When space is limited, use abbreviations for the days of the week and/or months in a 3-letter format. Don't use numbers for months in written abbreviations.

👍

Try this

Tue, Aug 4

❗️

Not this

Tue, 8/4

When using words like today, tomorrow, and yesterday, it can be helpful to add the date to avoid confusion. This is when space permits.

👍

Try this

The release is tomorrow, April 1.

The update was yesterday, May 4.

❗️

Not this

The release is tomorrow.

The update was yesterday.

Time

When referring to the time, use the 12-hour clock with a space and AM or PM after the number. Use the uppercase AM and PM without periods in most cases, although some systems might default to another format.

Approximate times can be a single unit, like 2 minutes instead of 2 minutes and 26 seconds.

When the possibility of different time zones exists, clarify that. Write the time zone in all caps.

👍

Try this

4 PM EST

❗️

Not this

4PM

If the 24-hour clock will help people understand the data you're displaying, then use it. Sometimes a system will default to the 24-hour clock.

Times displayed in the 24-hour format should have four numbers. The first two represent the hour, the last two represent the minutes. If you need to be more precise, you can include the seconds. A colon should separate the hours, minutes, and seconds.

The clock starts at 00:00 (midnight) and ends at 23:59. No need to include AM or PM.

Don't use “military time” — when the colon between the hours and minutes is removed.

👍

Try this

• 22:57:12
• 01:37
• 16:00

❗️

Not this

• 22:57:12 PM
• 1:37
• 1600

Date and time together

Follow the general format of date first, then time separated by a comma.
For example: Aug 29, 2016, 4:31 AM

Date and time ranges

Date ranges

When a date range should be displayed using long format, use spaces and an en dash between the dates.

👍

Try this

August 1 - August 22

❗️

Not this

August 1- August 22

If both dates occur in the current year, you can leave out the year. If not, include the year for both dates even if one of the dates is the current year.

For example: December 23, 2019 – January 3, 2023
If both dates occur in the same year but not the current year, you only need to include the year once at the end of the range.

For example: December 23 – January 3, 2020
For abbreviated dates, include the space only if both dates are in different years.

👍

Try this

• Aug 1 - Aug 22
• Dec 23, 2015 - Jan 3, 2016

❗️

Not this

• Aug 1 - 22
• De 23, 2015 - Jan 3, 2016

Time ranges

If both times share AM or PM, you only need to include it once. Use an en dash with no space.

👍

Try this

1 - 2 PM

❗️

Not this

1 PM - 2 PM

If the times do not share AM and PM, include it for both times with a space on either side of the en dash. The same rules apply when using noon or midnight

👍

Try this

11:30 - 1:30 PM

❗️

Not this

11:30 AM - 1:30 PM

If you need to include the time zone you only need to include it once.

👍

Try this

11:30 AM - 1:30 PM EST

❗️

Not this

11:30 AM EST - 1:30 PM EST

Timecode

Timecode can be used to indicate time elapsed or time remaining. The proper format depends on the length of the process.

If under one minute:

Only the minutes and seconds are displayed, with a 0 shown for minutes:

For example: 0:31

If less than one hour:

Only the minutes and seconds are displayed, with two digits for minutes:

For example: 45:31

If greater than or equal to one hour:

The hours, minutes and seconds are displayed, with two digits for each.

For example: 01:42:31

If you're unsure how long the process will take, use the long format (00:00:00).

Lists and grids

When times or dates are in a list or grid, use day first, then month, then year. DD/MM/YYYY

👍

Try this

• 27/04/2023
• 02 Aug 2023

❗️

Not this

• 04/27/2023
• 02 Aug. 2023

Time should be on a second line, or two spaces should be between the date and time. A timestamp can include seconds, if applicable.

👍

Try this

• Last login

24/2/2023 09:00 AM

• Last login

02 Aug 2023 10:05:26 PM

❗️

Not this

• Last login

09:00 AM on 24/2/2023

• Last login

02 Aug 2023 10:05:26 PM

If a grid column is dedicated only to time, the time should be formatted as 00:00 (or 00:00:00 with seconds), followed by AM or PM. Add the time zone abbreviation at the end if the time will not be in the user's local time zone.

👍

Try this

Start time
8:30 AM

❗️

Not this

Start time 8:30 a.m.

Put units of measurement in column headers. For example, the column header could be months, days minutes, hours, seconds.

👍

Try this

Duration (minutes)

❗️

Not this

Duration.

Related

Referenced in this section:
Checkbox component

Data grid component

Text field component