# Typography, layout & brand

How to set the font, text size, page width and margins, and how the logo, tagline and favicon appear.

Techno has one font setting and one size setting. Every heading, label and price scales from them, so the type stays in proportion when you change either one.

## Font

Theme settings › Typography › "Primary font".

The default is your visitor's system monospace font. It's already on their device, so it appears instantly and costs nothing to load. It will look slightly different on Mac, Windows, Android and iOS.

Choose any font from Shopify's font library to use the same font on every device. Techno uses it for all text and loads its bold, italic and bold italic styles automatically.

> **Tip:** The terminal look depends on a monospace font. If you pick a proportional font, choose one with even, technical letterforms and check product cards and the spec table, where numbers line up in columns.

## Text size

Theme settings › Typography › "Base text size", from 13 px to 17 px. The default is 14 px.

Body text uses this size directly. Headings, prices, labels and metadata keep their proportions: at 16 px, a heading is 16/14 of its default size. Large headings also shrink smoothly on smaller screens.

On phones and tablets, text in form fields never goes below 16 px, whatever the base size. That covers every field in the theme, such as search, newsletter sign-up, the contact form, product and cart quantities, the order note, price filters, sort and the country and language selectors. It stops iPhones and iPads from zooming into a field when a shopper taps it. Desktop sizes are unchanged.

## Page width and margin

Theme settings › Layout:

| Setting | Options | Default |
| --- | --- | --- |
| "Page width" | "Narrow" (1440 px), "Medium" (1560 px), "Wide" (1760 px) | "Medium" |
| "Page margin" | 10 px to 60 px | 18 px |

"Page width" is the maximum width of page content. On wider screens the content stays centered. "Page margin" is the smallest gap between content and the edge of the screen, which matters most on phones and small laptops.

## Logo

Theme settings › Brand:

* **"Use a custom logo"**. Off by default, which shows your shop name as uppercase text in the header. Turn it on to use "Logo" instead.
* **"Logo"**. Upload a PNG or SVG with a transparent background. The logo sits on "Page background", so use a light logo on dark palettes and a dark logo on light palettes.
* **"Logo width"**, from 80 px to 320 px. Shown when "Use a custom logo" is on. The logo is also capped at 64 px tall, so a tall logo may render narrower than this setting. On screens 600 px wide and below, the logo also shrinks to fit beside the header buttons, to about 90 px wide on a 375 px wide phone.

The logo image's alt text comes from the image's alt text in Shopify's file library, or your shop name if it has none.

> **Note:** Turning on "Use a custom logo" without uploading a "Logo" keeps the shop name.

## Tagline

Theme settings › Brand › "Tagline". A short line beside the logo, such as a department or location: "Audio division" or "Berlin / Online". It's hidden on screens 900 px wide and below, where the header has less room.

## Favicon

Theme settings › Brand › "Favicon". The small icon in browser tabs and bookmarks. Upload a square image. Techno serves it at 32 × 32 px.

## Recipes

### Branded font with larger text

* Theme settings › Typography › "Primary font": a monospace font from the library, such as IBM Plex Mono or Space Mono
* Theme settings › Typography › "Base text size": 15 px

### Wide catalog layout

* Theme settings › Layout › "Page width": "Wide"
* Theme settings › Layout › "Page margin": 32 px

## See also

* [Colors & palettes](theme-styles-and-color.md): the palette
* [Header & navigation](../features/header.md): where the logo and tagline appear
* [Theme settings reference](../reference/theme-settings.md): every global setting