Article appearance

Every article has a header: its cover, its title, its caption, its author and its reactions, and its series when it's part of one. By default it is the one your articles have always had, but you can give a single article a different one. Think of it as art direction, story by story: a photo essay can open on its cover over half the screen, while a short note keeps the classic header.

Open the Appearance window

In the article's editor, click the palette icon in the bar at the top (hover it and "Appearance" appears). A window opens with how the page looks. There is no save button: each choice is saved as soon as you make it, and a small "Saving…" then "Saved" appears beside "Header" so you know it went through. If a save fails, it says "Not saved, try again".

The window stays open while you make your choices. Close it when you're done: a message says "Appearance saved", and "Readers will see it once you publish the article's changes."

Header

"Header" shows each type drawn big, with this article's own cover and title, so you see what readers will get before you choose. Click one to pick it.

• Classic is the page as it always was: the cover above, the title centred under it, then the author and reactions.

• Magazine puts the cover over half the screen and everything else beside it, centred: the rubric, the title, the caption, the date, the author and the reactions. The details always sit beside the cover, never over it, so the text stays readable whatever the photo.

• Full cover puts the cover over the whole screen, with the rubric, the title, the series line, the caption and the date laid on it at its foot. The author and the reactions sit under it.

On a phone, the Magazine header puts the cover on top and the details under it.

Every header shows the article's series under its title when it belongs to one: "Part 3 of 6 in Climate", the series' name linking to the series' page ("Part 3 in Climate" for an open-ended series). See Series.

Cover

When you choose Magazine, a second choice appears, "Cover": "Cover on the left" or "Cover on the right". The Magazine header starts with the cover on the left. Classic has no options.

Magazine and Full cover rely on the article's cover, so give the article one. Without a cover, the half of the screen meant for it stays empty with Magazine.

Text and text backdrop

When you choose Full cover, two choices appear, since the title sits on your photo:

• Text: "Automatic" (the default) picks light or dark text from the cover's colours. "Light" and "Dark" force it.
• Text backdrop: what sits behind the text so it stays readable. "Gradient" (the default) darkens or lightens the cover from the bottom; "Soft halo" puts a soft glow behind the text. Pick both, or neither.

Fonts

Under "Fonts" in the same window you choose the fonts of this article's page: a pairing, or two fonts picked one by one. Out of the box an article follows your publication's fonts ("Same as your publication").

• Pairings are a heading font and a reading font that go well together, each shown in its own fonts so you see the result: Peakub, Editorial, Literary, Newsroom, Classic, Bookish, Modern, Grotesque, Technical and Humanist.
• Pick each lets you choose "Headings" and "Text" separately from the same list of fonts.

The fonts are hosted by Peakub itself, so your readers' browsers don't ask another company's server for them. Menus, buttons and reactions keep Peakub's own font.

To set the fonts of your whole publication, open the Website tab's settings in Studio and choose the Fonts tab. Pick a pairing or two fonts and click Save: unlike an article's appearance, readers see it at once. An article's own fonts, when it has any, win over the publication's.

Use it for new articles

Near the bottom of the window, "New articles" has a "Use for new articles" button. Click it and your next articles start with this appearance (the header and its options, the fonts, the publication header's behaviour), so you don't set it again each time. The button then reads "Used for new articles". It applies to articles you create from then on, not to the ones you have already.

Publication header

"Publication header" decides what your site's own header does while the article's header is on screen. You pick one of three:

• Small (the default): a small version of it.
• Shown: your publication's header, as on every page.
• Over the page: transparent, over the article's header.

With a Magazine or Full cover header, Small and Over the page take your publication's header off the page's top: the article's header starts at the very top of the screen and fills it. Pins you have above the page float under the small header's pill (or inside the header once it's back) instead of pushing the article down. With the Classic header, your publication's header stays in its place above the article, and Small or Over the page only applies as readers scroll past the article's header. Readers always keep a way back to your publication. This only applies while the article's header is on screen: once readers scroll into the article, your header goes back to normal.

An article that was never given an appearance keeps its page as it was, with your header shown.

When readers see it

Appearance is saved into the article's draft, like its text. Readers see the change after you click "Publish changes", the same as an edit to the article itself. Until then, they keep seeing the header they had.

Appearance per variant

If the article has variants, each one has its own appearance: open the Appearance window while editing a variant and it changes that variant only.

What it doesn't cover

• Chapters don't have an Appearance button.
• Book reviews keep their own layout, with their book beside them, so the Magazine header isn't available there.
• Other pages: zines, coverages and pages have no Appearance window yet. It covers an article's header and fonts only.
• The editor and emails: the editor doesn't show an article's fonts while you write, and the newsletter email keeps its own fonts.
• Emails: the newsletter email keeps its own layout. Appearance is for the article's page on your site.