# Typography

Typography helps to organize content, create visual hierarchy and direct users through a product or experience. Each font conveys the appropriate sentiment to assist users through their experience with Musora.

# Open Sans Font

Open Sans is the primary brand typeface and is used for headlines, paragraphs, titles, etc, All weights are acceptable. Sizing depends on the situation. All marketing material should use this font.

# Usage

This is Open Sans. Our main typeface.

<div class="font-open-sans">
    <h3>This is Open Sans. Our main typeface.</h3>
</div>

# Roboto Condensed Font

Roboto Condensed is our secondary typeface. It was chosen to support Open Sans and is used on all button texts and in marketing material on Musora's members areas. This font should always be bold and uppercase. The letter-spacing and size may be adjusted to match the design.

# Usage

Roboto Condensed is our supporting typeface

<div class="tw-font-roboto-condensed tw-uppercase">
    <h3 class="tw-pb-1">Roboto Condensed is our supporting typeface</h3>
</div>

# Permanent Marker Font

Permanent Marker is our emphasis typeface. It is used to accentuate or add emphasis to an element. This font should always be bold and uppercase. The letter-spacing and size may be adjusted to match the design.

# Usage

Permanent Marker is used for emphasis.

<div class="tw-font-permanent-marker tw-uppercase">
    <h3 class="tw-pb-1 tw-font-normal">Permanent Marker is used for emphasis.</h3>
</div>

# Bison Bold Font

Bison Bold is a unique font used on our Guitar Quest experience. This font should always be bold and uppercase. The letter-spacing and size may be adjusted to match the design.

# Usage

Bison Bold is used for the Guitar Quest Experience.

<div class="tw-font-bison-bold tw-uppercase">
    <h3 class="tw-pb-1 tw-font-normal">Bison Bold is used for the Guitar Quest Experience.</h3>
</div>

# Type Scale & Fluid Typography

Large Heading

h1tw-text-5xl - 3rem

Large to Extra Small

h1tw-fluid-text-5xl-xs - 3rem/0.75rem

Heading One

h1tw-text-4xl - 2.25rem

Heading Two

h2tw-text-3xl - 1.875rem

Heading Two to Heading Three

h2tw-fluid-text-3xl-2xl - 1.875rem/1.5rem

Heading Three

h3tw-text-2xl - 1.5rem

Heading Three to Paragraph

h3tw-fluid-text-2xl-base - 1.5rem/1rem

Heading Four

h4tw-text-xl - 1.25rem

Heading Five

h5tw-text-lg - 1.125rem

Heading Six

h6tw-text-base - 1rem

Paragraphs

ptw-text-base - 1rem

Paragraph to Extra Small

ptw-fluid-text-base-xs - 1rem/0.75rem

Paragraph Small

ptw-text-sm - 0.875rem

Paragraph Small to Extra Small

ptw-text-sm - 0.875rem/0.75rem

Paragraph Extra Small

ptw-text-xs - 0.75rem

Title

h3tw-text-2xl tw-font-normal

Buttons

ptw-font-roboto-condensed tw-font-bold

Usage

The above Type Scale includes an example on the left and code on the right. The HTML element is italicized and the Tailwind class that styles the element is on the right. Stylesora styles the header (h1-h6) elements and the paragraph (p) element by default, but these styles can be overridden with Tailwind classes.

# Example

Main Section Title

Section Sub Title

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

Small Meta Text

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.

Type Variants

Capitalize on low hanging fruit to identify a ~~ballpark~~ value added activity to beta test. Override the digital divide with additional clickthroughs from Dev^Ops. Nanotechnology immersion along the information highway will close the loop on focusing solely on the _bottom line.

<!-- Text provided by corporate ipsum -->
<div>
    <h2 class="tw-pb-1">Main Section Title</h2>
    <h4>Section Sub Title</h4>
    <br>
    <p class="tw-text-base">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
    <br>
    <h4>Small Meta Text</h4>
    <br>
    <p class="tw-text-xs">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.</p>
    <br><hr><br>
    <h4>Type Variants</h4>
    <br>
    <p>Capitalize on low hanging fruit to <i>identify</i> a <s>ballpark</s> value added activity to <b>beta test</b>. Override the digital divide with additional clickthroughs from Dev<sup>Ops</sup>. <b><u>Nanotechnology immersion</u></b> along the <b><i>information highway</i></b> will close the loop on focusing solely on the <sub>bottom</sub> line.</p>
</div>

Variants

The above 'Type Variants' example includes the following tags: ,,,<s>, and . You can add type variants with CSS but most WYSIWYG editors add them through HTML markup.

# Font Links

← Base Site →