v1.3.1
  1. Foundations
  2. How-tos
  3. Patterns
    1. Autocomplete
    2. Button
    3. Callout
    4. Chat
    5. Description List
    6. Fallback Image
    7. Feedback
    8. Focus Indicator
    9. Footer
    10. Header
    11. Hero
    12. IIIF Image
    13. Link
    14. Page Title
    15. Results per Page

Page Title

Create the page title using middle dot separators to create a clear breadcrumb-like hierarchy.

Format browser tab titles consistently across applications.

When to use

Use this pattern for every page's <title> element across Penn Libraries web applications.

How to use

Separate title segments with · (space, middle dot, space) to create a scannable hierarchy from specific to general.

The format is:

Page name · Application name · Penn Libraries

For example:

  • My Account · Find · Penn Libraries
  • Collections A to Z · Digital Collections · Penn Libraries
  • About · Colenda Digital Repository · Penn Libraries

Omit segments that would be redundant. On a home page, the application name alone may suffice:

Find · Penn Libraries

Why middle dot?

The middle dot (·, U+00B7) is compact and visually distinct from content characters like hyphens, pipes, or dashes. It provides clear separation without the visual weight of other delimiters, making titles easy to scan in browser tabs.

Design System

About Writing for People Build Digital Spaces v1.3.1