Sections

Typography

In our Marketing material we use two fonts, here is some simple usage guidence.

Headers

Roboto Slab is an open-source slab serif with geometric forms and friendly and open curves. We use it for headings and numerical call outs.

Download at Google Fonts

Paragraphs & subheadings

Section titled Paragraphs & subheadings

Source Sans Pro is an open-source sans serif that works well for legibility in UI environments.

Download at Google Fonts

Examples

Section titled Examples

Some examples of common patterns. Sizing in these examples is based on the Product standards. In other mediums you can just use the relative sizes.

The non-Stacks p-* classes will only work on some Stack Overflow owned sites.

Hero headline & paragraph

Section titled Hero headline & paragraph

<h1 class="p-ff-roboto-slab fs-display1 lh-sm mb24">
    Knowledge sharing and collaboration without distractions
</h1>
<p class="p-ff-source fs-title">
    Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.
</p>

Knowledge sharing and collaboration without distractions

Stack Overflow for Teams is a knowledge management & collaboration solution that technologists already trust.

Section headline & preface

Section titled Section headline & preface

<h1 class="p-ff-roboto-slab-bold fs-headline2 mb12">
    Improves other tools
</h1>
<p class="p-ff-source fs-subheading">
    Streamline workflows across the entire organization
</p>

Improves other tools

Streamline workflows across the entire organization

Item headline & preface

Section titled Item headline & preface

<h1 class="p-ff-roboto-slab-bold fs-title mb12">
    Improves other tools
</h1>
<p class="p-ff-source fs-body3">
    Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.
</p>

Software engineers

Help engineers be more efficient and streamline knowledge sharing using a tool they already love and trust.

Numbers (large)

Section titled Numbers (large)

<div class="p-ff-roboto-slab-bold fs-display3">
    82%
</div>
<div class="p-ff-source fs-body3">
    of developers visit us at least once per week
</div>

82%

of developers visit us at least once per week

Numbers (small)

Section titled Numbers (small)

<div class="p-ff-roboto-slab-bold fs-title mb4">
    5,000+
</div>
<div class="p-ff-source fs-body2">
    Stack Overflow for Teams instances active every day
</div>

5,000+

Stack Overflow for Teams instances active every day