font-size : The Font Size Property

Summary

The font-size property sets the size of text in PDF documents. It accepts absolute length values (points, pixels, etc.) or predefined keyword values that map to specific point sizes. Font size is fundamental to text rendering and affects the visual hierarchy and readability of PDF content.

Usage

/* Absolute units */
font-size: 12pt;
font-size: 16px;
font-size: 1.2em;
font-size: 2rem;

/* Keyword values */
font-size: medium;
font-size: large;
font-size: x-small;

Values

Predefined Keywords

xx-small - 6pt - Extra extra small text
x-small - 8pt - Extra small text
small - 10pt - Small text
medium - 12pt - Medium/normal text (default)
large - 16pt - Large text
x-large - 24pt - Extra large text
xx-large - 32pt - Extra extra large text

Absolute Units

pt (points) - Standard typographic unit (1pt = 1/72 inch): 12pt, 14pt
px (pixels) - Pixel units: 16px, 20px
in (inches) - Inches: 0.5in
cm (centimeters) - Centimeters: 1cm
mm (millimeters) - Millimeters: 10mm

Relative Units

em - Relative to parent element’s font size: 1.5em, 0.8em
rem - Relative to root element’s font size: 1.2rem
% (percentage) - Percentage of parent’s font size: 120%, 80%

Expression Support

calc() - Calculate font size: calc(12pt + 2pt)
var() - Use CSS variables: var(--base-font-size)

Unsupported Values

larger - Recognized but not applied
smaller - Recognized but not applied

Notes

Points (pt) are the recommended unit for PDF generation as they map directly to print measurements
The default font size is typically 12pt (medium)
Relative units (em, rem, %) are calculated based on parent or root font sizes
Keywords provide consistent sizing across documents
Font size affects line height calculations when using relative line-height values
Very small font sizes (below 6pt) may reduce readability in printed PDFs
Expression binding is supported for dynamic font sizing

Data Binding

CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. This enables font-size to be determined dynamically based on model data, user preferences, or document requirements.

Binding Syntax

Data binding expressions are enclosed in double curly braces `` and can reference:

Model properties: ``
Nested data: ``
Conditional expressions: ``

Data Binding Examples

<!-- Dynamic font size from model -->
<p style="font-size: pt">
    Text sized according to customer preference
</p>

<!-- Conditional sizing based on importance -->
<div style="font-size: ">
    
</div>

<!-- Responsive sizing for different document sections -->
<body>
    <h1 style="font-size: pt">
        
    </h1>
    <h2 style="font-size: pt">
        
    </h2>
    <p style="font-size: pt">
        <h1 id="font-family--the-font-family-property">font-family : The Font Family Property</h1>

<p>Summary</p>

<p>The <code class="language-plaintext highlighter-rouge">font-family</code> property specifies the typeface to be used for rendering text in PDF documents. It accepts a prioritized list of font family names, allowing for fallback options when the primary font is not available. Font names can be specified with or without quotes.</p>

<h2 id="usage">Usage</h2>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Single font family */</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="nt">Arial</span><span class="o">;</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="s2">'Times New Roman'</span><span class="o">;</span>

<span class="c">/* Multiple font families with fallbacks */</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="nt">Helvetica</span><span class="o">,</span> <span class="nt">Arial</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="s2">'Georgia'</span><span class="o">,</span> <span class="s2">'Times New Roman'</span><span class="o">,</span> <span class="nt">Times</span><span class="o">,</span> <span class="nt">serif</span><span class="o">;</span>

<span class="c">/* Generic font families */</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="nt">serif</span><span class="o">;</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="nt">sans-serif</span><span class="o">;</span>
<span class="nt">font-family</span><span class="o">:</span> <span class="nt">monospace</span><span class="o">;</span>
</code></pre></div></div>

<hr />

<h2 id="values">Values</h2>

<h3 id="specific-font-family-names">Specific Font Family Names</h3>

