CSS » Typography

Right af­ter be­ing re­spon­sive, ty­pog­ra­phy is the sec­ond most im­por­tant thing in m.css. The m-com­po­nents.css file styles the most of­ten used HTML el­e­ments to make them look great by de­fault.

Para­graphs, quotes and po­ems

Each <p> el­e­ment in­side <main> has the first line in­dent­ed, is jus­ti­fied and is sep­a­rat­ed from the fol­low­ing con­tent by some pad­ding. The <blockquote> el­e­ments are in­dent­ed with a dis­tinc­tive line on the left. Be­cause the in­den­ta­tion may look dis­tract­ing for man­u­al­ly wrapped line blocks, as­sign .m-poem to such para­graph to in­dent all lines the same way. To re­move the in­den­ta­tion and jus­ti­fi­ca­tion al­to­geth­er, use .m-noindent.

<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">
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­aries

Or­dered and un­ordered lists have pad­ding on bot­tom on­ly on the first lev­el. Mark the list with .m-unstyled to re­move the as­ter­isks/num­bers and in­den­ta­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­si­ble to con­vert a list to a sin­gle line with items sep­a­rat­ed by | to save ver­ti­cal space on mo­bile de­vices and re­spon­sive­ly change it back on larg­er screens. Mark such list with .m-block-bar-*:

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

Mark your def­i­ni­tion list with .m-diary to put the ti­tles next to def­i­ni­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­flat­ed. Para­graphs in list items are nei­ther in­dent­ed 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­in­gs

The <h1> is meant to be a page head­ing, thus it is styled a bit dif­fer­ent­ly — it’s big­ger and has 1rem pad­ding af­ter. The <h2> to <h6> are small­er and have just 0.5rem pad­ding af­ter, to be clos­er 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

Tran­si­tions

Hor­i­zon­tal line is cen­tered and fills 75% of the par­ent el­e­ment. For a more fan­cy tran­si­tion, 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­for­mat­ted blocks

The pre el­e­ment pre­serves your white­space and adds a con­ve­nient scroll­bar if the con­tent is too wide. If in­side an in­flat­able nest­ed grid, it will have neg­a­tive mar­gin to make its con­tents aligned with sur­round­ing text.

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

In­line el­e­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();.

Text align­ment

Use .m-text-left, .m-text-right or .m-text-center to align text in­side its par­ent el­e­ment. Use .m-text-top, .m-text-middle and .m-text-bottom to align text ver­ti­cal­ly for ex­am­ple in a ta­ble cell. See Float­ing around in the grid sys­tem for align­ing and float­ing blocks in a sim­i­lar way.

Pad­ding

Block el­e­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­ces­sive spac­ing. A spe­cial case is lists — com­po­nents di­rect­ly in­side <li> el­e­ments have 1rem pad­ding on the bot­tom, ex­cept when the <li> is last, to achieve con­sis­tent spac­ing for in­flat­ed lists.

The 1rem pad­ding on the bot­tom can be dis­abled with .m-nopadb, sim­i­lar­ly as with grid lay­outs.