Design and Layout

A clear layout helps readers find their way through your writing. Choose typography, spacing, and visuals that support the meaning, and adapt the presentation to the format.

9.1General Design Principles

• Maintain a clean and uncluttered design.
• Use ample white space to improve readability.
• Follow a hierarchical structure with clear headings and subheadings.
• Ensure accessibility by using appropriate contrast and font choices.

9.2Page Layout

Choose a layout that suits the document and apply it consistently. Use templates when they help keep related documents uniform.

9.2.1Page Formatting

For print documents, start with readable margins, consistent header and footer spacing, and comfortable line spacing. A one-inch margin is a useful starting point. For digital content, use responsive layouts and allow text to reflow. Line spacing is a ratio, not a measurement in inches.

9.2.2Header and Footer Structure

Place the document title or current section in the header. Use the footer for page numbers, version information, or other useful context. Keep the placement, typography, and spacing consistent. Black or dark gray text usually works well; use accent color sparingly.

9.2.3The Opening Page

A clear title helps a reader know what they’ve opened. Add a subtitle, author, date, or version when those details help. A long document may benefit from a separate cover page.

Example: A Weekend in the Garden Notes and planting plans for spring

Keep the opening readable and give meaningful images useful descriptions. Add copyright details when they apply to the work.

9.3Fonts and Typography

9.3.1Choosing Fonts

Choose a font that feels at home with your writing and remains comfortable to read. A small set of type styles gives you plenty to work with. Check the actual result on the page or screen.

Use a monospaced font for code when it helps readers recognize literal text. Check a font’s license before sharing the font files.

9.3.2Font Size

Choose a size that remains readable in the finished format. Check the actual result instead of relying on a number alone.

For print, body text around 10–12 pt is a common starting point. Digital text also needs to stay readable at different screen sizes and with zoom.

Make headings distinct from body text, and keep captions and footnotes readable. Do not shrink important information merely to make it fit.

9.3.3Font Colors

Black or dark gray makes a useful base for readable text. Untitled uses surf blue (#359EF6) as an accent, with white, light gray (#F7F7F7), and dark gray (#1D1D1D). A deeper secondary blue (#0971C7) keeps text, focus indicators, and filled buttons readable. Surf blue stays in decorative accents and on dark surfaces where its contrast works.

Check contrast at the actual size. A bright accent may work as a border or fill while needing a darker shade for small link text. Keep another cue, such as an underline, for text links.

9.3.4Emphasis and Styling

Use emphasis to give the eye a useful place to pause. Too much of it makes everything compete.

• Bold can highlight a key point or identify an app label.
• Italics can identify titles, introduce a word being discussed, or add a little emphasis.
• Keep underlines for links when readers will expect them to be clickable.

A word from another language doesn’t automatically need italics. Consider whether it’s familiar in the piece and how the treatment will feel to its readers.

9.4Notices and Tooltips

A small box or note can bring a useful detail into view. Label it clearly and make sure readers can understand its purpose without relying on color or an icon.

9.4.1Information Boxes

Use an information box for context that helps without interrupting the main explanation. A light background and a clear label are usually enough.

Note: The garden entrance is beside the café.

9.4.2Tips and Advice

A tip offers a helpful possibility. Keep it short and explain the benefit rather than announcing a “best practice.”

Tip: Read your paragraph aloud to hear where the rhythm catches.

9.4.3Notices and Warnings

A notice points out something a reader needs to know. A warning explains a risk before someone takes an action. Say what could happen and what the reader can do about it.

Notice: The café closes at four on Sundays.

Warning: This action deletes the original photo. Save a copy first.

Use a clear label as well as visual styling. Keep the tone calm and the detail specific.

9.5Sidebars

Sidebars are used for supplementary content related to the main text. They are a shaded area placed on one side of the page, typically taking up the height of the page.

Use sidebars sparingly, consistently, and with purpose. They should add to the content, not distract from it.

9.6Summary Boxes

A summary box helps readers carry the main idea away. Use a short recap in your own words, and avoid introducing a new argument in the summary.

9.7Visuals and Design

9.7.1Visual Considerations

• Use visuals to support, not replace, written content.
• Avoid overly decorative images that don’t add informational value.
• Maintain a balance between text and imagery.
• Ensure all visuals are aligned consistently and appropriately spaced.

9.7.2Visual Identity

Maintain a consistent visual style. Use colors, typography, and graphics that suit the work’s purpose. Include logos only when relevant and permitted. For Untitled, keep the design minimal: white, light gray, black, and occasional blue accents.

9.7.3Formatting and Placement

• Place visuals near the relevant content for context.
• Use center alignment or left alignment based on document type.
• Ensure adequate padding or margin around visuals.

9.7.4Off-Center Placement

An off-center image can give a page a pleasing rhythm or leave space for related text. Check that the relationship is clear and that the layout still works on a smaller screen.

9.7.5Types of Visuals

Use visuals that directly support the content being presented:

• Screenshots
• Graphics
• Icons
• Diagrams
• Illustrations
• Tables and charts
• Stock photos (only when relevant and appropriate)

9.7.6Visuals and Accessibility

• Provide alternative text (alt text) for all meaningful images.
• Do not rely solely on color to convey meaning.
• Ensure diagrams and charts are labeled clearly and explained in text.
• Use high-resolution images that are scalable and accessible on multiple devices.

9.7.7Graphics and Images

Use clear, high-quality images that add meaning. Place them near the relevant text and include a caption when readers need context.

If you use a screenshot, make sure it shows the interface you are describing. Provide a useful text alternative for a meaningful image.

9.7.8Stock Photos

Use stock photos only when they improve the message. Avoid generic or staged imagery that adds no meaning. Choose images appropriate to the audience, represent people respectfully, and check usage rights.

9.7.9Screenshots

• Crop screenshots to focus on relevant content.
• Highlight or annotate key areas where appropriate.
• Avoid excessive decoration or filters.

9.7.10Annotations and Callouts

• Use simple, consistent shapes and labels (e.g., circles, arrows).
• Keep annotations brief and aligned with the visual.
• Avoid overlapping text or using overly complex visuals.

9.7.11Figures and Diagrams

• Include figure numbers and captions for reference.
• Use diagrams to explain concepts or workflows clearly.
• Ensure diagrams are visually balanced and logically organized.

9.7.12Tables and Charts

• Use charts and tables to display data concisely.
• Label axes, legends, and titles clearly.
• Avoid 3D effects or visual clutter.
• Use contrasting colors to distinguish data points while maintaining accessibility.

9.7.13Pull-Quotes

Use pull quotes sparingly to highlight a meaningful passage. Preserve the speaker’s meaning, attribute quotations accurately, and keep them accessible as text.

9.7.14Icons and Emoji

Use icons and emoji when they suit the purpose and audience. They can add tone or help with navigation, but they should not carry essential meaning on their own.

Explain an unfamiliar icon, consider how it will be read by assistive tools, and avoid decorative clutter. A serious or formal piece may call for a more restrained approach.