We use one font at three weight; bold, regular, light and italicise for emphasis. Our typographic elements have set margins to ensure consistency. Most modules such as page section will remove top margin from the first child element and bottom margin from the last child element to ensure consistent spacing.
The base font on the html element is set to 62.5% in order to make using REM easier. The body font size is then set to 1.8rem (18px).
Headings should always be lowercase and this is enforced via CSS. Headings can have commas, but not full stops. An exception is made when a person's name or brand is mentioned. Enforced lowercase can be removed by using the class
32px (3.2rem) / sofia pro
28px (2.8rem) / sofia pro
24px (2.4rem) / sofia pro
20px (2rem) / sofia pro
18px (1.8rem) / sofia pro
16px (1.6rem) / sofia pro
Sometimes you want supplementary or "meta" text next to a heading. The
.heading-with-meta class will assist with this.
<h1 class="heading-with-meta">your basket</h1> <p class="meta">(12 items)</p>
Lead paragraph, often used for an opening summary.
Strong for bold copy or form labels.
This is our standard paragraph and base font size.
Muted or less important text.
<p class="meta"><span class="fa fa-question-circle"></span> ...</p>
Blockquote with optional footer.
<blockquote> <p> Blockquote with optional footer. </p> <footer> Lee Jordan </footer> </blockquote>
Lead blockquote with optional footer.
<blockquote class="lead"> <p> Lead blockquote with optional footer. </p> <footer> Lee Jordan </footer> </blockquote>
cursive for captions and voice
Small for legal copy, disclaimers and copyright information.
REFERRAL CODE / URL
Our base font size is 16px by default and 14px when the viewport is below 768px wide.
Paragraphs should have a maximum width of 555px to ensure an optimum line length of around 75 characters.
Avoid center aligned paragraphs.
We prefer this method for using typographical images (preferably svgs) as a heading element.
<h3><img src="/images/banners/flapjack-banner.svg" class="img-responsive" alt="flapjacks are here!"></h3>
Intrinsicly exploit virtual infomediaries vis-a-vis equity invested processes. Interactively iterate error free.
Synergistically disseminate optimal expertise whereas state of the art strategic theme areas. Monotonectally mesh out-of-the-box imperatives before 24/7 potentialities. Rapidiously productize team building portals with seamless innovation. Conveniently. Efficiently provide access to synergistic.
Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway.
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.