The MCSS by Mike Mai
Extracto
A modern classless CSS framework inspired by the typefaces of Matthew Carter.
Resumen
Resumen Principal
Typography MCSS es un framework CSS minimalista y altamente enfocado en la tipografía, diseñado como un homenaje al renombrado tipógrafo británico Matthew Carter. Su núcleo se basa en dos de las fuentes más influyentes y ampliamente distribuidas de Carter, Georgia y Verdana, ambas disponibles como fuentes del sistema en la mayoría de los sistemas operativos. Esta elección estratégica subraya la filosofía del framework: priorizar la legibilidad y la omnipresencia, asegurando que el contenido sea accesible y visualmente coherente en diversas plataformas. MCSS ofrece dos temas tipográficos distintos —"Georgia" con espaciado generoso y "Verdana" con espaciado compacto— que se activan fácilmente mediante un atributo data-theme, permitiendo a los desarrolladores alternar el estilo general sin modificar el marcado HTML. El framework estiliza automáticamente los elementos HTML comunes, promoviendo un código limpio y semántico, lo que lo convierte en una solución ideal para la creación de artículos y contenido web centrado en el texto, especialmente blogs y documentos.
Elementos Clave
- Fundamentación Tipográfica en Georgia y Verdana: El framework MCSS se distingue por su elección fundamental de las fuentes Georgia y Verdana. Estas tipografías, obras maestras de Matthew Carter, son el corazón de su diseño. Su ubicuidad como fuentes del sistema en prácticamente todos los sistemas operativos asegura una renderización consistente y de alta calidad, garantizando que el diseño tipográfico se mantenga fiel a la intención original sin depender de descargas de fuentes externas, optimizando así la velocidad de carga y la accesibilidad. La descripción de Carter como "el hombre más leído del mundo" enfatiza la importancia y el alcance de estas elecciones tipográficas.
- Temas Tipográficos con Espaciado Adaptativo: MCSS ofrece una flexibilidad estilística a través de dos temas predefinidos: "Georgia" y "Verdana". El tema "Georgia" se caracteriza por un espaciado generoso, ideal para una lectura pausada y un diseño más abierto. Por otro lado, el tema "Verdana" presenta un espaciado compacto,
Contenido
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.
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 2nd level.
- This is a list item.
Ordered 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 2nd level.
- This is a list item.
Figure
Table
Note: if horizontal scrolling is needed for a wide table, put the table inside a <figure> element.
| 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
Heading
This is H1
This is H2
This is H3
This is H4
This is H5
This is H6
Accessibility
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.
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.
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.
Fuente: Mike Mai Network