Typography

Headings

Headings

H1 - In exercitation eiusmod sit incididunt

H2 - Aliquip ad consectetur cillum tempor

H3 - Commodo sunt dolor lorem dolore 

<h1>
  H1&nbsp;-&nbspIn id aute dolore officia 
</h1>
<h2>
  H2&nbsp;-&nbspEiusmod consectetur amet proident adipiscing 
</h2>
<h3>
  H3&nbsp;-&nbspEsse est consectetur eu consequat 
</h3>


                          <h1>H1&nbsp;-&nbspElit elit labore officia sit 
                          </h1>
                          <h2>H2&nbsp;-&nbspEiusmod proident ut commodo duis 
                          </h2>
                          <h3>H3&nbsp;-&nbspCulpa et cillum consequat exercitation 
                          </h3>

Small header segment

Small header segment
70% font size

H1 - Dolore consequat incididunt adipiscing aliquip in proident ut

H2 - Amet cillum dolore cupidatat culpa in ad ad

H3 - Quis enim dolore qui reprehenderit nulla eu fugiat 

<h1>
  H1&nbsp;-&nbsp
  <small>
    Dolor dolore officia in occaecat fugiat ad ex 
  </small>
</h1>
<h2>
  H2&nbsp;-&nbsp
  <small>
    Culpa occaecat laborum ipsum est in et ut 
  </small>
</h2>
<h3>
  H3&nbsp;-&nbsp
  <small>
    Fugiat ut quis fugiat in nisi eu aute 
  </small>
</h3>


                          <h1>H1&nbsp;-&nbsp<small>Sunt voluptate veniam ut eu velit do laborum </small></h1>
                          <h2>H2&nbsp;-&nbsp<small>Enim eiusmod irure ex velit eu do ut </small></h2>
                          <h3>H3&nbsp;-&nbsp<small>Eiusmod irure qui nostrud cillum in pariatur ad </small></h3>

Content text

Paragraph

Dolor amet proident proident laborum sunt excepteur elit sunt deserunt sed eiusmod veniam adipiscing duis cupidatat amet incididunt aute reprehenderit ut do sunt dolore tempor exercitation laborum ad in consectetur pariatur in fugiat ex sit nisi in qui ut in ad sint mollit dolore sunt ex labore sunt non ut quis officia sit nulla aute dolor duis laborum quis aliquip est lorem sint tempor dolor dolor velit velit voluptate cupidatat in est ex laborum dolore do ex officia elit et laboris consectetur officia reprehenderit in quis id velit consectetur irure enim ex incididunt elit irure occaecat incididunt nulla dolor tempor 

<p>
  Consequat commodo deserunt aliquip eiusmod sed proident culpa nulla duis ex in ut in ipsum sed elit magna minim in tempor nisi occaecat magna eu nostrud veniam eu deserunt adipiscing laboris elit sunt dolor nisi sit mollit ex in nisi sit ea irure lorem cillum ex nisi reprehenderit cillum ut laborum nulla sit duis dolore dolore esse adipiscing ut in ullamco in aliqua excepteur labore aute lorem aliquip cillum ea nulla proident aute irure dolor ipsum nostrud nisi voluptate tempor ullamco pariatur non sint elit dolore dolor in aliquip ad velit voluptate esse excepteur tempor excepteur ex laboris consequat nisi 
</p>


                          <p>Culpa consequat eiusmod veniam non cillum est nostrud occaecat minim elit sed ipsum in in culpa tempor elit ex labore dolore irure ad quis in veniam incididunt in adipiscing magna ea elit veniam aliquip laborum incididunt do commodo cupidatat lorem dolor veniam officia labore non nulla dolor cupidatat consequat consequat sunt dolore dolor laboris cupidatat anim duis eiusmod pariatur sint et nulla dolor aliquip pariatur minim dolore sit in aliqua cillum nostrud sunt dolor mollit laborum commodo sunt laborum ut aliqua duis dolore lorem in dolor consequat ullamco consequat mollit aute ea exercitation amet eiusmod qui labore sit ea irure 
                          </p>

Link

Laborum lorem ea irure ex id tempor Fugiat cupidatat aute Eiusmod quis est excepteur 

<p>
  Aute magna ipsum incididunt incididunt fugiat pariatur 
  <a href="#">
    Excepteur lorem officia 
  </a>
  Cupidatat cupidatat magna et 
</p>


                          <p>Esse cupidatat esse nostrud fugiat ut est <a href="#">Laborum id occaecat </a>Velit nostrud lorem et 
                          </p>

Sup

Ea enim lorem lorem ut ea tempor Dolore excepteur nostrud Sed voluptate ut occaecat 

<p>
  Consectetur voluptate ut reprehenderit irure cupidatat mollit 
  <sup>
    Enim consectetur sunt 
  </sup>
  Ut eu incididunt ea 
</p>


                          <p>Deserunt commodo et aliqua dolore aute incididunt <sup>Cupidatat qui irure </sup>Magna amet laboris exercitation 
                          </p>

Sub

Cillum velit irure incididunt qui sed esse Sint lorem cupidatat Incididunt in dolor consectetur 

<p>
  Dolor incididunt consectetur irure reprehenderit proident occaecat 
  <sub>
    Voluptate duis laboris 
  </sub>
  Minim nostrud consectetur dolore 
</p>


                          <p>Anim aliquip pariatur ut tempor lorem officia <sub>Nostrud consequat adipiscing </sub>Duis irure excepteur eiusmod 
                          </p>

List

  • Quis labore
  • Eu est
  • Ut nulla
    • Aliqua enim
    • Elit eiusmod
  • Laborum in 
<ul>
  <li>
    Nulla pariatur 
  </li>
  <li>
    Sed exercitation 
  </li>
  <li>
    Quis qui 
    <ul>
      <li>
        Labore in 
      </li>
      <li>
        Ad incididunt 
      </li>
    </ul>
  </li>
  <li>
    Amet est 
  </li>
</ul>


                          <ul>
                            <li>Commodo labore 
                            </li>
                            <li>Adipiscing non 
                            </li>
                            <li>Ipsum mollit 
                              <ul>
                                <li>Occaecat nostrud 
                                </li>
                                <li>Nulla ut 
                                </li>
                              </ul>
                            </li>
                            <li>Duis deserunt 
                            </li>
                          </ul>

Writing UI words

UI words principles

When writing words for the UI always consider the context - other elements on the screen and the user's workflow. For objects use nouns, for actions use verbs. Don't write instructions about using the UI. Do write words describing the system status and elements.

Be specific, avoid general writing

Specific texts puts the UI elements into context and ties together workflows while general words break up the workflow and makes it harder to follow. Writing specific labels on UI elements, especially actions enable the users to understand what an element is, helping them making faster and more confident decisions.

Write labels for scanning

Don't force users to read when they are doing their tasks. Capitalizing words makes them scannable, helping users recognize and understand the words faster. Labels for UI elements and navigation items should be scannable for quick recognition. Other text should be written as proper sentences.

Use as little text as possible

Unnecessary text on the UI increases clutter and distracts users from their text. As users do their tasks they don’t read on the UI. They scan however for meaningful words that move them towards their goals, so make sure you use scannable labels that clearly describe parts of the UI and the status of the system.

Last update

Message doc(typo): Clean up guidelines.
Date:
()
Committer: David Gyenes
Component history