CSS » Typography

Right after be­ing re­spons­ive, ty­po­graphy is the second most im­port­ant thing in m.css. The m-com­pon­ents.css file styles the most of­ten used HTML ele­ments to make them look great by de­fault.

Para­graphs, quotes and poems

Each <p> ele­ment in­side <main> has the first line in­den­ted, is jus­ti­fied and is sep­ar­ated from the fol­low­ing con­tent by some pad­ding. The <blockquote> ele­ments are in­den­ted with a dis­tinct­ive line on the left. Be­cause the in­dent­a­tion may look dis­tract­ing for manu­ally wrapped line blocks, as­sign .m-poem to such para­graph to in­dent all lines the same way. To re­move the in­dent­a­tion and jus­ti­fic­a­tion al­to­geth­er, use .m-noindent. Spa­cing between lines can be ex­ten­ded to 150% us­ing .m-spacing-150.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit
posuere, consectetur magna congue, sagittis est. Pellentesque est neque,
aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus
interdum, ac placerat lacus consequat.</p>

<blockquote><p>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
Proin sagittis nisi leo, ac pellentesque purus bibendum sit
amet.</p></blockquote>

<p class="m-poem m-spacing-150">
Curabitur<br/>
sodales<br/>
arcu<br/>
elit</p>

<p class="m-noindent">Mauris id suscipit mauris, in scelerisque lectus. Aenean
nec nunc eu sem tincidunt imperdiet ut non elit. Integer nisi tellus,
ullamcorper vitae euismod quis, venenatis eu nulla.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue, sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus consequat.

Ut dictum enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet.

Curabitur
sodales
arcu
elit

Mauris id suscipit mauris, in scelerisque lectus. Aenean nec nunc eu sem tincidunt imperdiet ut non elit. Integer nisi tellus, ullamcorper vitae euismod quis, venenatis eu nulla.

Lists, di­ar­ies

Ordered and un­ordered lists have pad­ding on bot­tom only on the first level. Mark the list with .m-unstyled to re­move the as­ter­isks/num­bers and in­dent­a­tion.

<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>An item</li>
      <li>Another item</li>
    </ol>
  </li>
  <li>Item 3</li>
</ul>

<ol class="m-unstyled">
  <li>Item of an unstyled list</li>
  <li>Another item of an unstyled list</li>
</ol>
  • Item 1
  • Item 2
    1. An item
    2. Another item
  • Item 3
  1. Item of an unstyled list
  2. Another item of an unstyled list

It’s pos­sible to con­vert a list to a single line with items sep­ar­ated by | or to save ver­tic­al space on mo­bile devices and re­spons­ively change it back on lar­ger screens. Mark such list with .m-block-bar-* or .m-block-dot-*:

<ul class="m-block-bar-m">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="m-block-dot-t">
  <li>Alice</li>
  <li>Bob</li>
  <li>Joe</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
  • Alice
  • Bob
  • Joe

Mark your defin­i­tion list with .m-diary to put the titles next to defin­i­tions.

<dl class="m-diary">
  <dt>07:30:15</dt>
  <dd>Woke up. The hangover is crazy today.</dd>
  <dt>13:47:45</dt>
  <dd>Got up from bed. Trying to find something to eat.</dd>
  <dt>23:34:13</dt>
  <dd>Finally put my pants on. Too late.</dd>
</dl>
07:30:15
Woke up. The hangover is crazy today.
13:47:45
Got up from bed. Trying to find something to eat.
23:34:13
Finally put my pants on. Too late.

The lists are com­pact by de­fault, wrap item con­tent in <p> to make them in­flated. Para­graphs in list items are neither in­den­ted nor jus­ti­fied.

<ul>
  <li>
    <p>Item 1, first paragraph.</p>
    <p>Item 1, second paragraph.</p>
  </li>
  <li>
    <p>Item 2</p>
    <ol>
      <li><p>An item</p></li>
      <li><p>Another item</p></li>
    </ol>
  </li>
  <li><p>Item 3</p></li>