<ul>
  <li><strong>Quoted names</strong> - Font names with spaces must be quoted: <code class="language-plaintext highlighter-rouge">'Times New Roman'</code>, <code class="language-plaintext highlighter-rouge">"Helvetica Neue"</code></li>
  <li><strong>Unquoted names</strong> - Single-word font names can be unquoted: <code class="language-plaintext highlighter-rouge">Arial</code>, <code class="language-plaintext highlighter-rouge">Georgia</code>, <code class="language-plaintext highlighter-rouge">Verdana</code></li>
  <li><strong>Multiple families</strong> - Comma-separated list providing fallback options</li>
</ul>

<h3 id="generic-font-families">Generic Font Families</h3>

<ul>
  <li><strong>serif</strong> - Fonts with serifs (e.g., Times, Georgia)</li>
  <li><strong>sans-serif</strong> - Fonts without serifs (e.g., Arial, Helvetica)</li>
  <li><strong>monospace</strong> - Fixed-width fonts (e.g., Courier, Consolas)</li>
  <li><strong>cursive</strong> - Handwriting-style fonts</li>
  <li><strong>fantasy</strong> - Decorative fonts</li>
</ul>

<h3 id="expression-support">Expression Support</h3>

<ul>
  <li><strong>calc()</strong> - Can use expressions, but not within part of a font selector</li>
  <li><strong>var()</strong> - Can use CSS variables, but not within part of a font selector</li>
</ul>

<hr />

<h2 id="notes">Notes</h2>

<ul>
  <li>Font names are case-insensitive but convention uses proper case</li>
  <li>Trailing commas are automatically removed from font names</li>
  <li>Quotes (single or double) are automatically removed when processing</li>
  <li>The first available font in the list will be used for rendering</li>
  <li>Generic font families (serif, sans-serif, monospace) provide system-dependent fallbacks</li>
  <li>For PDF generation, ensure specified fonts are available on the system</li>
  <li>Expressions must encompass the entire font-family value, not individual font names</li>
</ul>

<hr />

<h2 id="data-binding">Data Binding</h2>

<p>CSS properties support dynamic values through Scryber’s Handlebars-style data binding syntax using `` in inline styles. This enables font-family to be determined dynamically based on model data, user preferences, or document context.</p>

<h3 id="binding-syntax">Binding Syntax</h3>

<p>Data binding expressions are enclosed in double curly braces `` and can reference:</p>
<ul>
  <li>Model properties: ``</li>
  <li>Nested data: ``</li>
  <li>Conditional expressions: ``</li>
</ul>

<h3 id="data-binding-examples">Data Binding Examples</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!-- Dynamic font family from model --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: "</span><span class="nt">&gt;</span>
    Content using dynamically selected font family
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- Conditional font based on document type --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: "</span><span class="nt">&gt;</span>
    Font family selected based on document type
<span class="nt">&lt;/div&gt;</span>

<span class="c">&lt;!-- User-specific font preferences --&gt;</span>
<span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"font-family: , Arial, sans-serif"</span><span class="nt">&gt;</span>
        Text using customer's preferred font with fallbacks
    <span class="nt">&lt;/p&gt;</span>

    <span class="c">&lt;!-- Different fonts for different sections --&gt;</span>
    <span class="nt">&lt;h1</span> <span class="na">style=</span><span class="s">"font-family: "</span><span class="nt">&gt;</span>
        
    <span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: "</span><span class="nt">&gt;</span>
        
    <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<p><strong>Note:</strong> Ensure that font names from bound data match fonts available on the PDF generation system. Always include fallback fonts in the bound value or after the binding expression.</p>

<hr />

<h2 id="examples">Examples</h2>

<h3 id="example-1-single-sans-serif-font">Example 1: Single Sans-Serif Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"font-family: Arial"</span><span class="nt">&gt;</span>
    Simple paragraph using Arial font
<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="example-2-font-with-spaces">Example 2: Font with Spaces</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: 'Times New Roman'"</span><span class="nt">&gt;</span>
    Text requiring quoted font name due to spaces
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="example-3-font-fallback-chain">Example 3: Font Fallback Chain</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;p</span> <span class="na">style=</span><span class="s">"font-family: Helvetica, Arial, sans-serif"</span><span class="nt">&gt;</span>
    Text with multiple fallback options for cross-platform compatibility
