Please provide
A brand guide, if you have one. A brand guide is a PDF document that details a company’s visual identity, along with rules and guidelines for any public-facing communication. Brand guides set forth rules for official logo usage, font type and color, typography, and tone;
Logos. PNGs with transparent backgrounds are required. If you have any vector files (SVG, EPS, or AI, with SVG being the preference) please include those as well. When in doubt, send us everything you have!
Horizontal and square versions of your logo are good to have. On our current header, we feature a horizontal logo on the top left corner (larger width than height). The preferred width/height ratio for this logo is 2.5:1, but it could go up to 4:1.
Website colors. Please provide your website primary and accent colors in hexa format.
Primary Brand Color: the main color that represents your brand and is typically used for your website, logo, and other important assets. This color is used the most.
Accent Color: this is used sparingly to add visual interest and highlight specific elements within your brand collateral
A favicon (or “tab icon”, visible next to tab titles). Your favicon must be a multiple of 48px square, for example: 48x48px, 96x96px, 144x144px and so on. PNGs are preferred.
Fonts. Essential publishers can select their font pairing right at Indie Website backend. Grow and Scale publishers can share Google Fonts that will be used on your website. We usually use a sans serif font for headings, and a serif font for body copy.
A set of images that could be used as website backgrounds. Please provide images that are large and of high quality: 1920x1080px is ideal (the preferred ratio is 16:9). The images should be at least 72 ppi. We request a minimum of 6 images, but the more the better!
Note: this is in addition to team photos, author photos, etc. that might be featured at smaller sizes on the landing page/website, and that don’t need to be that large.
How to choose fonts?
Fonts will add personality and credibility to your website, but the most important thing to look for in a font family is legibility. Check if the font has:
It has multi-language support: if the font has only basic Latin letters, auto-translate can shift your layout into some other font for the missing characters, giving it a “ransom note effect” where individual, accented letters change and stick out;
It has at least the basic weights and styles: check if the font has, at least, a regular, italic, and bold (and bold italic) weights;
Choose clear and recognizable letterforms: Text is most legible when the eye can easily distinguish between letters. Some typefaces are designed to simply be slick and rhythmic—pleasing to the eye. Legible typefaces have far more nuance among the letters;
Open Forms: Letters that are airy and open are less likely to blur into closed shapes. This should be considered specially for small or long form texts;
Avoid:
Overusing italic: Italics can be used for giving certain emphasis on a particular word or phrase and it should be used sparingly. Don’t overuse italics as they will make your blog posts look cluttered, so only use them when you really need to stress something out
Script fonts: Script fonts are never suitable for long-readings. The incorrect use makes the design look inappropriate for your brand strategy. To make no mistake, select a more neutral font.
Thin fonts: A light and thin font is very unreadable and does not imply that the information is important. Regular, Semi-bold and Bold are better for readability & accessibility.
Condensed fonts: Condensed fonts can be very hard to read, and its variations of most fonts should be used sparingly or avoided in projects with blocks of text. Plus: on a large block of text, condensed fonts imprint the feeling of riding the train at rush hour. Not a good feeling to match your brand.
Suggested font pairings
If you don't already have designated Google fonts for your brand, here are 3 font pairings you can choose from that are legible, work well together, and will be easy on the eyes when reading long articles.
Source Sans (Headings) and Merriweather (Body copy)
Lato Black (Headings) and Lora (Body copy)
Adobe fonts
A common alternative is Adobe Fonts, but it's not recommended. Adobe Fonts require an Adobe subscription and sometimes don't have enough glyphs or styles. This is only supported for Grow and Scale publishers.
If a publisher choose an Adobe Font, we will need to:
Check if the font has enough glyphs and styles;
Ask the publisher (or the holder of the Adobe subscription) to provide an embed script. Here's a step by step guide.
Ask the publisher for the web project ID. It appears on the Web Projects tab (https://fonts.adobe.com/my_fonts?browse_mode=all#web_projects-section)
