CSS for Typography
Typography CSS can be copy-pasted into your project. Include in it your existing stylesheet or create one specifically for typography. By using this CSS you will automatically have your typography linked to Anchor ⚓️ tokens. This also means that your typography will support the partner styles provided by Anchor ⚓️.
Headings
X-Large
X-Large emphasized
Large
Large emphasized
Medium
Medium emphasized
Small
Small emphasized
X-Small
X-Small emphasized
Paragraph
Paragraph
Paragraph emphasized
Paragraph small
Paragraph small emphasized
The whole stylesheet
The CSS can be used your application, so you can use the classes.
// Set the default font-family and font-size for the body
body {
font-family: var(--s-font-family-paragraph), 'trebuchet ms', sans-serif;
font-size: var(--s-size-text-default);
line-height: var(--s-size-line-height-paragraph);
}
// The attribute selector catches all our paragraph classes
[class^='anchor-u-typography__paragraph'] {
font-size: var(--s-size-text-default);
font-family: var(--s-font-family-paragraph), 'trebuchet ms', sans-serif;
line-height: var(--s-size-line-height-paragraph);
}
.anchor-u-typography__paragraph {
font-weight: var(--s-font-weight-paragraph-default);
}
.anchor-u-typography__paragraph--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}
// The attribute selector catches all our heading classes
[class^='anchor-u-typography__heading-'] {
font-weight: var(--s-font-weight-heading-default);
font-family: var(--s-font-family-heading), Arial, Helvetica, sans-serif;
}
.anchor-u-typography__heading-xlarge {
font-size: var(--s-size-text-heading-xlarge-default);
line-height: var(--s-size-line-height-heading-xlarge-default);
}
.anchor-u-typography__heading-xlarge--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}
.anchor-u-typography__heading-large {
font-size: var(--s-size-text-heading-large-default);
line-height: var(--s-size-line-height-heading-large-default);
}
.anchor-u-typography__heading-large--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}
.anchor-u-typography__heading-medium {
font-size: var(--s-size-text-heading-medium-default);
line-height: var(--s-size-line-height-heading-medium-default);
}
.anchor-u-typography__heading-medium--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}
.anchor-u-typography__heading-small {
font-size: var(--s-size-text-heading-small-default);
line-height: var(--s-size-line-height-heading-small-default);
}
.anchor-u-typography__heading-small--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}
.anchor-u-typography__heading-xsmall {
font-size: var(--s-size-text-heading-xsmall-default);
line-height: var(--s-size-line-height-heading-xsmall-default);
}
.anchor-u-typography__heading-xsmall--emphasized {
font-weight: var(--s-font-weight-paragraph-emphasized);
}Usage example
In this example you can see how we can use a medium heading class on a h3 tag, and style the paragraph with a paragraph class.
This is our headline using Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h3 className="anchor-u-typography__heading-medium">This is our headline using Medium</h3>
<p className="anchor-u-typography__paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>