25 VISUAL

ALIGNMENTAll text (print and web) is aligned flushed left, ragged right. Figure B-1 shows an example.

Fig. B-1 Alignment

12/1/13

26 VISUAL

BODY TEXTBody text on all print deliverables uses a serif (font with the appendage), 12 point, regular, Book Antiqua font. Figure B2 shows an example.

Fig. B-2 Print Body Text

12/1/13

27 VISUAL

BODY TEXTBody text on web deliverables uses a san serif (font without the appendage), 12 point, regular, Myriad, Myriad Pro, Myriad Web Pro, Trebuchet MS, and Tahoma fonts. Figure B-3 shows an example.

Fig. B-3 Web Body Text

12/1/13

28 VISUAL

DATE AND TIMEDate is displayed with a 2-digit month, 2-digit day, and a 4digit year. Figure B-4 shows an example.

Fig. B-4 Date Format

12/1/13

29 VISUAL

DATE AND TIMETime is displayed with 1 digit for minutes (unless it has 2 digits), and 2 digits for hours. Figure B-5 shows an example.

Fig. B-5 Time Display

12/1/13

30 VISUAL

DISPLAYING BRANDINGMAA Branding is displayed on print and web deliverables. Branding for print deliverables is displayed in the lower right corner of the document. Figure B-6 shows an example of branding on print deliverables.

Fig. B-6 Print Branding

12/1/13

31 VISUAL

DISPLAYING BRANDINGBranding for web deliverables is displayed in the upper left corner of the document. Figure B-7 shows an example.

Fig. B-7 Web Branding

12/1/13

32 VISUAL

FONTPrint deliverables use 2 types of font. Book Antiqua for Body and List Text Myriad for Header, Footer, Branding and Contact text Figure B-8 shows an example of print font.

Fig. B-8 Print Font

12/1/13

33 VISUAL

FONTWeb deliverables use 3 types of font. families in Cascading Style SheetCSS. Myriad (Myriad Web Pro, Myriad Pro) Tahoma Trebuchet MS Figure B-9 shows an example of web font. Figure B-10 shows the CSS.

Fig. B-9 Web Font.

12/1/13

34 VISUAL

FONTFig.B-10 Web CSS

FOOTERSFooters are at the bottom of a print or web document. Footers use a san serif (font without the appendage), 12 point, regular, Myriad font. (Myriad Web Pro, Trebuchet MS and Tahoma for CSSCascading Style Sheet) Figure B-11 shows an example.

Fig. B-11 Footer

12/1/13

35 VISUAL

HEADERSHeader 1 uses a san serif (font without the appendage), 24 point, regular Myriad font.(strong Myriad Web Pro, Trebuchet MS and Tahoma for CSSCascading Style Sheet) Figure B-12 shows an example of a Header 1.

Fig. B-12 Header 1

12/1/13

36 VISUAL

HEADERSHeader 2 uses a san serif (font without the appendage), 20 point, regular, Myriad font.(Myriad Web Pro, Trebuchet MS and Tahoma for CSSCascading Style Sheet) Figure B-13 shows an example.

Fig. B-13 Header 2

12/1/13

37 VISUAL

HEADERSHeader 3 uses a san serif (font without the appendage), 16 point, regular Myriad Pro font.(Myriad Web Pro, Myriad, Trebuchet MS and Tahoma for CSSCascading Style Sheet) Figure B-14 shows an example.

Fig. B-14 Header 3

12/1/13

38 VISUAL

HEADERSHeader 4 uses a san serif (font without the appendage),12 point, Myriad font. (Myriad Web Pro, Trebuchet MS and Tahoma for CSSCascading Style Sheet) Figure B-15 shows an example

Fig. B-15 Header 4 12/1/13

39 VISUAL

ILLUSTRATIONSIllustrations should show as much accurate, detailed information about each element as possible (allowed by space). Figure B-16 shows a suggestion of how to add detailed information to the print Site Map. This will help improve the marketability of the deliverables.
*Please note the key on map Fig. B-16

12/1/13

40

Fig. B-16 Site Map Illustration 12/1/13

41

VISUAL

ILLUSTRATIONSFigure B-17 shows a suggestion of how to add detailed information to improve a layout print deliverable.

12/1/13

42

Fig. B-17 Layout Illustration 12/1/13

43 VISUAL

LAYOUTLayout for all print deliverables is in Landscape. Figure B-18 shows an example.

Fig. B-18 Landscape Layout

12/1/13

44

VISUAL

LAYOUTWeb layout is in Portrait. Figure B-19 shows an example.

Fig. B-19 Web Layout 12/1/13

45

VISUAL

NUMBERSUse only cardinal numbers (e.g. 1,2,3 etc.) Figure B-20 shows an example.

Fig. B-20 Numbers

12/1/13

46

VISUAL

SPACINGBULLET LISTS AND SPACING There are 2 spaces (hard spaces) after a bullet or arrow list. Figure B-21 shows an example.

Fig. B-21 Bullet List Spacing

SPACING AFTER A COMMA There is 1 space (hard space) after a comma. Figure B-22 shows an example.

Fig. B-22 Spacing after a Comma

12/1/13

47 VISUAL

SPACINGSPACING AND PARENTHESES There is 1 space (hard space) before and after parentheses. Figure B-23 shows an example.

Fig. B-23 Parentheses Spacing

SPACING AFTER PERIODS There are 2 spaces (hard spaces) after periods at the end of the sentence. Figure B-23 shows an example.

Fig. B-24 Period Spacing

12/1/13

48 VISUAL

SPACINGSPACING BETWEEN WORDS There is 1 space (hard space) between words. Figure B-25 shows an example.

Fig. B-25 Spacing Between Words

12/1/13

49 VISUAL

SPACINGSPACING BETWEEN NUMBERS An En Dash should be used to separate cardinal numbers (1,2,3 etc.) in a span or range of numbers. *Note, an en dash
is longer than a hyphen.

Figure B-26 shows an example of a hyphen space

6-7
Fig. B-26 Hyphen Space

Figure B-27 shows an example of an en dash

67
Fig. B-27 En Dash

To make an en dash with a PC (or Mac): 1. Type a number 2. Type a space after the first number 3. Type 2 hyphens 4. Type a space 5. Type the next number 6. Hit the space bar after the 2nd number

7. delete the space between the first and second number

12/1/13

50 VISUAL

SPACINGTo make an en dash with a Mac: 1. Type a number 2. Press and hold the option [alt] key 3. At the same time, press and hold the hyphen key Figure B-28 shows an example.

Fig. B-28 En Dash

12/1/13

51 VISUAL

TYPEFACECalais uses serif (font with the appendage) and san serif (font without the appendage) font faces. Serif font is only used for print body text. Figure B-29 shows an example.

Fig. B-29 Print Typeface

12/1/13

52 VISUAL

TYPEFACESan serif (font without the appendage) font is used for Online Body text Print and Web Header text Print and Web Footer text Print and Web Branding text Figure B-30 shows an example of Web Body Text

Fig. B-30 Web Body Text

12/1/13

53 VISUAL

TYPE STYLECalais uses Regular font in all its text (print and web). Figure B-31 shows an example.

Fig. B-31 Regular Text

12/1/13

54 VISUAL

TYPE STYLEUse the <strong> attribute in Cascading Style SheetCSS to show emphasis to text in web deliverables. (e.g. in header or footer text) Figure B-32 shows an example.

Fig. B-32 Strong Attribute in Web Text

12/1/13