</ul>
  • Item 1, first paragraph.

    Item 1, second paragraph.

  • Item 2

    1. An item

    2. Another item

  • Item 3

Head­ings

The <h1> is meant to be a page head­ing, thus it is styled a bit dif­fer­ently — it’s big­ger and has 1rem pad­ding after. The <h2> to <h6> are smal­ler and have just 0.5rem pad­ding after, to be closer to the con­tent that fol­lows. Wrap­ping part of the head­ing in a .m-thin will make it ap­pear thin­ner, de­pend­ing on used CSS theme.

<h1>Heading 1 <span class="m-thin">with subtitle</span></h1>
<h2>Heading 2 <span class="m-thin">with subtitle</span></h2>
<h3>Heading 3 <span class="m-thin">with subtitle</span></h3>
<h4>Heading 4 <span class="m-thin">with subtitle</span></h4>
<h5>Heading 5 <span class="m-thin">with subtitle</span></h5>
<h6>Heading 6 <span class="m-thin">with subtitle</span></h6>

Heading 1 with subtitle

Heading 2 with subtitle

Heading 3 with subtitle

Heading 4 with subtitle

Heading 5 with subtitle
Heading 6 with subtitle

Trans­itions

Ho­ri­zont­al line is centered and fills 75% of the par­ent ele­ment. For a more fancy trans­ition, use .m-transition on a para­graph.

...
<hr/>
...
<p class="m-transition">~ ~ ~</p>
...

Vivamus dui quam, volutpat eu lorem sit amet, molestie tristique erat. Vestibulum dapibus est eu risus pellentesque volutpat.


Aenean tellus turpis, suscipit quis iaculis ut, suscipit nec magna. Vestibulum finibus sit amet neque nec volutpat. Suspendisse sit amet nisl in orci posuere mattis.

~ ~ ~

Praesent eu metus sed felis faucibus placerat ut eu quam. Aliquam convallis accumsan ante sit amet iaculis. Phasellus rhoncus hendrerit leo vitae lacinia. Maecenas iaculis dui ex, eu interdum lacus ornare sit amet.

Pre­format­ted blocks

The <pre> ele­ment pre­serves your whitespace and adds a con­veni­ent scroll­bar if the con­tent is too wide. If in­side an in­flat­able nes­ted grid, it will have neg­at­ive mar­gin to make its con­tents aligned with sur­round­ing text.

<pre>
int main() {
    return 0;
}
</pre>
int main() {
    return 0;
}

Foot­notes and foot­note ref­er­en­ces

Ap­ply­ing .m-footnote to a link will turn it in­to a foot­note ref­er­ence — a su­per­script, wrapped in brack­ets. For the ac­tu­al foot­notes use <dl class="m-footnote">; <dt> con­tains foot­note ID and <dd> the foot­note text. You can add a <span class="m-footnote"> in­side the <dd> to provide styled back-ref­er­ences to the ori­gin­al text.

<p>
  As also noted in the court case of <em>Mondays vs The Working People</em>
  <a href="#ref1" class="m-footnote" id="ref1-backref">1</a>, the transition
  between the weekend and a working day has a similar impact on overall
  happines as a transition between holidays and working days, however not as
  significant <a href="#ref2" class="m-footnote" id="ref2-backref">2</a>.
  This is a common theme of small talk conversations, together with
  weather <a href="#ref1" class="m-footnote" id="ref1-backref2">1</a>
  <a href="#ref3" class="m-footnote" id="ref3-backref">3</a>.
</p>
<dl class="m-footnote">
  <dt id="ref1">1.</dt>
  <dd>
    <span class="m-footnote">^ <a href="#ref1-backref">a</a>
    <a href="#ref1-backref2">b</a></span> Mondays vs The Working People,
    The Arizona Highest Court, 2019
  </dd>
  <dt id="ref2">2.</dt>
  <dd>
    <span class="m-footnote"><a href="#ref2-backref">^</a></span>
    <a href="https://garfield.com/comic/2014/05/26">Garfield; Monday,
    May 26, 2014</a>
  </dd>
  <dt id="ref3">3.</dt>
  <dd>
    <span class="m-footnote"><a href="#ref3-backref">^</a></span> From a
    conversation overheard this very morning.
  </dd>
