This repository contains a base/reset CSS file that establishes a consistent baseline for styling across browsers. It sets up a clean slate with sensible defaults, optimized for performance and accessibility.
- Modern Typography: Uses system and optimized fonts for headings and body to enhance readability.
- Responsive Fonts: Font sizes adjust to screen sizes using
clamp
. - Consistent Box Sizing: Applies
box-sizing: border-box
to all elements for consistent sizing. - Smooth Scrolling: Enables smooth scrolling behavior within the webpages.
- Accessibility Ready: Provides styles to support screen readers and reduce motion for users who prefer it.
To integrate this CSS into your project, link it in your HTML:
<link rel="stylesheet" href="path/to/base.css" />
Customize the CSS by overriding the predefined variables in your own stylesheets or modifying them directly in the base/reset file.
Here are some system font stack pairings from Modern Font Stacks. I currently have Rounded Sans as heading text, and System UI for body text, but feel free to change them! The CSS variables to change for fonts are --font-family and --heading-font-family, respectively.
- Headings: Neo-Grotesque
- Body Text: Neo-Grotesque
- This pairing uses clean, geometric forms that are modern and straightforward, ideal for corporate or business-oriented designs.
- Headings: Didone
- Body Text: Slab Serif
- Featuring high contrast in the headings with the thick and thin strokes of Didone, and balanced with the sturdy serifs of Slab Serif, this pairing suits luxury brands and elegant publications.
- Headings: Old Style
- Body Text: Old Style
- Both fonts are highly readable with a classic touch, making them perfect for traditional or academic documents where readability is paramount.
- Headings: Geometric Humanist
- Body Text: Humanist
- Geometric Humanist offers a clean and modern geometric appearance for headings, while Humanist keeps the body text approachable and clear.
- Headings: Monospace Slab Serif
- Body Text: Monospace Code
- This pairing is great for technical documents, coding environments, or any setting where a monospaced font enhances the data's structure and readability.
- Headings: Rounded Sans
- Body Text: Neo-Grotesque
- Rounded Sans’s rounded edges make headings feel more approachable, complemented by the familiar simplicity of Neo-Grotesque for body text, suitable for informal or youth-oriented designs.
- Headings: Didone
- Body Text: Antique
- Didone provides a stylish and high-impact look for headings, while Antique offers excellent readability and a slightly historic vibe for longer reads.
This CSS base/reset file was initially inspired by ideas from Josh W. Comeau's custom CSS reset; I've obviously added a lot more! For more details on his approach, visit Josh's CSS Reset. I also threw in some of Swyx's 100 Bytes of CSS to look great everywhere in the html/body tag section (commented out).
This project is released under the MIT License. See the LICENSE file for more details.