MCSS— A modern classless CSS framework inspired by the typefaces of Matthew Carter

Typography

MCSS is a tribute to the British type designer Matthew Carter. The framework is designed with two of Carter’s most commonly known typefaces—Georgia and Verdana. The New Yorker once described Carter as the most widely read man in the world because his typefaces are available as system fonts in most operating systems.

Georgia

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 + - * / = ! @ # $ % & ?

The quick onyx goblin jumps over the lazy dwarf

Verdana

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9 + - * / = ! @ # $ % & ?

The quick onyx goblin jumps over the lazy dwarf

Theming

MCSS is available in two typographically different themes. Add the data-theme attribute to the <html> element to activate a particular theme.

  • Georgia: Typeset primarily using Georgia with generous spacing.
  • Verdana: Typeset primarily using Verdana with compact spacing.

Elements

With MCSS, some of the most common HTML elements are styled and can be used without any classes. Here is a demo of all available elements. To use each element, simply inspect in your browser and copy the HTML.

Inline Text

There are various ways to style text: emphasis (italic), strong emphasis (bold), link, abbr, code, key, superscript, subscript, small, and quote.

Details and Summary

You are looking at it. This is the details and you just clicked summary to expand it.

Blockquote

Simplicity is the ultimate sophistication.

— Leonardo da Vinci
Code Block 
/* This is a block of code */

pre {
  display: block;
}
Description List
Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
Unordered List
  • This is a list item.
  • This is 1st level.
    • This is 2nd level.
      • This is 3rd level.
      • This is 3rd level.
    • This is 2nd level.
  • This is a list item.
Ordered List
  1. This is a list item.
  2. This is 1st level.
    1. This is 2nd level.
      1. This is 3rd level.
      2. This is 3rd level.
    2. This is 2nd level.
  3. This is a list item.
Figure
Placeholder
Fig 1: This figure has an image and figcaption.
Table

Note: if horizontal scrolling is needed for a wide table, put the table inside a <figure> element.

Table caption.
Heading Heading Heading Heading Heading
Row Heading Cell Cell Cell Cell Cell
Row Heading Cell Cell Cell Cell Cell
Footer Heading Footer cell Footer cell Footer cell Footer cell Footer cell
Form
This is a fieldset
  3. ⚠ Error: please enter a valid email.
  4. ⚠ Error: please enter a valid email.

  7. ↑ Note: plain text and HTML are allowed.

This is another fieldset
This is yet another fieldset

Heading

This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

Accessi­bility

MCSS is written for plain HTML. It is accessible by default.

Best with semantic HTML

MCSS is designed for writing articles. To create a standard page as the one you are reading now, use the following semantic HTML template.

<header>
  <h1>Page Title</h1>
  <p>Page description.</p>
  <nav>
    <ul role="list">
      <li>
        <a href="...">Link</a>
      </li>
      ...
    </ul>
  </nav>
</header>
<hr>
<main>
  <article>
    <section aria-labelledby="h">
      <h2 id="h">Section Title</h2>
      <p>Section content.</p>
    </section>
    <section aria-labelledby="hh">
      <h2 id="hh">Section Title</h2>
      <p>Section content.</p>
    </section>
    ...
  </article>
</main>
<hr>
<footer>
  <p>Footer content</p>
</footer>

Perfect for writing with Markdown

Set up the page template with your blog and use the <main> <article> container as the article body. Markdown renders semantic HTML so everything will just work.

<header>
  <h1>{{ title }}</h1>
  <p>{{ description }}</p>
  <nav>
    <ul role="list">
      <li>
        <a href="{{ url }}">{{ pageName }}</a>
      </li>
      ...
    </ul>
  </nav>
</header>
<hr>
<main>
  <article>
    <!-- Markdown --!>
    {{ content }}
    <!-- Markdown --!>
  </article>
</main>
<hr>
<footer>
  Written by {{ author }} on {{ date }}.
</footer>

Dark mode

MCSS auto-detects your operating system’s settings. Dark design is displayed if dark mode is your preferred setting. All colors—except Crimson—are defined by the browser. The black background in dark mode could appear slightly different from browser to browser.

MCSS available in light and dark mode
Figure 1: auto-detect dark mode.

Example article

An excerpt from Matthew Carter’s Wikipedia page.

Matthew Carter

Matthew Carter CBE RDI (born 1 October 1937) is a British type designer. A 2005 New Yorker profile described him as the most widely read man in the world by considering the amount of text set in his commonly used fonts.

Carter’s career began in the early 1960s and has bridged all three major technologies used in type design: physical type, phototypesetting and digital font design, as well as the design of custom lettering.

Carter’s most used fonts are the classic web fonts Verdana and Georgia and the Windows interface font Tahoma, as well as other designs including Bell Centennial, Miller and Galliard. He is the son of the English historian of printing Harry Carter (1901–1982) and cofounded Bitstream, one of the first major retailers of digital fonts. He lives in Cambridge, Massachusetts.

Matthew Carter
Figure 2: Matthew Carter in 2018. Source: Wikipedia.

Early life and education

Carter grew up in London, the son of Harry Carter, a book designer and later historian of printing. His mother worked in preparing scale drawings.

Although Carter had intended to get a degree in English at Oxford he was advised to take a year off so he would be the same age as his contemporaries who had gone into National Service.

Awards

Carter has won numerous awards for his contributions to typography and design, including an honoris causa, Doctorate of Humane Letters from the Art Institute of Boston, an AIGA medal in 1995, the TDC Medal from the Type Directors Club in 1997, and the 2005 SOTA Typography Award. A retrospective of his work, Typographically Speaking, The Art of Matthew Carter, was exhibited at the University of Maryland, Baltimore County in December 2002. This retrospective is featured in the documentary, Typographically Speaking: A Conversation With Matthew Carter. In 2010, Carter was named a MacArthur Foundation Fellow, otherwise known as a genius grant.

On 26 May 2011, he received the Lifetime Achievement Award from the National Design Awards at the White House.

He is a member of Alliance Graphique Internationale (AGI), has served as chairman of ATypI, is a member of the board of directors of the Type Directors Club, and is an ex officio member of the board of directors of the Society of Typographic Aficionados (SOTA). Some of Carter's designs are in the collection of the St. Bride Printing Library in London.

Carter was appointed Commander of the Order of the British Empire (CBE) in the 2020 Birthday Honours for services to typography and design.