Customizable Design Elements

Each style that you create for your Instant Articles can include unique preferences for the following typographic elements.

The new style editor now has 24 adjustable elements including title, kicker, primary heading and byline. There are up to 17 customizable settings for each element including padding size, typeface, background color, line height, margin size and borders. See below for more detailed information on each setting and element.

There is also a live preview so you can see in real time what changes you're making to your Instant Article design.

Header Art

• Header Art may be either a video, still image, gif or slideshow.
• Height of image is capped at ratio of 4:3

Article Colors

• Change the background color of your article.

Logo

• Option 1 — logo on white background, with thin line underneath. Color of line can be customized.
• Option 2 — logo on top of solid color bar. Color of bar can be customized.

Like Button

• Like button is a compulsory element, positioned to the right of your publication's logo.
• Button color can be changed using the 'accent color’ option in the Style Editor.
• Readers who have previously liked your page will not see the like button in Instant Articles.

Kicker

• Kicker is an optional element, positioned under the logo bar, and above the article title.
• If no kicker is present, the logo bar will be immediately followed by the article title.
• All customizable settings are available for the kicker.

Title

• Article title is a compulsory element. Each article must have a title.
• All customizable settings are available for the title.

Subtitle

• Subtitle is an optional element, positioned under the article title.
• If no subtitle is present, the title will be immediately followed by the byline.
• All customizable settings are available for the subtitle.

Byline

• Byline is a compulsory element. Each article must have a byline.
• The byline consists of author name and date.
• Multiple author names can be displayed.
• Byline’s typeface, color, line height, text size, alignment and margin can be customized. It’s recommended to be styled in all caps.

Body Text

• Individual words of body text can be made bold or italic.
• The body text's typeface, color, line height, text size, alignment and margin can be customized.

Inline Links

• Inline links can be styled as underlined and with a color change in text.
• Inline links inherit the same typeface as the body of text it belongs to.

Primary Heading (H1)

• Primary heading is the large header.
• All customizable settings are available for the primary heading.

Secondary heading (H2)

• Secondary heading is the small header.
• All customizable settings are available for the secondary heading.

Pull Quote

• All customizable settings are available for the pull quote.

Pull Quote Attribution

• Attribution is optional.
• All customizable settings are available for the attribution. It’s recommended to be styled in all caps.

Block Quote

• Default block quote is styled as indented, with a vertical rule to its left.
• All customizable settings are available for the block quote.

Caption Title

• Caption Title can be styled in 4 different sizes: S, M, L, XL.
• Caption Title can be positioned below, on top or above an image.
• All customizable settings are available for caption titles.

Caption Description

• Caption description can be styled in 4 different sizes: S, M, L, XL.
• Caption description can be positioned below, on top or above an image.
• All customizable settings are available for the caption descriptions.

Caption Credit

• Caption credit is optional.
• Caption credit can be positioned below, on top or above an image.
• All customizable settings are available for the caption credit. t’s recommended to be styled in all caps.

Caption Sizes

• Caption title and description can each be independently styled in 4 different sizes: S, M, L, XL.
• All customizable settings are available for the primary heading.

Footer, Credits and Copyright

• Color is defaulted to grey.
• All customizable settings are available for the footer, credits and copyright.

Best Practices for Images and Videos

Header Art

Header art may be either a video, still image, gif or slideshow. Captions for header art will appear superimposed on the image when readers tap to expand it.

If you choose to include a video in your header, it must be embedded natively using the Video element. Third-party players are not supported in the header.

Cropping

By default, individual pieces of art in Instant Articles are set to the interactive mode, with tap-to-expand and tilt-to-explore enabled. This setting may be toggled on/off for each image or video separately.

• Header art. The optimum aspect ratio for header media is 4:3. While accepted, more horizontal image ratios, such as 16:9, render in a reduced overall size, to fit the screen. More vertical ratios are not accepted in Instant Article's cover template.
• Body art. Images will automatically adjust to different devices according to the screen size, centering the image horizontally and cropping equally on the top and bottom.
• Adjusting for different screen sizes. To preview how images will crop on different devices, use this template. Crops included show screen sizes for iPhones 4, 5, 6 and 6S.

Slideshows

Slideshows can feature a caption for the entire gallery as well as captions for each individual image. The same applies for Likes, Comments and Shares.

If a slideshow is set to fullscreen, it will only support captions and Likes/Comments/Shares for individual items.

Resolution

Images and videos must be high resolution and render as such for all screen sizes and interactive features used in Instant Articles. For example, images that zoom fullscreen should be high enough resolution for a good viewing experience.