Digital Display Standards
Total Page:16
File Type:pdf, Size:1020Kb
Transport for London Digital display standards Issue 3 Contents Foreword 1 Basic elements 2 Basic rules of layout 3 Transitions and animations 4 Information on multiple screens 5 Digital display examples For further information Foreword Digital display standards have been produced to ensure consistency across all of TfL’s digital displays. They are designed to ensure consistency of spacing, size of font, use of colour etc. The standards also help to ensure that information is displayed in a modular nature. The standards do not specify the type of hardware or software to be used. ‘Digital displays’ are defined in this document as electronic screens that convey TfL controlled information to customers via live feeds. Such displays may be in stations, on vehicle or on street. These standards do not apply to websites or dot matrix indicators. For guidance on implementing the rules within these standards please email [email protected] 1 Basic elements This section provides guidance on the basic elements that make up the TfL digital display standards. Further information on TfL graphic standards can be found at tfl.gov.uk/corporatedesign. Central line Circle line District line 1.1 The grid All TfL digital displays must work to a grid, as shown. A grid is used to ensure that a transferable unit of measurement is available for all screen sizes and aspect ratios. A grid should adapt to any screen size or aspect ratio. 1.2 Screen aspect ratios Shown here are examples of common 4:3 screen aspect ratios. Note that aspect ratios (as well as screen dimensions) will vary in size. 16:9 16:6 21:9 1.3 Units Each grid is composed of a number Example of a 16:9 grid 1 unit of units. A 16:9 screen is 16 units wide by nine units deep and a 21:9 screen is 21 units wide by nine units deep. Regardless of the screen size the number of units used is to be determined by the aspect ratio. 1.4 Squares Each unit is divided into 8 x 8 squares 8 squares to enable font sizes to be set at a reasonable height in relation to the overall screen display area. The square is the base unit of measurement for TfL digital displays. 8 squar es 1.5 Widgets A ‘widget’ is defined as a self-contained piece of customer information. The information may relate to train arrival times, bus departures, cycle docking station availability etc. District line All information contained within a Platform widget must be clear and identifiable. Widgets may vary in size. 1 1st Upminster Due CallingMonumen at: t, Tower Hill, Aldgate East, Whit 2nd East Ham 5 min CallingMonMil at: e End, Bow Road, Bromley by Bo 1.6 Widget mock-ups Further mock-ups of widgets at different Local buses sizes containing customer information are shown here. 1st 168 Chadwell Heath A 1 min 2nd 62 Walthamstow Central B 5 min 3rd 21 Liverpool Street C 8 min 4th 12 Liverpool Street C 8 min 5th 168 Camden F 9 min Click on a docking station to 11x8 widget see how many bikes and spaces are available y M A R SH W Thames A LL Quay Hilton Hotel Breaking news MPs are debating in the house of commons and will vote on u... A D M I R A L S W AY SWING BRIDGE F 50 Bank ank eet 16x1 widget an Street Southutthh QuayQuay NK A B ER P P U 20 M A C K 25 E N Z I E 33 WA L K Canada Canada Square Canada T H Square E S O U T Square H CO LO 10 C H U N N A D E R C H I L L P L A C E The South 18 C A N A D A S Q UA R E e Canada RE T H E A S O U Idea Place U Q The Park S Store Pavilion DA One Waitrose A N A Statue Canada C Canary T H Square E N O R T H CO LO N N A D E Wharf C A N A D A S Q U 1 A R E T H E N O R T H Churchill CO LO N Place 30 N A D E 8 T H E N O R The North Canada E CO L T H 5 C O N N A D A E Colonnade Square L Canada P 25 S Square M A The North AD Colonnade R E E H G S 5 I SA B S O The North A R P F I S H F E R M A N Colonnade ’ S WA L K F I S H E R M A N ’ S WA L K Billingsgate West Fish Market India Quay North Quay Service Platform Arrival Marriott A S P E N W A Y Hotel Poplar Footbridge LI M E H O US C E 07:09 Liverpool Street Due A S TO R LINK POPPOP P LARLLAAARR L A N E Calling atShenfield: , Brentwood, Harold Wood, Gidea Park, Romford, Chadwell Heath, Goodmayes Docking station name 07:45 Shenfield 5 mins 0 Bikes 0 Spaces Calling atLiv: erpool Street Station, Maryland, Forest Gate, Manor Park, Ilford, Seven Kings, Goomay 0 0 08:18 Liverpool Street 7 mins cle carefully through the park....Pl Calling atShenfield: , Brentwood, Harold Wood, Gidea Park, Romford, Chadwell Heath, Goodmayes 6x16 widget 16x9 widget 1.7 Typography The only font to be used on digital display screens is the New Johnston typeface. There are two weights of the New Johnston font that may be used: • New Johnston Medium for headings • New Johnston Light for body copy Abcde All text is to be ranged left (except numerals, which are to be ranged right where appropriate). All text is to be displayed in mixed upper New123456 Johnston Medium and lower case (never all upper case). Always ensure good colour contrast between text and background colour. The relationship between the text and background colour is more important than the colour of the text itself. Abcde New12 Johnston Light3456 1.8 Font sizes There are three font sizes that are to be used on TfL digital displays: Four squares high This size text is to be used for main headings. 4 Three squares high This size text is to be used for primary information where space allows. Four Two squares high This size text is used for all other 3 information. Three 2 1.9 Viewing distances Grid sizes should be determined by viewing distances. 210 Text should always be shown at the 200 correct height for the viewing distance 190 (eg a viewing distance of six metres 180 should display the smallest text size, 170 within the display screen, at a cap height 160 of 20mm). 150 In such an instance, as above, with the es 140 smallest font size being two squares 130 high, each square on the grid would need 120 to represent 10mm when displayed millimetr 110 in (2 x 10mm = 20mm). 100 An appropriate display screen size 90 should be used to reproduce text at the 80 Cap height correct size. 70 60 50 40 30 20 10 0 68 12 16 24.5 32.549 60.8 Screen distance in metres 1.10 Abbreviations This list shows acceptable contractions of names for use on digital screens. If a situation arises where there is a need to contract a name not covered here, please seek advice in the first instance from TfL Corporate Design. In order to maintain consistency across all TfL information, changes to any names or contractions of names are subject to approval by TfL Corporate Design. 1.11 Primary colours TfL’s primary pallet consists of a number Primary of colours which are used across all digital display screens. Corporate Text Grey Disruption Legible London Background Blue R45 G48 B57 Yellow Blue White R53 G58 B140 R252 G198 B79 R3 G16 B65 R0 G0 B0 Background Evacuation Base Blue Base Light Blue Grey Red R28 G48 B57 R49 G107 B152 R238 G238 B238 R220 G36 B31 1.12 Mode and line colours In addition, there are mode specific and Modes Underground lines Underground line specific colours. No other colours are to be used without prior consent from TfL Corporate Design Cable Car Buses Coaches Bakerloo Central Circle R220 G36 B31 R220 G36 B31 R241 G171 B0 R178 G99 B0 R220 G36 B31 R255 G211 B41 Elizabeth line Cycles Dial-a-Ride District H’smith & City Jubilee R119 G61 B189 R220 G36 B31 R183 G39 B191 R0 G125 B50 R244 G169 B190 R161 G165 B167 DLR Overground River Metropolitan Northern Piccadilly R0 G175 B173 R239 G123 B16 R0 G160 B226 R155 G0 B88 R0 G0 B0 R0 G25 B168 Taxi/Private Hire TfL Rail Trams Victoria Waterloo & City R132 G128 B215 R0 G25 B168 R0 G189 B25 R0 G152 B216 R147 G206 B186 Underground R0 G25 B168 1.13 Branding Information on the display screen should be branded by one of the logos or pictograms shown here. All logos and pictograms are available from TfL Corporate Design. 1.14 Banners Modal and line banners are to be used to Modes Underground lines help identify the mode of transport or Underground line that the information being displayed relates to. Transport for London Bakerloo line All banners are available from TfL DLR Central line Corporate Design. Elizabeth line Circle line Emirates Air Line District line London Buses Hammersmith & City line London Dial-a-Ride Jubilee line London Overground Metropolitan line London River Services Northern line London Taxi and Private Hire Piccadilly line London Trams Victoria line London Underground Waterloo & City line Santander Cycles TfL Rail Victoria Coach Station National Rail 1.15 Additional graphic elements Additional graphical elements are to be used where appropriate.