Typography

Open Sans

Open Sans is the main font family used by BenchPrep. It should be used for all headers, sub headers and text. To ensure a consistent look, make sure fonts are used in a consistent manner and the weights of the font have been considered, using heavier weights for headers to highlight key messages.

Aa
Open Sans Semibold
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Open Sans Semibold Italic
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Open Sans Regular
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Open Sans Italic
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Open Sans Light
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Open Sans Light Italic
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)

Times New Roman

The Times font family is used for the content of the learning modules, such as practice questions, tests and flash cards. Because some of the content contains mathematical equations that require MathML, and Times is one of the font families used to implement MathML, BenchPrep uses Times for all content to maintain consistency.

Aa
Times New Roman Bold
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Times New Roman Bold Italic
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)
Aa
Times New Roman Italic
ABCDEFGHIJKLMNOPQRSTUVWXY
abcdefghijklmnopqrstuvwxyz
1234567890 (,.:;?!$&*)

MathML

Mathematical Markup Language (MathML) is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content. It aims at integrating mathematical formulae into World Wide Web pages and other documents. BenchPrep uses Times as the font in content sections of the web app where MathML is involved. Listed below is a sample of MathML markup.

Presentation

a x + b y = e c x + d y = f

HTML

<math>
  <mfenced open="{" close="}">
    <mtable>
      <mtr><mtd><mrow><mrow><mi>a</mi><mo></mo><mi>x</mi></mrow><mo>+</mo>
            <mrow><mi>b</mi><mo></mo><mi>y</mi></mrow>
          </mrow>
          <mo> = </mo>
          <mi> e </mi></mtd>
      </mtr>
      <mtr>
        <mtd>
          <mrow><mrow><mi>c</mi><mo></mo><mi>x</mi></mrow><mo>+</mo>
            <mrow><mi>d</mi><mo></mo><mi>y</mi></mrow>
          </mrow>
          <mo> = </mo>
          <mi> f </mi>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
</math>

Headers


Presentation

HTML

Hero Header

Open Sans Semibold, 2.8 ems, 44 px
Marketing Site

<header class="hero-header">
  <h1 class="title">Hero Header</h1>
</header>
<header class="page-header">
  <h1 class="title">Page Header</h1>
</header>

Section Header

Open Sans Light, 1.8 ems, 28 px
Marketing Site

<header class="section-header">
  <h1 class="title">Section Header</h1>
</header>

Minor Section Header

Open Sans Semibold, 1.3 ems, 20 px
Marketing Site, Dashboards, Webapp

<header class="minor-section-header">
  <h1 class="title">Minor Section Header</h1>
</header>

Webapp Section Header

Open Sans Semibold, 1.125 ems, 18 px
Webapp

<header class="webapp-section-header">
  <h1 class="title">Webapp Section Header</h1>
</header>

Text Header

Open Sans Semibold, 1em, 16 px
Webapp

<header class="text-header main-header">
  <h2 class="title">Text Header</h2>
</header>

Content Header

Times, 1.5 ems, 24 px
Webapp

<h3>Content Header</h3>

Paragraph Text


Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Open Sans, 1em, 16px

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Times, 1em, 16px

<p>Nullam quis risus eget…</p>