responsive typography

Available in picchu - view on GitHub

Foundation

Typeface

Weight

Supported weights

Base size

RWD size

Line height

Word spacing

Letter spacing

Headline

Segoe UI

Light

Semilight, Regular, Semibold, Bold

62 px

1.2/ 74.4 px

100%

-0.01em/ -10

Header

Segoe UI

Light

Semilight, Regular, Semibold, Bold

46 px

1.2/ 55.2 px

100%

-0.01em/ -10

Subheader

Segoe UI

Light

Semilight, Regular, Semibold, Bold

34 px

1.2/ 40.79 px

100%

0

Title

Segoe UI

Semilight

Regular, Semibold, Bold

24 px

1.25/ 30 px

100%

0

Subtitle

Segoe UI

Regular

Semilight, Semibold, Bold

20 px

1.25/ 25 px

100%

0

Body

Segoe UI

Regular

Semilight, Semibold, Bold

18 px

1.5/ 24 px

100%

0

Body alt

Segoe UI

Regular

Semilight, Semibold, Bold

15 px

1.25/ 20 px

100%

0

Caption

Segoe UI

Regular

Semilight, Semibold, Bold

13 px

1.25/ 17.5 px

100%

0

Caption alt

Segoe UI

Regular

Semilight, Semibold, Bold

11 px

1.25/ 15 px/

100%

0

Page headline

Page Header h1

Section Subheader h2

Title h3

Subtitle h4

Caption

Caption alt

Lorem ipsum dolor sit amet, consect|etur adipisicing elit. Natus provident officia maxime repell|endus tempore consequatur quidem voluptatibus nulla alias laudantium dolorem voluptas harum ipsum rerum, perspiciatis veniam perferendis eveniet minus sequi laborum.

Modi ab enim id, molestias perspiciatis reiciendis voluptates nulla repudiandae suscipit obcaecati ipsam nam, possimus doloribus quo cupiditate.

Section Header h2

Section Header h2

Section Header h2

Standard Header h3

Using weight helpers:

Light Header h3

Semilight Header h3

Regular Header h3

Semibold Header h3

Standard Header h3

Using weight helpers:

Light Header h3

Semilight Header h3

Regular Header h3

Semibold Header h3

Standard Header h4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, sed asperiores adipisci nemo pariatur minus ratione.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()+'"?

Article/body text testing

1 column

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi! Officiis porro aspernatur sequi iure placeat expedita odio quia libero at tempora voluptates laborum debitis sed architecto accusantium ad, fugit quam culpa nulla quos vel, nesciunt error, quas.

2 columns

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

3 columns

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

4 columns

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

With offset testing/similar to switch designs - offset only active above 1400px

2 columns with offset

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

3 columns with offset

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

4 columns with offset

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!

Lorem ipsum dolor sit amet, consectetur adipi|sicing elit. Optio cum autem assumenda saepe m|olestias omnis aperiam labore hic, asperiores, debitis voluptate mollitia voluptatum minima dignissimos ex natus et est quis rem aspernatur totam, veritatis. Corporis unde, repudiandae voluptatum molestias vitae laboriosam distinctio nihil, dolorum nesciunt optio aperiam cum dignissimos molestiae itaque natus ducimus iusto rerum a quaerat iure sequi asperiores commodi excepturi!