Home / Typography / Monospace
Monospace CSS Template, Free with Live Demo
Free monospace website template for a developer newsletter. One mono font on a character grid, aligned columns and a sign up form. Live demo. The example is Byte Sized Weekly, a developer newsletter.
What is monospace?
A monospace site uses one font where every letter is the same width, like an old typewriter or a code editor. It looks honest and technical, and it makes text line up in neat columns.
The layout is measured in ch units, the width of one character. The page is 74 characters wide, gaps are two characters, and the issue list columns line up because every letter takes the same space.
Good for
- Newsletters and blogs for developers
- Personal sites and online notes
- Docs and changelogs
- Minimal studio sites
What you get in this template
- IBM Plex Mono for every word on the page
- Spacing and widths set in ch units
- Blinking underscore after the headline
- Working sign up form with a confirmation
- Aligned issue list with numbers and reading time
The key CSS
This is the part that makes the monospace look work. Copy it into your own project.
body { font-family: "IBM Plex Mono", monospace; }
.wrap { max-width: 74ch; margin: 0 auto; padding: 40px 2ch; }
.issue {
display: grid;
grid-template-columns: 8ch 1fr 6ch;
gap: 2ch;
}
h1::after { content: "_"; animation: b 1s steps(1) infinite; }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
What is the ch unit in CSS?
One ch is the width of the zero character in the current font. In a monospace font every character has that width, so ch is perfect for text based layouts.
Is a monospace font good for reading?
For short text, yes. Modern mono fonts like IBM Plex Mono and JetBrains Mono are designed to be comfortable. Keep lines under about 75 characters.
Can I connect the form to a newsletter service?
Yes. Point the form action to your provider, such as Buttondown, Mailchimp or ConvertKit.
More Typography designs
051. Kinetic Type
Shift, a dance studio
052. Variable Fonts
Flexa, a type foundry specimen page
053. Oversized Serif
Maison Clair, a boutique hotel
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