Origami Frontend Components & Services

Demos: o-typography


Demonstrates the default typographic scale.

Line Width

Demonstrates line width capping for different font-sizes (see the SASS mixin `oTypographyMaxLineWidth`).




As an alternative to adding classes to each html element, adding a wrapper class on a parent element will apply typographic styles to child html elements semantically.

Switch component view

GitHub Repository

Install o-typography

If using the Build Service, add o-typography@^7.0.3 to your script and link tags. Ensure the correct brand is set with a query parameter &brand=internal.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-typography@^7.0.3".

Help & Support

o-typography is maintained directly by the Origami team. If you have any questions about o-typography or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com