tachyons-font-family / Typography / Docs / TACHYONS

Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

Font Family

There are several pre-defined classes for setting the typeface of a page or element. It is suggested that you customize or extend this module to suit your own needs. As tachyons is a toolkit for designing performant webpages it comes with a variety of font stacks that utilize attractive system fonts with appropriate fallbacks.

Relying on systems fonts greatly improves page performance and can also help your web application/site blend in with the user’s operating system. Readability is strongly linked to familiarity, so this helps create a more fluid reading experience, allowing your users to focus on your content.

Examples

Default System Sans Serif

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Default System Serif

System Sans Serif with Fallbacks

Consolas, monaco (Fallback: system monospace)

Times (Fallback: system serif)

Bodoni MT(Fallback: system serif)

Calisto (Fallback: system serif)

Garamond (Fallback: system serif)

Baskerville (Fallback: system serif)

Font Weight

Font Style

Reference

MDN - Font Family

tachyons-font-family

v4.3.4 285 B

Declarations: 15

Selectors: 16

Max. Specificity Score: 10

Size of Avg. Rule: 1

src/_font-family.css


/*

   FONT FAMILY GROUPS
   Docs: http://tachyons.io/docs/typography/font-family/

*/


.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               'helvetica neue', helvetica,
               ubuntu,
               roboto, noto,
               'segoe ui', arial,
               sans-serif;
}

.serif {
  font-family: georgia,
               times,
               serif;
}

.system-sans-serif {
  font-family: sans-serif;
}

.system-serif {
  font-family: serif;
}


/* Monospaced Typefaces (for code) */

/* From http://cssfontstack.com */
code, .code {
  font-family: Consolas,
               monaco,
               monospace;
}

.courier {
  font-family: 'Courier Next',
               courier,
               monospace;
}


/* Sans-Serif Typefaces */

.helvetica {
  font-family: 'helvetica neue', helvetica,
               sans-serif;
}

.avenir {
  font-family: 'avenir next', avenir,
               sans-serif;
}


/* Serif Typefaces */

.athelas {
  font-family: athelas,
               georgia,
               serif;
}

.georgia {
  font-family: georgia,
               serif;
}

.times {
  font-family: times,
               serif;
}

.bodoni {
  font-family: "Bodoni MT",
                serif;
}

.calisto {
  font-family: "Calisto MT",
                serif;
}

.garamond {
  font-family: garamond,
               serif;
}

.baskerville {
  font-family: baskerville,
               serif;
}

Overview of Tachyons

Table of Styles Table of Properties

Typography

Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families Avenir Next Helvetica Roboto San Francisco System Sans-Serif Athelas Baskerville Garamond Georgia System Serif

Layout

Debugging Debug with a Grid Basic Grid Flexbox Box Sizing Spacing Floats Clearfix Display Widths Max Widths Heights Position

Theming

Skins Skins animations Hovers Background Size Borders Border Radius Box Shadow Opacity

Elements

Images Links Lists Forms Tables