Typography ΒΆ


Here is an index of classes to use for headings. Each style is prefixed by its CSS .class name:

Happy talks
The death of innovation, the end of growth
Beyond the talk
What information do we collect?
Providing requested services
Erik Brynjolfsson: The key to growth? Race with the machines
Why I must speak out about climate change
What to watch next
The creative spark
Show 20 more talks
James B. Glattfelder, Legal Activist
Areas of Expertise
Information you provide directly to us

When pairing a heading with a decorative link floated beside it, please use the heading helper.


Because margin use below headings depends on context, the default heading classes do not include any margins. Please use one of these classes to add margins below your headings:

CSS class Mobile bottom-margin Desktop bottom-margin
.m1 20px 40px
.m2 20px 30px
.m3 20px 20px
.m4 10px 10px
.m5 5px 5px


Here is an index of classes to use for paragraph text. Each style is prefixed by its CSS .class name:

The US economy has been expanding wildly for two centuries. Are we witnessing the end of growth? Economist Robert Gordon…
Overall business growth is limited; instead, growth is limited to categories that shift based on demand.
Share your thoughts with the TED community and see what others are saying
What is this thing you've stumbled upon? "TED"? Talks on riveting ideas: Technology, Entertainment, Design and so much more. Here's a TED primer, featuring 11 classic talks on a full range of topics.

Standalone links

Each style is prefixed by its CSS .class name:

Miscellaneous typographic styles

Each style is prefixed by its CSS .class name:

You don't wake up one day no longer a racist. It takes generations to tear that intuition.
All of the great Disney works took works that were in the public domain and remixed them.
14m 28s • Views 1,245,689
Opposing view:
Follow these talk topics:
Etiam at risus et justo dignissim congue.

Custom font size mixins

To make the site accessible for users who need to set custom fonts or sizes, we try to provide support for rem units wherever possible. rem units adjust the font size relative to the user's browser settings. Some Sass mixins are included that make working with rem units a cinch.

To set the font size without setting a line height, or while setting a relative line height (i.e., a line height without unit specified or with a relative unit such as ems specified), please use the font-size mixin, and provide it a pixel font size:

.my-class {
  @include font-size(14px);
  line-height: 1.4;

Please make sure you only use pixel units with this mixin. Other units are not currently supported.

To set both font size and line height in pixels, please use the font-line mixin:

.my-class {
  @include font-line(14px, 20px);

This (above) example will produce a font-size of 14px and a line height of 20px.