THE LOGO 4 COLOR PALETTE 6 LOGO USAGE 7 THE TYPEFACE 8 GENERAL GUIDELINES 10 TYPOGRAPHY USAGE 11 SUPPLEMENTAL ICONS 12

Size: px

Start display at page:

Download "THE LOGO 4 COLOR PALETTE 6 LOGO USAGE 7 THE TYPEFACE 8 GENERAL GUIDELINES 10 TYPOGRAPHY USAGE 11 SUPPLEMENTAL ICONS 12"

Loren Mills
5 years ago
Views:

1 BRAND GUIDELINES

3 THE LOGO 4 Clear Area Alternate Logo Versions COLOR PALETTE 6 Color Options LOGO USAGE 7 THE TYPEFACE 8 Suggested Uses GENERAL GUIDELINES 10 TYPOGRAPHY USAGE 11 SUPPLEMENTAL ICONS 12 Directional Arrows Horizontal Lines

4 THE LOGO SFPC s branding has a clean, modern, and industrial style. This compliments the physical space the brand is most often seen in (the church building) and establishes a style that suits the various needs of the people who interact with it (existing members and potential visitors). This style guide will assist in applying the brand correctly and consistently, beginning with the logo. The logo consists of two parts: the icon and the wordmark. The icon can be placed above or to the left of the wordmark. The primary version of the logo contains both parts and is intended for formal applications and settings. The primary version should be used in any instance where someone may see SFPC s branding for the first time. This will introduce community members and potential newcomers to the name and icon while building association between the two.

5 CLEAR AREA CLEAR AREA The logo must always have a clear area surrounding it, free from any other element. To define this area, measure the width of the F in First and use this measurement to create the minimum boundary of clear space around the logo. Do not place any elements, decorations, or text within this space. ALTERNATE LOGO VERSIONS The wordmark and icon can be separated and applied to materials individually. The name of the church may also be abbreviated to Salem First or SFPC. These versions and individual components are intended for less formal applications and settings. The alternate versions should be used to connect materials with the SFPC brand, especially for anyone who s already encountered the full logo. Their use increases and supports brand recognition. 5

6 COLOR PALETTE C: 0, M: 85, Y: 65, K: 0 R: 240, G: 78, B: 83 C: 55, M: 0, Y: 97, K: 0 R: 127, G: 195, B:70 C: 73, M: 11, Y: 5, K: 0 R: 0, G: 173, B: 219 C: 68, M: 59, Y: 58, K: 41 R: 69, G: 72, B: 72 The brand color palette is friendly, modern and fresh. The red, green and blue colors work best as pops of color, where the grey is suitable for large areas as well as a text color. While they can all be used together successfully, displaying only one or two at a time is recommended. In the context of way finding signs and ministries, Green is used for the basement, Red is used for the main floor and youth ministry, and Blue is used for the upstairs and Kidz ministry. LOGO COLOR OPTIONS The logo may be displayed in any of the four brand colors. It may also be displayed in black or white. If the logo is going to be placed over a dark background, the white version should be used. The background should be one of the brand colors or black, unless it is a photo. Tints and shades may be used for backgrounds, but should be avoided within the logo.

versions on light backgrounds DO NOT: Stretch, Skew, Squish, or alter the

over a colored background Add drop shadows, gradients, outlines, or any other

7 LOGO USAGE DO: Use only the color versions provided Allow a clear area around the logo Use the white version on dark backgrounds and photographs Use dark versions on light backgrounds DO NOT: Stretch, Skew, Squish, or alter the proportions in any way Change the color of the logo Place a colored version over a colored background Add drop shadows, gradients, outlines, or any other effects/ornaments Place over busy, loud, low contrast, or distracting backgrounds 7

