Logo

Where to set it

Customize → Header section → Logo. You can also use plain text as the logo via Theme settings → Logo → logo_text.

Recommended sizes

• File width — upload at minimum 1000px wide. Vesperia downscales to fit, never upscales.
• File format — PNG with transparent background is ideal. SVG works too. JPG only if you have a colored background to match.
• Logo width (desktop) — typically 120-180px. The default is 140.
• Logo width (mobile) — typically 90-120px. Default 100.

Retina handling

Vesperia automatically generates 1× / 2× / 3× / 4× versions for the device pixel density. You don’t need to provide retina assets manually — upload the largest file you have.

Invert logo

The Invert logo image checkbox flips your logo via a CSS filter: invert(1). Use it ONLY if your logo is a black monochrome PNG that needs to render white on a dark header. For colored logos (rose-gold, brand color, etc.) keep this OFF.

Typography

Heading and body font

Theme settings → Typography. You can pick any font from the Shopify font library (Google Fonts plus the bundled system fonts).

• Heading font — used on h1-h6 and the logo text fallback.
• Heading scale — percentage to scale headings up or down (50-150%).
• Heading transform — None / UPPERCASE / lowercase / Capitalize.
• Body font — paragraphs and UI text.
• Body scale — ditto for body text.

What works well

• Editorial brands — a serif heading (Cormorant Garamond, Playfair Display) + a sans body (Inter, Lato).
• Modern minimal — sans for both (Inter for headings, Inter for body).
• Luxury — large serif at 130% heading scale with letter-spacing tightened naturally.

Vesperia’s presets are calibrated combinations — they’re an excellent starting point even if you customize from there.