Typography

Press gives you precise control over text rendering including fonts, sizes, colors, spacing, alignment, and inline formatting. This guide covers every typographic attribute and shows how to combine them for professional results.

Fonts

Setting the Font

Use the font attribute to choose a typeface. There are three ways to specify a font:

1. Google Fonts by name -- Press can load any Google Font directly.
2. Custom fonts registered in <assets>.
3. Font stacks -- a semicolon-separated list of fonts, where subsequent fonts serve as fallbacks for unsupported glyphs.

<!-- Google Font by name -->
<p font="Roboto">This text uses Google's Roboto font.</p>

<!-- Font stack with fallback for Chinese characters -->
<p font="Inter; Noto Sans SC">Hello, 你好</p>

In the fallback example, Inter renders the Latin characters and Noto Sans SC renders the Chinese glyphs that Inter does not support.

Registering Custom Fonts

For fonts not available on Google Fonts, register them in <assets>:

<assets>
  <fonts>
    <BrandFont>
      <regular>https://fonts.example.com/brand-regular.woff2</regular>
      <bold>https://fonts.example.com/brand-bold.woff2</bold>
      <italic>https://fonts.example.com/brand-italic.woff2</italic>
      <bold-italic>https://fonts.example.com/brand-bold-italic.woff2</bold-italic>
    </BrandFont>
  </fonts>
</assets>

Then reference the defined font anywhere:

<p font="BrandFont">Branded text using the custom font.</p>

The regular variant is required. All other variants (bold, italic, bold-italic) are optional.

Font Size

Set the text size using font-size in points:

<p font-size="12pt">Standard body text.</p>
<h1 font-size="28pt">Large heading.</h1>
<p font-size="8pt">Fine print and disclaimers.</p>

Auto-Scaling with font-size="fit"

The special value fit causes text to automatically scale to fill the available space in its container. This is ideal for titles, banners, and labels where you want text to be as large as possible.

<frame width="100%" height="80pt">
  <h1 font-size="fit">Quarterly Results</h1>
</frame>

Fit will produce a minimized font size. This can be much larger or smaller than expected. You can constrain the scaling range:

<frame width="100%" height="60pt">
  <h1 font-size="fit" font-size-min="14pt" font-size-max="72pt">
    Annual Report
  </h1>
</frame>

• font-size-min -- the smallest the text will shrink to. If the text cannot fit at this size, an error will be thrown or the text will be truncated depending on "wrap" and "ellipses" properties.
• font-size-max -- the largest the text will grow to, even if more space is available.

Font Style

The font-style attribute selects the variant of the current font:

<p font-style="regular">Normal text (the default).</p>
<p font-style="bold">Bold text.</p>
<p font-style="italic">Italic text.</p>
<p font-style="bold-italic">Bold and italic combined.</p>

Font Color

Set text color with font-color. All CSS color formats are supported:

<!-- Hex colors -->
<p font-color="#333333">Dark grey text.</p>
<p font-color="#e74c3c">Red text.</p>

<!-- RGB -->
<p font-color="rgb(41, 128, 185)">Blue text.</p>

<!-- RGBA (with transparency) -->
<p font-color="rgba(0, 0, 0, 0.5)">Semi-transparent black text.</p>

<!-- Named colors -->
<p font-color="navy">Navy text.</p>

Font color is inherited by child elements. Set it on a frame to apply to all text within, unless that child also sets a specific font-color:

<frame font-color="#2c3e50">
  <h2>All text in this frame is dark blue-grey.</h2>
  <p>Including this paragraph.</p>
  <p font-color="green">Green text</p>
</frame>

Line Height

Control the vertical spacing between lines of text. You can specify a multiplier or an absolute value:

<!-- Multiplier (1.5 times the font size) -->
<p line-height="1.5">This paragraph has generous line spacing,
  making it easier to read in long-form documents.</p>

<!-- Absolute value in points -->
<p font-size="12pt" line-height="18pt">
  Exactly 18pt between baselines.
</p>

Text Alignment

The text-align attribute controls horizontal alignment of inline content (text) within a block:

<p text-align="left">Left-aligned (the default).</p>
<p text-align="right">Right-aligned text.</p>
<p text-align="center">Centred text.</p>
<p text-align="justified">Justified text stretches to fill the full
  width of the container, adjusting word spacing so both edges
  are flush.</p>

Note: text-align aligns inline content within a block. To position the block itself within its parent, use h-align on the parent frame.

Text Shadow

Add a shadow behind text for visual depth or emphasis.

Simple Shadow

<p text-shadow="0.5pt black">Text with a subtle shadow.</p>

This creates a shadow offset by 0.5pt down and to the right in black.

Separate X and Y Offsets

<p text-shadow="1pt 2pt #00000044">
  Shadow offset 1pt right and 2pt down, semi-transparent.
</p>

Individual Attributes

For fine-grained control, set shadow properties individually:

<p text-shadow-x="0.5pt"
   text-shadow-y="1pt"
   text-shadow-color="rgba(0, 0, 0, 0.3)">
  Precisely controlled shadow.
</p>

The text-shadow-offset shorthand sets both text-shadow-x and text-shadow-y to the same value.

Preserving Whitespace

By default, Press collapses multiple spaces and ignores line breaks in your source, just like HTML. Set preserve-whitespace="true" to keep all whitespace exactly as written:

<frame preserve-whitespace="true" font="Courier New"
>  Name:        Jane Doe
  Department:  Engineering
  Employee ID: 40291</frame>

This is useful for preformatted text, ASCII art, or code listings where spacing is meaningful.

Wrapping and Overflow

Preventing Wrapping

By default, text wraps to the next line when it reaches the edge of its container. Use wrap="none" to force text onto a single line and truncate text which does not fit:

<p wrap="none" width="200pt">
  This very long text will be truncated to a single line.
</p>

Ellipsis Truncation

To truncate text to the bounds of a frame when attempting to fit a font size, use overflow="ellipsis":

<frame width="150pt" height="24pt" overflow="ellipsis" font-size="fit" font-size-min="9pt" font-size-max="10pt">
  Northbrook Consulting Group - Annual Performance Review Part Two
</frame>

If the text cannot fit even at font-size-min, it will be truncated with "..." at the end.

Inline Elements

Press provides inline elements for formatting text within a paragraph or frame. These elements can be nested within text content.

<span>

A generic inline container for applying styles to a portion of text:

<p>
  Please submit your report by
  <span font-color="red" font-style="bold">15 March 2026</span>.
</p>

<b> -- Bold

<p>The total amount due is <b>$4,250.00</b>.</p>

<i> -- Italic

<p>As noted in <i>Principles of Modern Architecture</i>, the design
  prioritises natural light.</p>

<u> -- Underline

<p>Please <u>read carefully</u> before signing.</p>

<s> -- Strikethrough

<p>Original price: <s>$199.00</s> Now: $149.00</p>

<sup> -- Superscript

<p>Water (H<sub>2</sub>O) has a boiling point of 100<sup>o</sup>C.</p>

<sub> -- Subscript

<p>The chemical formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>.</p>

<code> -- Inline Code

<p>Use the <code>format="A4"</code> attribute for standard page sizes.</p>

Combining Inline Elements

Inline elements can be nested freely:

<p>
  This is <b>bold and <i>also italic</i></b> text,
  with a <span font-color="#e74c3c">coloured</span> word.
</p>

Example: Styled Letterhead

This example creates a professional letterhead with careful typography:

<press>
  <document format="A4" page-margin="0cm">
    <page>
      <!-- Letterhead header -->
      <frame direction="row" width="100%" padding="1.5cm"
             padding-bottom="1cm" background-color="#1b2a4a">
        <frame width="fill">
          <p font-size="20pt" font-color="white" font-style="bold">
            Hartwell & Associates
          </p>
          <p font-size="9pt" font-color="rgba(255,255,255,0.7)"
             letter-spacing="1pt">
            CHARTERED ACCOUNTANTS
          </p>
        </frame>
        <frame v-align="center">
          <p font-size="8pt" font-color="rgba(255,255,255,0.7)"
             text-align="right" line-height="1.6">
            17 Riverside Crescent, Ashford
            Tel: (01234) 567890
            accounts@hartwellassoc.example
          </p>
        </frame>
      </frame>

      <!-- Letter body -->
      <frame padding="1.5cm" padding-top="1cm">
        <p font-size="10pt" font-color="#666666">12 February 2026</p>
        <frame height="18pt" />
        <p font-size="10pt" line-height="1.5">
          Dear Mr Whitfield,
        </p>
        <frame height="10pt" />
        <p font-size="10pt" line-height="1.5" text-align="justified">
          Thank you for your enquiry regarding our audit services. We are
          pleased to confirm that we can accommodate your request for a
          comprehensive financial review for the fiscal year ending
          <b>31 March 2026</b>.
        </p>
        <frame height="10pt" />
        <p font-size="10pt" line-height="1.5" text-align="justified">
          Our standard engagement terms are enclosed. Please do not
          hesitate to contact us if you have any questions.
        </p>
        <frame height="18pt" />
        <p font-size="10pt">Yours sincerely,</p>
        <frame height="24pt" />
        <p font-size="10pt" font-style="bold">Eleanor Hartwell</p>
        <p font-size="9pt" font-color="#666666">Managing Partner</p>
      </frame>
    </page>
  </document>
</press>

Example: Title Page with Fit Text

This example uses font-size="fit" to create a dramatic title page:

<press>
  <document>
    <page width="21cm" height="29.7cm" page-margin="3cm">
      <frame width="100%" height="40%">
        <h1 font-size="fit" font-color="#2c3e50">
          The Future of Renewable Energy
        </h1>
      </frame>
      <frame height="2cm" />
      <frame width="100%" height="15%">
        <p font-size="fit" font-size-max="24pt" font-color="#7f8c8d">
          A Comprehensive Market Analysis
        </p>
      </frame>
      <frame v-align="bottom" width="100%" height="fill">
        <p font-size="14pt" font-color="#95a5a6">
          Prepared by the Research Division
        </p>
        <p font-size="12pt" font-color="#bdc3c7">
          Clearwater Energy Consultants
        </p>
        <p font-size="11pt" font-color="#bdc3c7">
          February 2026
        </p>
      </frame>
    </page>
  </document>
</press>

The title automatically scales to fill 40% of the page height. The subtitle scales too, but is capped at 24pt by font-size-max to maintain visual hierarchy.