<span class="nt">&lt;/p&gt;</span>
</code></pre></div></div>

<h3 id="example-4-serif-font-stack">Example 4: Serif Font Stack</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;article</span> <span class="na">style=</span><span class="s">"font-family: Georgia, 'Times New Roman', Times, serif"</span><span class="nt">&gt;</span>
    Article content with serif font preferences
<span class="nt">&lt;/article&gt;</span>
</code></pre></div></div>

<h3 id="example-5-monospace-for-code">Example 5: Monospace for Code</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;code</span> <span class="na">style=</span><span class="s">"font-family: Courier, 'Courier New', monospace"</span><span class="nt">&gt;</span>
    var x = 10;
<span class="nt">&lt;/code&gt;</span>
</code></pre></div></div>

<h3 id="example-6-generic-serif-font">Example 6: Generic Serif Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: serif"</span><span class="nt">&gt;</span>
    Text using system's default serif font
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="example-7-modern-sans-serif-stack">Example 7: Modern Sans-Serif Stack</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;body</span> <span class="na">style=</span><span class="s">"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"</span><span class="nt">&gt;</span>
    Body text with system font preferences
<span class="nt">&lt;/body&gt;</span>
</code></pre></div></div>

<h3 id="example-8-invoice-header-font">Example 8: Invoice Header Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;h1</span> <span class="na">style=</span><span class="s">"font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif"</span><span class="nt">&gt;</span>
    INVOICE
<span class="nt">&lt;/h1&gt;</span>
</code></pre></div></div>

<h3 id="example-9-table-data-font">Example 9: Table Data Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;table</span> <span class="na">style=</span><span class="s">"font-family: Verdana, Geneva, sans-serif"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Product<span class="nt">&lt;/td&gt;&lt;td&gt;</span>Price<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span>
    <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Widget<span class="nt">&lt;/td&gt;&lt;td&gt;</span>$10.00<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span>
<span class="nt">&lt;/table&gt;</span>
</code></pre></div></div>

<h3 id="example-10-report-title-font">Example 10: Report Title Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: 'Arial Black', Gadget, sans-serif"</span><span class="nt">&gt;</span>
    ANNUAL REPORT 2024
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<h3 id="example-11-footer-font">Example 11: Footer Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;footer</span> <span class="na">style=</span><span class="s">"font-family: Tahoma, Geneva, sans-serif"</span><span class="nt">&gt;</span>
    Copyright 2024. All rights reserved.
<span class="nt">&lt;/footer&gt;</span>
</code></pre></div></div>

<h3 id="example-12-emphasis-font">Example 12: Emphasis Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;strong</span> <span class="na">style=</span><span class="s">"font-family: 'Impact', Charcoal, sans-serif"</span><span class="nt">&gt;</span>
    IMPORTANT NOTICE
<span class="nt">&lt;/strong&gt;</span>
</code></pre></div></div>

<h3 id="example-13-form-label-font">Example 13: Form Label Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;label</span> <span class="na">style=</span><span class="s">"font-family: Calibri, Candara, sans-serif"</span><span class="nt">&gt;</span>
    Customer Name:
<span class="nt">&lt;/label&gt;</span>
</code></pre></div></div>

<h3 id="example-14-quote-block-font">Example 14: Quote Block Font</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;blockquote</span> <span class="na">style=</span><span class="s">"font-family: Garamond, 'Hoefler Text', serif"</span><span class="nt">&gt;</span>
    "Quality is not an act, it is a habit."
<span class="nt">&lt;/blockquote&gt;</span>
</code></pre></div></div>

<h3 id="example-15-pdf-document-body">Example 15: PDF Document Body</h3>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h2</span> <span class="na">style=</span><span class="s">"font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif"</span><span class="nt">&gt;</span>
        Section Title
    <span class="nt">&lt;/h2&gt;</span>
    <span class="nt">&lt;p&gt;</span>
        This PDF document uses modern web-safe fonts with appropriate
        fallbacks to ensure consistent rendering across different systems
        while maintaining professional appearance.
    <span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre></div></div>