8 THE TYPEFACE Adrian Frutiger designed Avenir in 1988, after years of having an interest in sans serif typefaces. In an interview with Linotype, he said he felt an obligation to design a linear sans in the tradition of Erbar and Futura, but to also make use of the experience and stylistic developments of the twentieth century. The word Avenir means future in French and hints that the typeface owes some of its interpretation to Futura. But unlike Futura, Avenir is not purely geometric; it has vertical strokes that are thicker than the horizontals, an o that is not a perfect circle, and shortened ascenders. These nuances aid in legibility and give Avenir a harmonious and sensible appearance for both texts and headlines. In 2004 Adrian Frutiger and the type director of Linotype GmbH Akira Kobayashi reworked the Avenir and created the Avenir Next for the Platinum Collection. -Description from Linotype.com AVENIR Aa ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv (.,:;!$&@*) Avenir Light Avenir Light Oblique Avenir Book Avenir Book Oblique Avenir Roman Avenir Oblique Avenir Medium Avenir Medium Oblique Avenir Heavy Avenir Heavy Oblique Avenir Black Avenir Black Oblique RECOMMENDED SIZES PRINTED BODY TEXT Minimum: 9 pts. Suggested: pts. Large Print: 13 pts. HEADINGS Subheadings should be 2-4 points larger than body text. Main headings should be at least two points larger than subheadings, although they can be significantly larger. Headings should be upper case, as should most subheadings.

9 SUGGESTED USES AVENIR LIGHT This is the lightest weight of Avenir. It is best applied in a dark color on a white or light colored background. It can be used as body text to contrast heavier headings. Light weights can give a more modern and elegant look to type that would be clunky at heavier weights. It is not suitable for use at very small sizes or in very light colors. Avoid using Light on dark backgrounds and in materials intended for audiences with vision limitations. AVENIR BOOK & AVENIR ROMAN These weights should be the most commonly used as body text. Both are ideal for longer sections of text. Roman is slightly heavier than Book and will appear darker. When applied in a dark color on a light background, both are suitable for most audiences. AVENIR MEDIUM Medium works best as a heading or subheading. It works well when paired with a light body text since it is heavy enough to provide contrast without becoming clunky. It can be used for sections of body text, but this should only be done when Book or Roman are too light to work. Such instances include: accessible versions of materials where darker text is necessary, white or light colored body text on top of a dark or black background, and materials with small amounts of large size type, such as digital slides. AVENIR HEAVY & AVENIR BLACK These weights should only be used for headlines or where formatting calls for a bold weight. Black is the heaviest weight and can look clunky in many instances, so it should be used sparingly. Heavy pairs well as a headline with Light, Book or Roman body text. Black is most suited as a headline paired with Medium body text. Using Heavy and Avenir in the same layout should be avoided. Use of either at extremely large sizes should be avoided since they will be clunky and distracting. AVENIR OBLIQUE (ALL WEIGHTS) Oblique type should only be used when there is a good reason. It can be used to add hierarchy or call out a different type of information, but it shouldn t be used to denote headings or as regular body text. HEADING 1 BLACK HEADING 2 HEAVY HEADING 2 HEAVY. HEADING 1 HEAVY HEADING 2 MEDIUM BLUE HEADING 2 MEDIUM RED 9

10 GENERAL GUIDELINES ALIGNING TYPE There are 4 general ways to align lines of type: left aligned, right aligned, centered, and justified (where every line is the same length and spans the width of the column). For any text over 3 lines long, left alignment should be used. Centered and justified type will be difficult to read and should be avoided. In special circumstances, such as poems or verses, right alignment may be suitable, but should be used sparingly. Justified type can create large, irregular, and distracting spaces between words and letters. It should generally be avoided for use even when there are less than three lines. One or a few words may be justified if efforts are taken to adjust the spaces. The amount of space between lines of type should be consistent throughout a document. Increasing the space after a paragraph or section can aid with hierarchy in a clean and straightforward way. By using variations in text weight and style, other systems of hierarchy can be avoided. In most cases, elements such as indents and bullets are not needed. WRITING STYLE A concise writing style is optimal and will compliment the clean design standards SFPC s brand has established. Redundancy should be avoided and most writing should be as brief as possible. This allows for increased white space, which aids readability and visual appeal. Single lines of centered type should be avoided in favor of right or left alignment. Subheadings and captions should be aligned with the left or right edge of the text or image above them. HIERARCHY Differences in the way type is treated can create hierarchy, which aids with organization, readability, and visual appeal. To maintain SFPC s branding, hierarchy should be primarily achieved using typographic treatment. This allows for clean layouts and clearly structured information. Methods of establishing hierarchy include: use of different weights, use of varying type sizes, and use of color. Contrast is an important part of this: a heavy weight will contrast with a lighter one, darker grey type will contrast with lighter grey type, large type sizes will contrast with small ones. When creating hierarchy, consider using as few methods as possible to achieve contrast. Making a headline heavier and slightly larger may work, but sometimes simply increasing the weight alone or even just changing the color to an accent color will create enough contrast. Making a headline bold and oblique is often unnecessary, as is using all or most methods available at the same time. Combining too many without good reason is distracting and can be overwhelming when done throughout a document.

