Typography

Typeface

One main typeface is used for the web, with a sparingly used secondary typeface:

Atkinson Hyperlegible - Primary typeface: is the default for body copy and headings
Merriweather - Secondary typeface: only for quotes and some 'decorative' copy. Usually in 300 weight.

Heading Levels

Use semantic heading level elements (<h1>-<h6>) for content, do not use these elements for their visual appearance.

To make a non-heading element appear in a heading style (including font-family), a class of h1-h6 can be applied. eg. <div class="h3">

Semantic heading elements can be sized by applying these classes, eg. <h2 class="h1">.

Headings are assigned two Typescale sizes in __vars/_typography.scss, one for smallscreen, and one for larger screens.

h1 Default: 4xl / 8xl
h2 Default: 3xl / 6xl
h3 Default: 2xl / 4xl
h4 Default: xl / 2xl
h5 Default: lg / xl
h6 Default: md / lg

Reach out, raise hope, change society.

Lorem Ipsum is simply dummy text of the printing and typesetting industry

Typescale

The following sizes are defined in __vars/_typography.scss to set a typescale.

This will only change the font-size, and will change it at all breakpoints.

VERY IMPORTANT: Sizes above 3xl should not be used as utility classes in HTML, only use these in Sass at larger screen widths, they are too big for mobile! (Example below)

9xl: The biggest font-size 3 (rem)
8xl: The second biggest font-size 2.85 (rem)
7xl: The third biggest font-size 2.5 (rem)
6xl: The fourth biggest font-size 2.25 (rem)
5xl: The fifth biggest size 2 (rem)
4xl: The quick brown fox jumps over the lazy dog 1.8 (rem)
3xl: The quick brown fox jumps over the lazy dog 1.6 (rem)
2xl: The quick brown fox jumps over the lazy dog 1.4 (rem)
xl: The quick brown fox jumps over the lazy dog 1.25 (rem)
lg: The quick brown fox jumps over the lazy dog 1.125 (rem)
md: The quick brown fox jumps over the lazy dog 1 (rem)
sm: The quick brown fox jumps over the lazy dog 0.9 (rem)
xs: The quick brown fox jumps over the lazy dog 0.8 (rem)
2xs: The quick brown fox jumps over the lazy dog 0.75 (rem)
3xs: The quick brown fox jumps over the lazy dog 0.7 (rem)
4xs: The quick brown fox jumps over the lazy dog 0.65 (rem)

They can be used using a class of font-[sizename], eg. font-sm
or in Sass using @include typescale('[sizename]');, eg. @include typescale('4xl');

As mentioned, headings have two set sizes to utilise 4xl+ at larger screen widths, in __vars/typography you'll see a $headings-smallscreen-map, a $headings-map (for large screens), and something like:

@mixin h3 {
  @include line-height('headings');
  @include typescale(map-get($headings-smallscreen-map, 'h3'));
  font-weight: 500;

  @media (min-width: $breakpoint-largescreen-typography) and (min-height: $breakpoint-largescreen-typography-height) {
    @include typescale(map-get($headings-map, 'h3'));
  }
}

If for example you wanted to create a ludicrously large text element utilising 5xl at desktop, you should do this in Sass, not using HTML classes. Consider something like:

.ludicrously-large-text-element {
  @include typescale('3xl');

  @media (min-width: $breakpoint-largescreen-typography) {
    @include typescale('5xl');
  }
}

Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination. We explore the role of cultural competence in mental health care. Is Culture important? Does it influence mental health? This conversation dives into the importance of cultural competence in mental health care. We will delve into how understanding cultural diversity can improve the quality of mental health services and create a more inclusive and effective support system for all.

We explore the role of cultural competence in mental health care. Is Culture important? Does it influence mental health? This conversation dives into the importance of cultural competence in mental health care. We will delve into how understanding cultural diversity can improve the quality of mental health services and create a more inclusive and effective support system for all.

A Collective of Researchers, Teachers and Practitioners

Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination. This is an emboldened paragraph.

As the leading U.S. school of social work, we are uniquely positioned, and obligated by our social work values, to lead the way in responding to these challenges. Michigan will supply the thought leadership to transform our field in the future. We need to consider how social work will play a role in shaping society’s future, and how do we advocate for sustainable social work careers?

This link goes somewhere, but this sentence doesn't, it only exists to show how a link works. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

£2600 is an amount of money that I've wrapped some <strong> tags around, while 4 weeks – a length of time – also has had the same treatment for the purposes of just testing how typography appears on the page. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Find out how links are made into buttons

Header Level 2

Language is continuously evolving and adapts to societal norms. Changing language can bring awareness to underlying societal issues like biases and discrimination.

Header Level 3

The Resources of U-M, A Top Academic and Research Institution

These are hyperlinks in paragraphs where they're needed the most, right in a demo page.

Header Level 4

Header Level 5

Header Level 6

These are hyperlinks in paragraphs where they're needed the most, right in a demo page. £2600 is an amount of money that I've wrapped some <strong> tags around, while 4 weeks – a length of time – also has had the same treatment for the purposes of just testing how typography appears on the page.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Blockquote

We explore the role of cultural competence in mental health care. Is Culture important? Does it influence mental health? This conversation dives into the importance of cultural competence in mental health care. We will delve into how understanding cultural diversity can improve the quality of mental health services and create a more inclusive and effective support system for all.
Master Quotation Writer, Head of Placeholder Typography

Lists

Unordered

Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
...
...
...
...
...
...
...
Double digit
Double digits
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Double digits with a bit more copy

Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
- Double digit
- Double digits
- Lorem Ipsum is simply dummy text of the printing and typesetting industry
- Double digits with a bit more copy
  - Double digit
  - Double digits
  - Lorem Ipsum is simply dummy text of the printing and typesetting industry
  - Double digits with a bit more copy
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ordered

Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
...
...
...
...
...
...
...
Double digit
Double digits
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Double digits with a bit more copy

Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
1. Double digit
2. Double digits
3. Lorem Ipsum is simply dummy text of the printing and typesetting industry
4. Double digits with a bit more copy
  1. Double digit
  2. Double digits
  3. Lorem Ipsum is simply dummy text of the printing and typesetting industry
  4. Double digits with a bit more copy
Lorem Ipsum is simply dummy text of the printing and typesetting industry
Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.