<hr />

<h2 id="see-also">See Also</h2>

<ul>
  <li><a href="/reference/cssproperties/font">font</a> - Shorthand font property</li>
  <li><a href="/reference/cssproperties/font-size">font-size</a> - Font size specification</li>
  <li><a href="/reference/cssproperties/font-style">font-style</a> - Italic and oblique styles</li>
  <li><a href="/reference/cssproperties/font-weight">font-weight</a> - Font weight values</li>
  <li><a href="/reference/htmlattributes/style">style attribute</a> - Inline CSS styles</li>
</ul>

<hr />

    </p>

    <!-- Size based on document type -->
    <div style="font-size: ">
        Standard body text with type-specific sizing
    </div>
</body>

Note: Bound font-size values should include units (e.g., ‘pt’, ‘px’). Ensure the bound data provides valid CSS length values to avoid rendering issues.

Examples

Example 1: Standard Point Size

<p style="font-size: 12pt">
    Standard body text at 12 points
</p>

Example 2: Keyword Size

<div style="font-size: medium">
    Medium-sized text (12pt)
</div>

Example 3: Large Heading

<h1 style="font-size: 24pt">
    Document Title
</h1>

Example 4: Extra Large Keyword

<div style="font-size: x-large">
    Extra large heading text (24pt)
</div>

Example 5: Small Print

<span style="font-size: xx-small">
    Fine print disclaimer text (6pt)
</span>

Example 6: Pixel-Based Size

<div style="font-size: 16px">
    Text sized in pixels
</div>

Example 7: Relative Em Size

<p style="font-size: 12pt">
    Parent text at 12pt
    <span style="font-size: 1.5em">larger nested text (18pt)</span>
</p>

Example 8: Root Em Size

<body style="font-size: 12pt">
    <div style="font-size: 1.5rem">
        Text at 1.5 times root size (18pt)
    </div>
</body>

Example 9: Percentage Size

<div style="font-size: 16pt">
    <span style="font-size: 75%">Smaller text (12pt)</span>
</div>

Example 10: Invoice Header Sizes

<div style="font-size: xx-large">INVOICE</div>
<div style="font-size: large">#INV-2024-001</div>
<div style="font-size: medium">Date: January 1, 2024</div>

Example 11: Table Font Sizes

<table>
    <thead style="font-size: 10pt">
        <tr><th>Item</th><th>Price</th></tr>
    </thead>
    <tbody style="font-size: 9pt">
        <tr><td>Widget</td><td>$10.00</td></tr>
    </tbody>
</table>

Example 12: Hierarchical Sizes

<h1 style="font-size: 20pt">Main Title</h1>
<h2 style="font-size: 16pt">Subtitle</h2>
<h3 style="font-size: 14pt">Section Heading</h3>
<p style="font-size: 11pt">Body text content</p>

Example 13: Report Cover Page

<div style="font-size: 32pt; font-weight: bold">
    ANNUAL REPORT
</div>
<div style="font-size: 24pt">
    Financial Year 2024
</div>
<div style="font-size: 14pt">
    Prepared by Finance Department
</div>

Example 14: Form Labels and Values

<div>
    <label style="font-size: small">Customer Name:</label>
    <span style="font-size: medium">John Smith</span>
</div>

Example 15: Dynamic PDF Content

<div style="font-size: 12pt">
    <h2 style="font-size: 1.5em">Section Title (18pt)</h2>
    <p>
        This document demonstrates various font sizes suitable for
        PDF generation. The base size is 12pt with headings scaled
        proportionally using em units.
    </p>
    <p style="font-size: 0.9em">
        Slightly smaller supplementary text (10.8pt) for additional
        information that should be readable but less prominent.
    </p>
    <footer style="font-size: x-small">
        Page footer with small text (8pt)
    </footer>
</div>