GENERAL LOGO GUIDELINES
If you provide assets according to these guidelines, your logos on Tempest will be high quality and crisp across all devices and browser sizes. For logo assets, we prefer to use an SVG if possible. SVGs will provide the highest quality logos with the best page performance. If you are not able to create an SVG, use a PNG. For smaller asset sizes, ensure that any text is legible, or consider reformatting the small size logo to remove small text.
If you are unable to create the assets yourself, we may be able to help you. In those cases, for best results, we require a vector version of your logo or your native file (AI or PSD). The logo should be on a transparent background.
The logo specs depend on which header size and alignment type you use. If you use a centered logo, the logo should be positioned in the center on a transparent background. If you use a left aligned logo, note that the image is offset to the left by 20px for the Standard size and 30px for the Large size to allow for part of the logo to extend past the left margin. If you wish for your logo to line up with the left margin, leave this space as a transparent buffer in the image.
SVG is preferred where listed below, but PNG can also be used if an SVG is not available or feasible to create.
Your desktop logo will be cut for retina quality at the following spec sizes:
- Site Logo Large: 1400 x 360, 30px left margin for left-aligned logos | SVG
- Site Logo Standard: 916 x 240, 20px left margin for left-aligned logos | SVG
One asset is used for both the mobile logo and sticky navigation. This asset should be 100px tall. The width can vary, depending on the dimensions needed to fit your logo, but should not exceed 500px. Do not include any whitespace on the left or right side of the image.
- Mobile/Sticky Navigation Logo: Width up to 500px; Height 100px; No left/right whitespace | SVG
For Facebook Instant Articles, a separate logo asset is needed. This asset should be a PNG with a transparent background. The minimum dimensions are listed below.
- Facebook Instant Article Logo: 690 x 132 | PNG
AMP pages have specific logo requirements listed below
- The file must be a raster file, such as, .jpg, .png. or .gif. Don't use vector files such as .svg or .eps
- logo must be a rectangle not a square
- the logo should fit in a 60x600px rectangle, and either be exactly 60px high (preferred), or exactly 600px wide. For example, 45x450px would not be acceptable, even though it fits within the 60x600px rectangle.
- Use full wordmark or full icon, not an icon
- the text in word-based logos should be at most 48px tall and centered vertically within the 60px image height. add additional space to pad the height to 60px.
- Logos with a solid background should include 6px minimum padding around the graphic.
SECTION & COMPONENT HEADERS
A section or component header can display a title image, a background image, or both, in one of four sizes: Large, Medium, Small or Extra Small.
As a best practice, background images should be a JPG, and header images should be an SVG, or a PNG if an SVG is not available.
Note that to ensure no cropping on smaller mobile devices, the assets have a safe zone which is 280px wide, or 560px for retina. Background images should cover the full size of the image specs. Title images can up to the maximum size, but may be smaller, to fit the actual size of the title asset.
Component Background Image specs.
- Xtra Small: 1100 x 68 (2200 x 136 retina); safe zone: 560 x 136 | JPG.
- Small: 1100 x 125 (2200 x 250 retina); safe zone: 560 x 250 | JPG
- Medium: 1100 x 250 (2200 x 500 retina); safe zone: 560 x 500 | JPG
- Large: 1100 x 500 (2200 x 1000 retina); safe zone: 560 x 1000 | JPG
Component Title Image specs:
- Xtra Small: 1100 x 68 (2200 x 136 retina); safe zone: 560 x 136 | SVG **For best mobile crop, keep the text to 526x108 within a container of 710x108**
- Small: 1100 x 125 (2200 x 250 retina); safe zone: 560 x 250 | SVG
- Medium: 1100 x 250 (2200 x 500 retina); safe zone: 560 x 500 | SVG
- Large: 1100 x 500 (2200 x 1000 retina); safe zone: 560 x 1000 | SVG
Section Header Specs
- Xtra Small: 1400 x 68 (2200 x 136 retina); safe zone: 560 x 136 | SVG
- Small: 1400 x 125 (2200 x 250 retina); safe zone: 560 x 250 | SVG
- Medium: 1400 x 250 (2200 x 500 retina); safe zone: 560 x 500 | SVG
- Large: 1400 x 500 (2200 x 1000 retina); safe zone: 560 x 1000 | SVG
COVERLINES / PROMO UNITS
Coverlines come in squares, rectangles and circles. They can also be large and small. Vertical or horizontal. They can have text underneath them or none at all. If you would like to have text underneath your coverlines you will need to crop your images for circle or square.
If you would like just an image you can use landscape or portrait.
- Landscape: 400 x 150 | JPG
- Portrait: 220 x 300 | JPG
- Square/Circle: 150 x 150 | JPG
A favicon is the icon that appears in the browser tab when someone is on your site. The file format must be in .ico. You can use the favicon generator found here to cut all of the sizes you will need in one swoop.
BRAND ENGAGEMENT BACKGROUND
Best Practices: We suggest using a texture or solid color for a background design. Images are possible but render very differently as your site scales from desktop, to tablet, to mobile. The style guide that you will receive will include the brand engagement.
- Texture: 1600 x 900 | JPG
- Small Imagery: 2800 x 250 | JPG
- Medium Imagery: 2800 x 500 | JPG
By default, Tempest uses Rich Text for your Brand engagement headlines. If you would like more custom text, you will need to cut a separate asset for this. This asset is cut as an SVG in order for it to be responsive across all devices. If you can not provide an SVG, a high quality PNG will be accepted.
- Small Header: 2800 x 250 | SVG
- Medium Header: 2800 x 500 | SVG
IMAGE IN POSTS
Images in posts are never cropped, so there’s no aspect ratio. Images in posts are scaled to fit the available horizontal space:
- Inline images:
- Size A: 320px wide (640px retina)
- Size B: 620px wide (1240px retina)
- Size C: 700px wide (400px retina) (Standard experience)
- Size C: 780px wide (1560px retina) (Premium experience)
- Breakout images:
- Size A: 320px wide (640px retina)
- Size B: 620px wide (1240px retina)
- Size C: 860px wide (1720px retina) (Standard experience)
- Size C: 1100px wide (2200px retina) (Premium experience)
- Wrap-Left and Wrap-Right images:
- Size A and up: 320px wide (640px retina)
The content well reserved for text and non-breakout images is 700px
FEATURED IMAGES & FULL BLEED IMAGE HEROS
Because the widths of Featured Images & Full-Bleed Heroes are based on the screen size, the aspect ratios vary to create an appropriate experience for different screen sizes. The widest image size is 2560 x 962, but the aspect ratio is increasingly square as screen size decreases.
- Below 675px width: Aspect Ratio 1:1 (Square)
- 675px to 960px width: Aspect Ratio 16:9 (Widescreen)
- 961px to 1280px width: Aspect Ratio 215:100
- 1281px to 1920px width: Aspect Ratio 233:100
- 1921px width and greater: Aspect Ratio 266:100 (Max width 2560px)
STANDARD IMAGE HEROS
- Standard: 1100 x 615 | JPG
In order to provide high-quality resolution images on retina devices, the recommended image size 1000px width and 160px height. This image will be shown with 500 x 80 dimensions. It should include the brand logo and the site's notice language of choice (e.g. "Presented by," "In partnership with," "Brought to you by"). The badge can be a click-out to the advertiser's site.
All hub component card images are scaled and cropped to match the size of their container. There are 2 common aspect ratios we support (bolded), and a few other less common aspect ratios.
- Landscape 1.78:1 (57%): this is our most common aspect ratio by far, and is used just about everywhere you see a landscape-oriented image. It is almost the same (but not quite) as the standard video aspect ratio of 16:9 (56.25%).
- Portrait 4:5 (125%): this is our second most common aspect ratio, and is used just about everywhere you see a portrait-oriented image. This results in an image that’s one-quarter taller than it is wide.
- Landscape 2:1 (50%): Standard hero hubs use a slightly shorter version of our normal landscape images.
- Portrait 2:3 (150%): List hubs with portrait images have taller images than other portraits used throughout the site.
- Square 1:1 (100%): Used for square images and landscape images in standard cards on mobile devices.
The image shown on product pages has the following specs
Standard: 380 x 300 | JPG
PREMIUM REGISTRATION PAGE
We are delighted to offer you an opportunity to utilize the Tempest Premium (ad free subscription offering). Premium is an optimized reading experience with an ad-free layout. It’s faster, ad tracker free, and provides readers with a way to directly support the publishers they love.
Below please find information regarding the offering, followed by a checklist of what we will need to collect and/or create in order to get you up and running. To highlight, this should INCREASE your yield revenue without diminishing your direct sales, so it’s a path to create another revenue stream, while you offer an option to your readers who find online advertising disruptive. You can see what this all looks like on Climbing.com, Airows.com, and Theultralinx.com to name just a few.
To create a Brand Engagement component on your site to promote Premium, see the Brand Engagement section above.
For your Premium registration page, please provide an image following the best practices outlined below. The Hero image specs are:
- Premium Hero Image: 1440 x 520 | PNG
In order to ensure that your Premium Hero Image is well formatted across all devices, note the guidelines in the diagram below. On various screen sizes, different parts of the image will be cut off. Also note that the image should be formatted to allow for text to display in the blue region shown below. The following guidelines will help you choose an image which works well:
- Abstract/Nature images, or scenes without a single foreground subject can work very well:
- Images with a subject should usually keep to the center or right side, without essential parts (such as a face) getting near the top or bottom:
- Images can use a darkening overlay (entire image or bottom left gradient) to improve contrast with the text overlay. If using a gradient overlay, do not apply to the original asset. This will be applied with CSS to ensure an appropriate gradient on all image crops.