TYPOGRAPHY USAGE DO: Use upper case letters for headings and most types of subheadings Align text even with the left or right edge of the element above it Use variations in type size and weight to

11 TYPOGRAPHY USAGE DO: Use upper case letters for headings and most types of subheadings Align text even with the left or right edge of the element above it Use variations in type size and weight to establish hierarchy Use light colored text on dark backgrounds and dark colored text on light backgrounds For light text on a dark background, use a weight one heavier than what you would for dark text on a light background If possible, turn off hyphenation so no words are split between lines DO NOT: Use any typeface outside of the Avenir family Use colored text on colored or dark backgrounds Center or justify paragraphs Indent the first line of paragraphs Type two spaces after the end of sentences Allow more than three hyphenated sentences in a long paragraph Use drop shadows, outlines, or any other effects and type treatments Use light weights over colored or dark backgrounds Use too many typographic variations at once to establish hierarchy Font other than Avenir Colored text and background Justified type can create large, irregular, and distracting spaces between words and letters. It should generally be avoided for use even when there are less than three lines. One or a few words may be justified if efforts are taken to adjust the spaces. By using variations in text weight and style, other systems of hierarchy can be avoided. In most cases, elements such as indents and bullets are not needed. Drop Shadows Outlines Avenir Light on dark color TOO MANY TYPE TREATMENTS Hierarchy can be achieved using several methods, but combining too many without good reason is distracting and can be overwhelming when done throughout a document. 11

12 SUPPLEMENTAL ICONS DIRECTIONAL ARROWS ACCEPTABLE VARIATIONS The arrow icons should be displayed in multiples of one, three or five. The single arrow can face any direction, but the sets of three and five should only be used facing left or right. SIZE The arrows should always be the same height as the letters near them. To find the correct size, measure the height of a capital letter, not a lowercase one. The arrows should not be smaller or larger than the text they are placed in relation to. For best results, they should be paired with Avenir Roman. COLOR When choosing which color to use, reference the color of the text they are paired with. If the arrows will be placed on a dark background, they should be a light color. If they will be on a light background, they should be a darker color. 32 POINT TYPE WITH LINES AND ARROWS 32 POINTS PLACEMENT Arrows may be placed above, below, or beside text. The suggested distance a line should be placed from the top and bottom of a line of text is half the height of a capital letter within that text. If there is already a line in that location, place the arrow the same distance from the top or bottom of the line instead. If an arrow is placed beside text,

13 HORIZONTAL LINES SUGGESTED USES Horizontal lines may be used as decorative elements. Appropriate uses include: 1) underlining large headings and single lines of text, and 2) separating items in a list. Lines should be used on materials that are large format or use small amounts of text. They should not be used in the middle of paragraphs and should be used sparingly on materials that are very text heavy. They can be used in conjunction with the directional arrow icons. SIZE For roman or medium weight text, horizontal lines thickness should be 6% of the corresponding text s point size. For example, 32 point text would be paired with a 1.92 point line. Avoid using lines in instances where their size will be less than.5 points. If the lines will be placed on a dark background, avoid instances where their size will be less than 1 point. 32 POINT TYPE 32 POINT TYPE IN A LIST WITH LINES COLOR Lines should use one of the four brand colors, black, or white. If the background uses the gray brand color, the line may use either white or the red, green, or blue brand color. For example, a blue line could be used to add color to a design that has a grey background and white text. PLACEMENT When lines are being used to separate text in a list, they should be placed equal distances from the text, halfway between each line. The suggested distance a line should be placed from the top and bottom of a line of text is half the height of a capital letter within that text. When lines are being used to underline text, the distance they should be place from the bottom of the text should be the same as 56% of the height of a capital letter within that text. 13

14 Prepared for Salem First Presbyterian Church by: Mattea Godsey, Graphic Designer

Brand identity toolkit

Our visual identity Brand identity toolkit Typography Photography Lyon Display Medium ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 Akkurat Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz