TypeSafe CSS

Headings, Paragraphs, Blockquotes, List Items, Tables, & Code Highlights

Looking for the serif version? Check it out here →

The web has become a complex thing - which is great. Unfortunately, websites have become just as complex 1 and with complexity comes bloat. Custom typefaces. CSS libraries that try to do too much. Massive JavaScript frameworks. Hundreds of dependencies. Where is the simplicity?

Introduction

I didn't set out to create a minimal CSS file centered around reading and writing. My original goal was to further simplify the styling on my personal blog. In the end, I figured this might be something the design / development community might be interested in. So, here we are.

A few fast-facts about this CSS:

Table of Contents

Web Safe Fonts

Font Family Windows Support Mac Support
Georgia (headings) 99.4% 97.48%
Helvetica (main content) 7.34% 100%
Arial (main content fallback) 99.84% 98.74%

Headings

This is a H1 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

This is a H2 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

This is a H3 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

This is a H4 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

This is a H5 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

This is a H6 Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dicta veniam esse dolorem expedita eos nemo laudantium perferendis id saepe voluptates, tempore ullam facilis repellendus porro nam non, minus repudiandae?

Paragraphs

Below you can see lorem ipsum examples of default paragraph styling. This includes italic, bold, strong, and mark elements.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam fugit sapiente harum fugiat, consequuntur aut, beatae, cum itaque voluptates at hic. Inventore minima fugit ipsa nihil a minus officia molestiae?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore illo sequi mollitia corrupti quaerat natus repellat minima. Non, corrupti nam possimus obcaecati soluta labore facere sunt ipsum repellat voluptatem maxime?

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur eos dicta dolor, nisi est unde in omnis odio repellat sint dolore error maxime quos facilis ea, eum ipsum numquam. Corporis?

Blockquotes

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium sapiente obcaecati minus quidem molestiae soluta aliquid expedita quo. Adipisci tenetur eaque neque non similique. Illum hic omnis fugiat ducimus quam!

List Items

An unordered list grouping:

An ordered list grouping:

  1. Lorem ipsum dolor sit amet consectetur
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur

Secondary listing nested within a parent:

Tables

Table Heading 1 Table Heading 2 Table Heading 3
Table Body 1.1 Table Body 1.2 Table Body 1.3
Table Body 2.1 Table Body 2.2 Table Body 2.3
Table Body 3.1 Table Body 3.2 Table Body 3.3

Syntax Highlighting

Some basic styling for code / syntax snippets are included:

.random-class {
    display: block;
    height: 10px;
    width: 100%;
}

These styles are minimal on purpose. Therefore it's recommended to use more customized options if you intend to display large amounts of syntax content. Good plugins / CSS libraries to consider:

Source Code (CSS)

To use TypeSafe CSS, simply use the following in the head of your website:

<link rel="stylesheet" href="https://uglyduck.ca/typesafe-sans-css/typesafe-sans.css">

Or if you require the CSS to be loaded alongside other CSS:

@import url('https://uglyduck.ca/typesafe-sans-css/typesafe-sans.css');

If you would prefer to self-host, copy the code below or fork the project on the github repo.