Home / Bold and Raw / Bold Type Hero
Bold Type Hero CSS Template, Free with Live Demo
Free bold typography hero template where a giant headline fills the screen. Outline text, a highlighted word and tight spacing. Live demo and download. The example is Pace, a running club.
What is bold type hero?
A bold type hero lets the words be the picture. Instead of a photo, a huge headline fills the first screen, so the message lands before anything else.
The size comes from clamp() with a viewport unit, so the text scales with the screen. Mixing solid, outlined and highlighted lines keeps a three word headline interesting.
Good for
- Sports clubs and fitness brands
- Event and festival pages
- Agencies and personal portfolios
- Any page with a short, strong message
What you get in this template
- Headline that scales with the screen using clamp()
- Outline text made with text-stroke
- Highlighted last line in lime
- Three column info section below
- Weekly run schedule list
The key CSS
This is the part that makes the bold type hero look work. Copy it into your own project.
.big {
font-family: Anton, Impact, sans-serif;
text-transform: uppercase;
font-size: clamp(4.5rem, 19vw, 17rem);
line-height: .84;
}
.big .o { -webkit-text-stroke: 3px #101820; color: transparent; }
.big .l { background: #d7ff3a; }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
How do you make text fill the screen in CSS?
Use font-size with clamp() and a vw unit, for example clamp(4.5rem, 19vw, 17rem). The text grows with the screen width but never gets too small or too large.
How do I make outline text?
Set color: transparent and add -webkit-text-stroke: 3px with your color. It works in all modern browsers.
Is a giant headline bad for SEO?
No. Search engines read the words, not the size. Keep the real h1 short and put more detail in the text below it.
More Bold and Raw designs
011. Neo Brutalism
Stackd, an invoicing tool for freelancers
012. Raw Brutalist
KXLR, a community radio station
013. Swiss Grid
Grid Days, a design conference in Zurich
015. Anti Design
Static Bloom, an indie record label
016. Y2K Revival
Starlite, a mixtape playlist site
017. Memphis
Confetti Co., a party planner
018. Retro Pixel
Frog Knight, an indie game launch page
019. Newspaper Editorial
The Harbor Gazette, a local news site