Home / Typography / Oversized Serif
Oversized Serif CSS Template, Free with Live Demo
Free oversized serif website template for a boutique hotel. Huge high contrast Bodoni headlines, fine rules and generous white space. Live demo. The example is Maison Clair, a boutique hotel.
What is oversized serif?
Oversized serif design uses one giant, elegant serif headline as the hero. The thin and thick strokes of a font like Bodoni look beautiful when they are huge, and the size alone says premium.
Everything around it stays quiet: a light sans serif for the text, thin black rules, and plenty of empty space. The indented italic line adds movement without any images.
Good for
- Boutique hotels and restaurants
- Fashion and jewelry brands
- Wine, perfume and luxury goods
- Galleries and cultural events
What you get in this template
- Bodoni Moda headline up to 15rem
- Indented italic second line in gold
- Jost light for calm body text
- Thin rules to divide sections
- Room list with name, details and price
The key CSS
This is the part that makes the oversized serif look work. Copy it into your own project.
h1 {
font-family: "Bodoni Moda", serif;
font-weight: 400;
font-size: clamp(4.4rem, 16vw, 15rem);
line-height: .86;
letter-spacing: -.03em;
}
h1 em { display: block; padding-left: 12vw; color: #9c7a45; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
Which serif fonts look good very large?
High contrast fonts like Bodoni Moda, Playfair Display and DM Serif Display look best big, because their thin strokes need size to shine.
How do I make a headline scale with the screen?
Use clamp() with a vw unit, for example font-size: clamp(4.4rem, 16vw, 15rem).
Why use tight line height on big headlines?
Large type looks loose with normal spacing. A line height under 1, like .86, keeps big lines together as one shape.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
056. Image in Text
Alpenglow, a ski resort
057. Gradient Text
Sunset Sound, a festival lineup
058. Handwritten Accents
Nonna's Kitchen, a cooking school
059. Monospace
Byte Sized Weekly, a developer newsletter