</dl>

As also noted in the court case of Mondays vs The Working People 1, the transition between the weekend and a working day has a similar impact on overall happines as a transition between holidays and working days, however not as significant 2. This is a common theme of small talk conversations, together with weather 1 3.

1.
^ a b Mondays vs The Working People, The Arizona Highest Court, 2019
2.
^ Garfield; Monday, May 26, 2014
3.
^ From a conversation overheard this very morning.

Text align­ment and wrap­ping

Use .m-text-left, .m-text-right or .m-text-center to align text in­side its par­ent ele­ment. Use .m-text-top, .m-text-middle and .m-text-bottom to align text ver­tic­ally for ex­ample in a table cell. See Float­ing around in the grid sys­tem for align­ing and float­ing blocks in a sim­il­ar way.

By de­fault, all text is wrapped ac­cord­ing to de­fault HTML rules. In or­der to look bet­ter on very nar­row screens, it’s pos­sible to use &shy; to hy­phen­ate words. The <wbr/> HTML tag does the same without ren­der­ing any hy­phens, and fi­nally there’s a .m-link-wrap you can ap­ply to links with long URLs to break any­where. Both hy­phen­a­tion and link wrap­ping can be done either manu­ally on a case-by-case basis, or us­ing the m.htmls­an­ity plu­gin, which can do both auto­mat­ic­ally.

in&shy;com&shy;pre&shy;hen&shy;si&shy;bil&shy;i&shy;ties

in<wbr/>com<wbr/>pre<wbr/>hen<wbr/>si<wbr/>bil<wbr/>i<wbr/>ties

<a href="http://…" class="m-link-wrap">
  llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.co.uk
</a>
in­com­pre­hen­si­bil­i­ties
incomprehensibilities

In­line ele­ments

A <a href="#">link</a>, <em>emphasised text</em>, <strong>strong text</strong>,
<abbr title="abbreviation">abbr</abbr> shown inside a normal text flow to
verify that they don't break text flow. Then there is <small>small text</small>,
<sup>super</sup>, <sub>sub</sub> and <s>that is probably all I can think of
right now</s> oh, there is also <mark>marked text</mark> and
<code>int a = some_code();</code>.
A link, emphasised text, strong text, abbr shown inside a normal text flow to verify that they don't break text flow. Then there is small text, super, sub and that is probably all I can think of right now oh, there is also marked text and int a = some_code();.

Links are un­der­lined by de­fault in all built­in themes. Adding .m-flat to the <a> ele­ment will re­move the un­der­line, use­ful where un­der­lines would be too dis­tract­ing:

<p class="m-text-center m-text m-dim">
  There is a <a href="#" class="m-flat">hidden</a> link.
</p>

There is a hidden link.

For cases where you can’t use the nat­ive HTML tags for em­phas­is, strong text, strikethrough and sub­script/su­per­script, the equi­val­ent is avail­able through .m-em, .m-strong, .m-s, .m-sup and .m-sub CSS classes used to­geth­er with .m-text.

Pad­ding

Block ele­ments <p>, <ol>, <ul>, <dl>, <blockqote>, <pre> and <hr> by de­fault have 1rem pad­ding on the bot­tom, ex­cept when they are the last child, to avoid ex­cess­ive spa­cing. A spe­cial case is lists — com­pon­ents dir­ectly in­side <li> ele­ments have 1rem pad­ding on the bot­tom, ex­cept when the <li> is last, to achieve con­sist­ent spa­cing for in­flated lists.

The 1rem pad­ding on the bot­tom can be dis­abled with .m-nopadb, sim­il­arly as with grid lay­outs. On the oth­er hand, if you want to pre­serve it, add an empty <div></div> ele­ment after.