├── .nvmrc
├── .gitignore
├── .npmrc
├── test
├── data
│ ├── without-large-fonts.scss
│ ├── type-sizes
│ │ ├── canon.scss
│ │ ├── pica.scss
│ │ ├── minion.scss
│ │ ├── brevier.scss
│ │ ├── paragon.scss
│ │ ├── body-copy.scss
│ │ ├── trafalgar.scss
│ │ ├── double-pica.scss
│ │ ├── long-primer.scss
│ │ └── great-primer.scss
│ ├── with-large-fonts.scss
│ └── large-type-sizes
│ │ ├── atlas.scss
│ │ ├── royal.scss
│ │ ├── elephant.scss
│ │ ├── foolscap.scss
│ │ └── imperial.scss
├── vitest-setup.mjs
├── typography.test.js
└── __snapshots__
│ └── typography.test.js.snap
├── prettier.config.mjs
├── _typography.scss
├── CHANGELOG.md
├── src
└── gel-typography.scss
├── vitest.config.mjs
├── .github
└── CODEOWNERS
├── .editorconfig
├── LICENSE.md
├── package.json
├── lib
├── _tools.scss
└── _settings.scss
├── dist
├── gel-typography.min.css
└── gel-typography.css
└── README.md
/.nvmrc:
--------------------------------------------------------------------------------
1 | v22.21.1
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-exact=true
2 | save-prefix=
3 | ignore-scripts=true
4 |
--------------------------------------------------------------------------------
/test/data/without-large-fonts.scss:
--------------------------------------------------------------------------------
1 | @use '../../typography' with (
2 | $gel-type-enable--markup-output: true
3 | );
4 |
--------------------------------------------------------------------------------
/test/data/type-sizes/canon.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .canon {
4 | @include typography.gel-typography('canon');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/pica.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .pica {
4 | @include typography.gel-typography('pica');
5 | }
6 |
--------------------------------------------------------------------------------
/prettier.config.mjs:
--------------------------------------------------------------------------------
1 | export default {
2 | printWidth: 100,
3 | singleQuote: true,
4 | tabWidth: 2,
5 | trailingComma: 'all',
6 | };
7 |
--------------------------------------------------------------------------------
/test/data/type-sizes/minion.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .minion {
4 | @include typography.gel-typography('minion');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/brevier.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .brevier {
4 | @include typography.gel-typography('brevier');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/paragon.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .paragon {
4 | @include typography.gel-typography('paragon');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/body-copy.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .body-copy {
4 | @include typography.gel-typography('body-copy');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/trafalgar.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .trafalgar {
4 | @include typography.gel-typography('trafalgar');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/double-pica.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .double-pica {
4 | @include typography.gel-typography('double-pica');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/long-primer.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .long-primer {
4 | @include typography.gel-typography('long-primer');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/type-sizes/great-primer.scss:
--------------------------------------------------------------------------------
1 | @use '../../../typography';
2 |
3 | .great-primer {
4 | @include typography.gel-typography('great-primer');
5 | }
6 |
--------------------------------------------------------------------------------
/test/data/with-large-fonts.scss:
--------------------------------------------------------------------------------
1 | @use '../../_typography' with (
2 | $gel-type-enable--markup-output: true,
3 | $gel-type-enable--larger-type-sizes: true
4 | );
5 |
--------------------------------------------------------------------------------
/test/data/large-type-sizes/atlas.scss:
--------------------------------------------------------------------------------
1 | @use '../../../_typography' with (
2 | $gel-type-enable--larger-type-sizes: true
3 | );
4 |
5 | .atlas {
6 | @include typography.gel-typography('atlas');
7 | }
8 |
--------------------------------------------------------------------------------
/test/data/large-type-sizes/royal.scss:
--------------------------------------------------------------------------------
1 | @use '../../../_typography' with (
2 | $gel-type-enable--larger-type-sizes: true
3 | );
4 |
5 | .royal {
6 | @include typography.gel-typography('royal');
7 | }
8 |
--------------------------------------------------------------------------------
/test/data/large-type-sizes/elephant.scss:
--------------------------------------------------------------------------------
1 | @use '../../../_typography' with (
2 | $gel-type-enable--larger-type-sizes: true
3 | );
4 |
5 | .elephant {
6 | @include typography.gel-typography('elephant');
7 | }
8 |
--------------------------------------------------------------------------------
/test/data/large-type-sizes/foolscap.scss:
--------------------------------------------------------------------------------
1 | @use '../../../_typography' with (
2 | $gel-type-enable--larger-type-sizes: true
3 | );
4 |
5 | .foolscap {
6 | @include typography.gel-typography('foolscap');
7 | }
8 |
--------------------------------------------------------------------------------
/test/data/large-type-sizes/imperial.scss:
--------------------------------------------------------------------------------
1 | @use '../../../_typography' with (
2 | $gel-type-enable--larger-type-sizes: true
3 | );
4 |
5 | .imperial {
6 | @include typography.gel-typography('imperial');
7 | }
8 |
--------------------------------------------------------------------------------
/test/vitest-setup.mjs:
--------------------------------------------------------------------------------
1 | import * as sass from 'sass';
2 |
3 | global.compileCSS = async (filePath = '') => {
4 | const { css } = await sass.compileAsync(filePath, { loadPaths: ['./node_modules'] });
5 |
6 | return css;
7 | };
8 |
--------------------------------------------------------------------------------
/_typography.scss:
--------------------------------------------------------------------------------
1 | ///*------------------------------------*\
2 | // # GEL TYPOGRAPHY
3 | //\*------------------------------------*/
4 |
5 | // import the local dependancies
6 | @forward 'lib/settings';
7 | @forward 'lib/tools';
8 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 | All notable changes to this project will be documented in this file.
3 |
4 | ## [3.0.0] - 2020-01-22
5 | ### Fixed
6 | - Do not apply letter-spacing when using BBC Reith Font.
7 | - Fix font-size/line-height for Paragon Group C (to match GEL Typography Guideline).
8 |
--------------------------------------------------------------------------------
/src/gel-typography.scss:
--------------------------------------------------------------------------------
1 | ///*------------------------------------*\
2 | // # GEL TYPOGRAPHY
3 | //\*------------------------------------*/
4 |
5 | // Import the typography component
6 | // and enable the output for our distributed code
7 | @use '../typography' with (
8 | $gel-type-enable--markup-output: true
9 | );
10 |
--------------------------------------------------------------------------------
/vitest.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 |
3 | export default defineConfig({
4 | plugins: [],
5 | test: {
6 | clearMocks: true,
7 | coverage: {},
8 | environment: 'jsdom',
9 | exclude: ['**/node_modules/**'],
10 | globals: true,
11 | setupFiles: ['./test/vitest-setup.mjs'],
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | /.github/ @bbc/uxd-admins
2 | /.npmrc @bbc/uxd-admins
3 | /package.json @bbc/uxd-admins
4 | /package-lock.json @bbc/uxd-admins
5 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # For more information about the properties used in
2 | # this file, please see the EditorConfig documentation:
3 | # http://editorconfig.org/
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | charset = utf-8
9 | end_of_line = lf
10 | indent_size = 2
11 | indent_style = space
12 | insert_final_newline = true
13 | trim_trailing_whitespace = true
14 |
15 | [*.md]
16 | trim_trailing_whitespace = false
17 |
18 | [package.json]
19 | # The indent size used in the `package.json` file cannot be changed
20 | # https://github.com/npm/npm/pull/3180#issuecomment-16336516
21 | indent_size = 2
22 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright 2016 British Broadcasting Corporation
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gel-typography",
3 | "version": "6.1.0",
4 | "description": "A flexible code implementation of the GEL Typography",
5 | "main": "_typography.scss",
6 | "scripts": {
7 | "build": "npm run sass:compressed && npm run sass:expanded",
8 | "sass:compressed": "sass --load-path=node_modules/ --style=compressed --no-source-map src/gel-typography.scss dist/gel-typography.min.css",
9 | "sass:expanded": "sass --load-path=node_modules/ --style=expanded --no-source-map src/gel-typography.scss dist/gel-typography.css",
10 | "prettier": "prettier . '!**/*.md' '!dist/**/*' --write",
11 | "test": "npm run prettier && npm run vitest",
12 | "vitest": "vitest run"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "https://github.com/bbc/gel-typography.git"
17 | },
18 | "keywords": [
19 | "bbc",
20 | "gel",
21 | "typography"
22 | ],
23 | "ignore": [
24 | "**/.*",
25 | "node_modules",
26 | "test",
27 | "tests",
28 | "dist",
29 | "src"
30 | ],
31 | "author": "BBC",
32 | "license": "MIT",
33 | "bugs": {
34 | "url": "https://github.com/bbc/gel-typography/issues"
35 | },
36 | "homepage": "https://github.com/bbc/gel-typography",
37 | "devDependencies": {
38 | "jsdom": "27.2.0",
39 | "prettier": "3.7.4",
40 | "sass": "1.94.2",
41 | "vitest": "4.0.15"
42 | },
43 | "dependencies": {
44 | "gel-sass-tools": "4.1.0",
45 | "sass-mq": "7.0.0"
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/test/typography.test.js:
--------------------------------------------------------------------------------
1 | describe('GEL Typography', () => {
2 | it('with large fonts', async () => {
3 | const css = await global.compileCSS('test/data/with-large-fonts.scss');
4 |
5 | expect(css).toMatchSnapshot();
6 | });
7 |
8 | it('without large fonts', async () => {
9 | const css = await global.compileCSS('test/data/without-large-fonts.scss');
10 |
11 | expect(css).toMatchSnapshot();
12 | });
13 |
14 | describe('type sizes', () => {
15 | it('Canon', async () => {
16 | const css = await global.compileCSS('test/data/type-sizes/canon.scss');
17 |
18 | expect(css).toMatchSnapshot();
19 | });
20 |
21 | it('Trafalgar', async () => {
22 | const css = await global.compileCSS('test/data/type-sizes/trafalgar.scss');
23 |
24 | expect(css).toMatchSnapshot();
25 | });
26 |
27 | it('Paragon', async () => {
28 | const css = await global.compileCSS('test/data/type-sizes/paragon.scss');
29 |
30 | expect(css).toMatchSnapshot();
31 | });
32 |
33 | it('Double Pica', async () => {
34 | const css = await global.compileCSS('test/data/type-sizes/double-pica.scss');
35 |
36 | expect(css).toMatchSnapshot();
37 | });
38 |
39 | it('Great Primer', async () => {
40 | const css = await global.compileCSS('test/data/type-sizes/great-primer.scss');
41 |
42 | expect(css).toMatchSnapshot();
43 | });
44 |
45 | it('Body Copy', async () => {
46 | const css = await global.compileCSS('test/data/type-sizes/body-copy.scss');
47 |
48 | expect(css).toMatchSnapshot();
49 | });
50 |
51 | it('Pica', async () => {
52 | const css = await global.compileCSS('test/data/type-sizes/pica.scss');
53 |
54 | expect(css).toMatchSnapshot();
55 | });
56 |
57 | it('Long Primer', async () => {
58 | const css = await global.compileCSS('test/data/type-sizes/long-primer.scss');
59 |
60 | expect(css).toMatchSnapshot();
61 | });
62 |
63 | it('Brevier', async () => {
64 | const css = await global.compileCSS('test/data/type-sizes/brevier.scss');
65 |
66 | expect(css).toMatchSnapshot();
67 | });
68 |
69 | it('Minion', async () => {
70 | const css = await global.compileCSS('test/data/type-sizes/minion.scss');
71 |
72 | expect(css).toMatchSnapshot();
73 | });
74 | });
75 |
76 | describe('larger type sizes', () => {
77 | it('Atlas', async () => {
78 | const css = await global.compileCSS('test/data/large-type-sizes/atlas.scss');
79 |
80 | expect(css).toMatchSnapshot();
81 | });
82 |
83 | it('Elephant', async () => {
84 | const css = await global.compileCSS('test/data/large-type-sizes/elephant.scss');
85 |
86 | expect(css).toMatchSnapshot();
87 | });
88 |
89 | it('Imperial', async () => {
90 | const css = await global.compileCSS('test/data/large-type-sizes/imperial.scss');
91 |
92 | expect(css).toMatchSnapshot();
93 | });
94 |
95 | it('Royal', async () => {
96 | const css = await global.compileCSS('test/data/large-type-sizes/royal.scss');
97 |
98 | expect(css).toMatchSnapshot();
99 | });
100 |
101 | it('Foolscap', async () => {
102 | const css = await global.compileCSS('test/data/large-type-sizes/foolscap.scss');
103 |
104 | expect(css).toMatchSnapshot();
105 | });
106 | });
107 | });
108 |
--------------------------------------------------------------------------------
/lib/_tools.scss:
--------------------------------------------------------------------------------
1 | @use 'sass-mq/mq';
2 | @use 'gel-sass-tools/sass-tools';
3 | @use 'settings';
4 | @use 'sass:map';
5 | @use 'sass:math';
6 | @use 'sass:meta';
7 | @use 'sass:string';
8 |
9 | ///*------------------------------------*\
10 | // # GEL TYPOGRAPHY - TOOL
11 | //\*------------------------------------*/
12 |
13 | // If larger font sizes enable, merge them with gel-type-settings
14 | @if settings.$gel-type-enable--larger-type-sizes {
15 | settings.$gel-type-settings: map.merge(
16 | settings.$gel-type-settings,
17 | settings.$gel-larger-font-sizes
18 | );
19 | }
20 |
21 | // Replace `$search` with `$replace` in `$string`
22 | //
23 | // @param {String} $string - Initial string
24 | // @param {String} $search - Substring to replace
25 | // @param {String} $replace ('') - New value
26 | //
27 | // @access private
28 | //
29 | // @return {String} - Updated string
30 | //
31 | // @author Hugo Giraudel
32 | // @link http://bit.ly/1Khge01
33 | //
34 | @function _gel-str-replace($string, $search, $replace: '') {
35 | $index: string.index($string, $search);
36 |
37 | @if $index {
38 | @return string.slice($string, 1, $index - 1) + $replace +
39 | _gel-str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
40 | }
41 |
42 | @return $string;
43 | }
44 |
45 | // Combine the the value of two Sass maps
46 | //
47 | // @param {Map} $source - The orignal Sass map
48 | // @param {Map} $map - Sass map containing the new values to be combined
49 | //
50 | // @access private
51 | //
52 | // @return {Map} - New map consistenting of the values of both supplied maps
53 | //
54 | // @author Hugo Giraudel
55 | // @link http://bit.ly/1PPIoj4
56 | //
57 | @function _gel-map-combine($source, $map) {
58 | @each $key, $value in $map {
59 | $new: (
60 | $key: $value,
61 | );
62 |
63 | @if map.has-key($source, $key) {
64 | $current: map.get($source, $key);
65 | $new: (
66 | $key: map.merge($current, $value),
67 | );
68 | }
69 |
70 | $source: map.merge($source, $new);
71 | }
72 |
73 | @return $source;
74 | }
75 |
76 | // Return the type settings for the requested type class/type group. If a bold variant is
77 | // requested the bold type values will be combined with the type values of the non-bold
78 | // variant.
79 | //
80 | // @param {String} $type-class - name of the type class you want the settings for (e.g. pica)
81 | // @param {String} $type-group (all) - which type group you want the values for (e.g. group-a)
82 | //
83 | // @returns {Map} - a map of the type settings for the requested type class/type group
84 | //
85 | // @author Shaun Bent
86 | // @author Adam Bulmer
87 | //
88 | @function gel-typography($type-class, $type-group: 'all') {
89 | $type-settings: map.get(settings.$gel-type-settings, $type-class);
90 |
91 | @if (string.index($type-class, '-bold')) {
92 | $root-type-group: map.get(settings.$gel-type-settings, _gel-str-replace($type-class, '-bold'));
93 | $type-settings: _gel-map-combine($root-type-group, $type-settings);
94 | }
95 |
96 | @if ($type-group != 'all') {
97 | @return map.get($type-settings, $type-group);
98 | }
99 |
100 | @return $type-settings;
101 | }
102 |
103 | // Output the type values for the requested type class (e.g pica). This will return all required media
104 | // queries and no-touch fallbacks
105 | //
106 | // @param {String} $type-class - name of the type class to output the values for
107 | //
108 | // @author Shaun Bent
109 | // @author Adam Bulmer
110 | //
111 | @mixin gel-typography($type-class) {
112 | $groupA: gel-typography($type-class, 'group-a');
113 | @include _gel-output-type-values($groupA);
114 | @include reith-letter-spacing($groupA);
115 |
116 | @include mq.mq($from: gel-bp-type-b) {
117 | $groupB: gel-typography($type-class, 'group-b');
118 | @include _gel-output-type-values($groupB);
119 | @include reith-letter-spacing($groupB);
120 | }
121 |
122 | @include mq.mq($from: gel-bp-type-c) {
123 | $groupC: gel-typography($type-class, 'group-c');
124 | @include _gel-output-type-values($groupC);
125 | @include reith-letter-spacing($groupC);
126 |
127 | .#{settings.$gel-type-touch-class} & {
128 | $groupNoTouch: gel-typography($type-class, settings.$gel-type-no-touch-group);
129 | @include _gel-output-type-values($groupNoTouch);
130 | @include reith-letter-spacing($groupNoTouch);
131 | }
132 | }
133 | }
134 |
135 | // Loop through a supplied Sass map and return each key/value as CSS properties
136 | // and values. Any `px` value will be automatically passed to the `toRem` tool
137 | //
138 | // @param {Map} $type-values - a map of CSS values in property: value format
139 | //
140 | // @access private
141 | //
142 | // @author Shaun Bent
143 | // @author Adam Bulmer
144 | //
145 | @mixin _gel-output-type-values($type-values) {
146 | @each $property, $value in $type-values {
147 | @if (meta.type-of($value) == number and math.unit($value) == 'px') {
148 | @include sass-tools.toRem($property, $value);
149 | } @else {
150 | #{$property}: $value;
151 | }
152 | }
153 | }
154 |
155 | @mixin reith-letter-spacing($type-settings) {
156 | @if (meta.type-of($type-settings) == 'map') {
157 | @if map.has-key($type-settings, 'letter-spacing') {
158 | .b-reith-sans-loaded &,
159 | .b-reith-serif-loaded & {
160 | letter-spacing: normal;
161 | }
162 | }
163 | }
164 | }
165 |
166 | // Output the typography styles for the 4 groups
167 | @if settings.$gel-type-enable--markup-output {
168 | @each $type-class, $type-values in settings.$gel-type-settings {
169 | .#{settings.$gel-type-namespace}#{$type-class},
170 | %#{settings.$gel-type-namespace}#{$type-class} {
171 | @include gel-typography($type-class);
172 | }
173 | }
174 | }
175 |
176 | @if settings.$gel-type-enable--font-family {
177 | // Barlesque will set the correct font-family on the tag but if you're working on a project
178 | // without Barlesque you might want to enable this flag
179 | //
180 | body {
181 | font-family: Helvetica, Arial, freesans, sans-serif;
182 | }
183 | }
184 |
185 | @if settings.$gel-type-enable--base-elements {
186 | // Map the GEL Typography classes to the relevant HTML elements
187 | //
188 | h1 {
189 | @extend %#{settings.$gel-type-namespace}trafalgar;
190 | }
191 | h2 {
192 | @extend %#{settings.$gel-type-namespace}double-pica;
193 | }
194 | h3 {
195 | @extend %#{settings.$gel-type-namespace}great-primer;
196 | }
197 | h4 {
198 | @extend %#{settings.$gel-type-namespace}pica;
199 | }
200 | }
201 |
--------------------------------------------------------------------------------
/dist/gel-typography.min.css:
--------------------------------------------------------------------------------
1 | .gel-canon{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem}@media(min-width: 20em){.gel-canon{font-size:32px;font-size:2rem;line-height:36px;line-height:2.25rem}}@media(min-width: 37.5em){.gel-canon{font-size:52px;font-size:3.25rem;line-height:56px;line-height:3.5rem}.no-touch .gel-canon{font-size:44px;font-size:2.75rem;line-height:48px;line-height:3rem}}.gel-canon-bold{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem;font-weight:bold;letter-spacing:-1px;letter-spacing:-0.0625rem}.b-reith-sans-loaded .gel-canon-bold,.b-reith-serif-loaded .gel-canon-bold{letter-spacing:normal}@media(min-width: 20em){.gel-canon-bold{font-size:32px;font-size:2rem;line-height:36px;line-height:2.25rem}}@media(min-width: 37.5em){.gel-canon-bold{font-size:52px;font-size:3.25rem;line-height:56px;line-height:3.5rem}.no-touch .gel-canon-bold{font-size:44px;font-size:2.75rem;line-height:48px;line-height:3rem}}.gel-trafalgar{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem}@media(min-width: 20em){.gel-trafalgar{font-size:24px;font-size:1.5rem;line-height:28px;line-height:1.75rem}}@media(min-width: 37.5em){.gel-trafalgar{font-size:36px;font-size:2.25rem;line-height:40px;line-height:2.5rem}.no-touch .gel-trafalgar{font-size:32px;font-size:2rem;line-height:36px;line-height:2.25rem}}.gel-trafalgar-bold{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem;font-weight:bold;letter-spacing:-1px;letter-spacing:-0.0625rem}.b-reith-sans-loaded .gel-trafalgar-bold,.b-reith-serif-loaded .gel-trafalgar-bold{letter-spacing:normal}@media(min-width: 20em){.gel-trafalgar-bold{font-size:24px;font-size:1.5rem;line-height:28px;line-height:1.75rem}}@media(min-width: 37.5em){.gel-trafalgar-bold{font-size:36px;font-size:2.25rem;line-height:40px;line-height:2.5rem}.no-touch .gel-trafalgar-bold{font-size:32px;font-size:2rem;line-height:36px;line-height:2.25rem}}.gel-paragon{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem}@media(min-width: 20em){.gel-paragon{font-size:22px;font-size:1.375rem;line-height:26px;line-height:1.625rem}}@media(min-width: 37.5em){.gel-paragon{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem}.no-touch .gel-paragon{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem}}.gel-paragon-bold{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem;font-weight:bold;letter-spacing:-1px;letter-spacing:-0.0625rem}.b-reith-sans-loaded .gel-paragon-bold,.b-reith-serif-loaded .gel-paragon-bold{letter-spacing:normal}@media(min-width: 20em){.gel-paragon-bold{font-size:22px;font-size:1.375rem;line-height:26px;line-height:1.625rem}}@media(min-width: 37.5em){.gel-paragon-bold{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem}.no-touch .gel-paragon-bold{font-size:28px;font-size:1.75rem;line-height:32px;line-height:2rem}}.gel-double-pica{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem}@media(min-width: 37.5em){.gel-double-pica{font-size:26px;font-size:1.625rem;line-height:30px;line-height:1.875rem}.no-touch .gel-double-pica{font-size:24px;font-size:1.5rem;line-height:28px;line-height:1.75rem}}.gel-double-pica-bold{font-size:20px;font-size:1.25rem;line-height:24px;line-height:1.5rem;font-weight:bold;letter-spacing:-1px;letter-spacing:-0.0625rem}.b-reith-sans-loaded .gel-double-pica-bold,.b-reith-serif-loaded .gel-double-pica-bold{letter-spacing:normal}@media(min-width: 37.5em){.gel-double-pica-bold{font-size:26px;font-size:1.625rem;line-height:30px;line-height:1.875rem}.no-touch .gel-double-pica-bold{font-size:24px;font-size:1.5rem;line-height:28px;line-height:1.75rem}}.gel-great-primer{font-size:18px;font-size:1.125rem;line-height:22px;line-height:1.375rem}@media(min-width: 37.5em){.gel-great-primer{font-size:21px;font-size:1.3125rem;line-height:24px;line-height:1.5rem}.no-touch .gel-great-primer{font-size:20px;font-size:1.25rem}}.gel-great-primer-bold{font-size:18px;font-size:1.125rem;line-height:22px;line-height:1.375rem;font-weight:bold}@media(min-width: 20em){.gel-great-primer-bold{letter-spacing:-1px;letter-spacing:-0.0625rem}.b-reith-sans-loaded .gel-great-primer-bold,.b-reith-serif-loaded .gel-great-primer-bold{letter-spacing:normal}}@media(min-width: 37.5em){.gel-great-primer-bold{font-size:21px;font-size:1.3125rem;line-height:24px;line-height:1.5rem}.no-touch .gel-great-primer-bold{font-size:20px;font-size:1.25rem}}.gel-pica{font-size:15px;font-size:.9375rem;line-height:20px;line-height:1.25rem}@media(min-width: 20em){.gel-pica{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}}@media(min-width: 37.5em){.gel-pica{font-size:18px;font-size:1.125rem;line-height:22px;line-height:1.375rem}.no-touch .gel-pica{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}}.gel-pica-bold{font-size:15px;font-size:.9375rem;line-height:20px;line-height:1.25rem;font-weight:bold}@media(min-width: 20em){.gel-pica-bold{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}}@media(min-width: 37.5em){.gel-pica-bold{font-size:18px;font-size:1.125rem;line-height:22px;line-height:1.375rem}.no-touch .gel-pica-bold{font-size:16px;font-size:1rem;line-height:20px;line-height:1.25rem}}.gel-long-primer{font-size:15px;font-size:.9375rem;line-height:18px;line-height:1.125rem}@media(min-width: 37.5em){.gel-long-primer{line-height:20px;line-height:1.25rem}.no-touch .gel-long-primer{font-size:14px;font-size:.875rem;line-height:18px;line-height:1.125rem}}.gel-long-primer-bold{font-size:15px;font-size:.9375rem;line-height:18px;line-height:1.125rem;font-weight:bold}@media(min-width: 37.5em){.gel-long-primer-bold{line-height:20px;line-height:1.25rem}.no-touch .gel-long-primer-bold{font-size:14px;font-size:.875rem;line-height:18px;line-height:1.125rem}}.gel-brevier{font-size:14px;font-size:.875rem;line-height:16px;line-height:1rem}@media(min-width: 20em){.gel-brevier{line-height:18px;line-height:1.125rem}}@media(min-width: 37.5em){.no-touch .gel-brevier{font-size:13px;font-size:.8125rem;line-height:16px;line-height:1rem}}.gel-brevier-bold{font-size:14px;font-size:.875rem;line-height:16px;line-height:1rem;font-weight:bold}@media(min-width: 20em){.gel-brevier-bold{line-height:18px;line-height:1.125rem}}@media(min-width: 37.5em){.no-touch .gel-brevier-bold{font-size:13px;font-size:.8125rem;line-height:16px;line-height:1rem}}.gel-minion{font-size:12px;font-size:.75rem;line-height:16px;line-height:1rem;text-transform:uppercase}@media(min-width: 37.5em){.gel-minion{font-size:13px;font-size:.8125rem}.no-touch .gel-minion{font-size:12px;font-size:.75rem}}.gel-minion-bold{font-size:12px;font-size:.75rem;line-height:16px;line-height:1rem;text-transform:uppercase;font-weight:bold}@media(min-width: 37.5em){.gel-minion-bold{font-size:13px;font-size:.8125rem}.no-touch .gel-minion-bold{font-size:12px;font-size:.75rem}}.gel-body-copy{font-size:15px;font-size:.9375rem;line-height:20px;line-height:1.25rem}@media(min-width: 20em){.gel-body-copy{font-size:16px;font-size:1rem;line-height:22px;line-height:1.375rem}}@media(min-width: 37.5em){.gel-body-copy{font-size:18px;font-size:1.125rem;line-height:24px;line-height:1.5rem}.no-touch .gel-body-copy{font-size:16px;font-size:1rem;line-height:22px;line-height:1.375rem}}
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | GEL Typography
2 |
3 | A flexible code implementation of the GEL Typography.
4 | Forms part of the GEL Foundations
5 |
6 |
7 | ## Breaking Change: v6.0.0
8 |
9 | v6.0.0 of GEL Typography implements the [@use](https://sass-lang.com/documentation/at-rules/use/) and [@forward](https://sass-lang.com/documentation/at-rules/forward/) approach and removes [@import](https://sass-lang.com/documentation/at-rules/import/).
10 |
11 | This has a number of consequences; how modules are loaded, and how to access variables. Namespaces now come into play, so please read the sass documentation links above to learn more.
12 |
13 | Previously, the properties output from this module could be controlled via three variables: $core, $enhanced and $fixed. These three variables allowed for control of the output, where core functionality could be separated out from enhanced functionality (for more advanced browsers) and for Internet Explorer (fixed).
14 |
15 | As browsers have moved on significantly since this approach was adopted it is considered a good time to remove this functionality.
16 |
17 | For usage of GEL Typography prior to v6.0.0 please reference the [v5.2.0 readme](https://github.com/bbc/gel-typography/tree/5.2.0).
18 |
19 |
20 | ## What is this?
21 |
22 | An implementation of the [GEL Typography Guidelines](http://www.bbc.co.uk/gel/guidelines/typography).
23 | Providing typefaces, type sizes, weights, line-heights and tracking.
24 | The GEL Typography scale has been established to work on all devices and is independent of device size and resolution.
25 |
26 | The typographic scale has been optimised based on the size of the viewport and the input method being used. We take a 'touch first' approach to typography, adjustments are then made if a primary input other than touch has been detected.
27 |
28 | It can used in two forms, using a Sass mixin:
29 |
30 | ```scss
31 | @use 'gel-typography/typography' as type;
32 |
33 | .my-component {
34 | @include type.gel-typography('canon-bold');
35 | }
36 | ```
37 |
38 | Or by simply adding the relevant classes to your markup:
39 |
40 | ```html
41 | Global Experience Language
42 | ```
43 |
44 | ## Installation
45 |
46 | The easiest way to get started with the GEL Typography component is to use the combined version of the typography included within this repository.
47 |
48 | If you're a more advanced user and want to integrate the GEL Typography component within your codebase, use one of the following options:
49 |
50 | ### Install using NPM
51 |
52 | ```bash
53 | $ npm install --save gel-typography
54 | ```
55 |
56 | ```sass
57 | // your-app/main.scss
58 | @use 'gel-typography/typography';
59 | ```
60 |
61 | ### Install manually
62 |
63 | You can install this component manually by downloading the content of this Git repo into your project and use a Sass @use to include it in your project.
64 |
65 | > **Note:** you will manually need to manage the dependencies below, without these this component will fail to compile.
66 |
67 | ### Loadpaths
68 |
69 | Because this module depends on other modules, [GEL Sass Tools](https://github.com/bbc/gel-sass-tools) and [Sass MQ](https://github.com/sass-mq/sass-mq), when compiling your Sass it needs to know where find the referenced modules. It does this via a [loadPath](https://sass-lang.com/documentation/at-rules/use/#load-paths).
70 |
71 | If compiling from the command line you can specify:
72 | ```
73 | sass --load-path=node_modules/
74 | ```
75 |
76 | With nodejs you can call `compile` or `compileAsync`:
77 | ```js
78 | await sass.compileAsync(file, { loadPaths: ['./node_modules'] })
79 | ```
80 |
81 | This ensures the dependencies can be loaded correctly.
82 |
83 |
84 | ## Usage
85 |
86 | By default the GEL Typography component does not output any markup but exposes a Sass Mixin which can be called within your Sass.
87 |
88 | **Example**
89 |
90 | ```scss
91 | @use 'gel-typography/typography' as type;
92 |
93 | .my-component {
94 | @include type.gel-typography('pica');
95 | }
96 |
97 | .my-component__title {
98 | @include type.gel-typography('canon');
99 | }
100 | ```
101 |
102 | A collection of typography classes can be output by defining `$gel-type-enable--markup-output: true;` as you `@use` the typography partial.
103 |
104 | **Example:**
105 |
106 | ```scss
107 | @use "gel-typography/typography" as type with ($gel-type-enable--markup-output: true);
108 | ```
109 |
110 | The following configurable options are available:
111 |
112 | ### General Configuration
113 |
114 | - `$gel-type-namespace: 'gel-';` - the default namespace applied to all typography classes
115 | - `$gel-type-touch-class: 'no-touch';` - the class exposed used by your touch detection script applied when a non-touch interface is detected
116 |
117 | ### Output Configuration
118 |
119 | - `$gel-type-enable--markup-output: false;` - output a collection of classes for each type group
120 | - `$gel-type-enable--font-family: false;` - output the correct font-family required by GEL Typography, required if the BBC's global header and footer, Barlesque, is not available.
121 | - `$gel-type-enable--base-elements: false;` - map the GEL Typography classes to the relevant HTML elements
122 |
123 | ### Custom Font Configuration
124 |
125 | If you're using another font-face other than Arial and need to make adjustments to any of the type settings you can do this by defining in a custom `$gel-type-settings` map.
126 |
127 | *For example:* [BBC News](http://www.bbc.com/burmese) support many languages, some of which do not use latin based character sets which require custom font scripts. It is often the case that these custom fonts will require bespoke font-sizes or line-heights.
128 |
129 | For example, the configuration for Burmese may look like:
130 |
131 | ```scss
132 | $gel-type-settings: (
133 | 'trafalgar': (
134 | 'group-a': (
135 | 'font-size': 22px,
136 | 'line-height': 30px,
137 | ),
138 | 'group-b': (
139 | 'font-size': 26px,
140 | 'line-height': 36px
141 | ),
142 | 'group-c': (
143 | 'font-size': 38px,
144 | 'line-height': 50px
145 | ),
146 | 'group-d': (
147 | 'font-size': 32px,
148 | 'line-height': 32px
149 | )
150 | ),
151 | 'trafalgar-bold': (
152 | ...
153 | )
154 | );
155 | ```
156 |
157 | ## Touch Detection
158 |
159 | We operate a [touch-first](http://www.bbc.co.uk/gel/guidelines/how-to-design-for-touch) approach to our Typography. Group C (touch) sizes are used from 600px by default and then detection should be used to get the Group D (non-touch) sizes.
160 |
161 | We also understand that touch detection is not an absolute measure and does not guarantee a 'true or false' outcome - this is okay.
162 |
163 | ### Why not just have Group C and remove Group D?
164 |
165 | Products such as News & Sport require more densely packed, legacy-like font sizes for their 'desktop' experience. Eventually we aim to remove this group altogether.
166 |
167 | ### How can you detect touch
168 |
169 | There are a number of ways you can apply the touch detection. [Modernizr](https://modernizr.com), the common feature detection library offers some basic touch events detection. Alternatively, you could use your own bespoke detection script like this one used by [BBC Sport](https://github.com/bbc/onesport/blob/master/webapp/static-versioned/js/features.js#L5-L24).
170 |
171 | ## Who is using this?
172 |
173 | The following teams are currently using this component: GEL, News, Sport, Live, Homepage, Search, BBC Food, CBBC, CBeebies, BBC Three, MyBBC, K&L, Taster, Academy, Travel & Weather, BBC Music, BBC Subtitle Guidelines
174 |
175 | If your team is using this component, let us know and we'll add you to the list.
176 |
177 | ## Credits
178 |
179 | - [Shaun Bent](https://twitter.com/shaunbent)
180 | - [Al Jones](https://twitter.com/Itsaljones)
181 | - [Nikos Tsouknidas](https://twitter.com/tsoukn)
182 |
183 | ## Maintainers
184 |
185 | - [Sean Carroll](https://github.com/randombitsUK/)
186 |
187 |
188 | ## License
189 |
190 | > The MIT License (MIT)
191 | >
192 | > Copyright 2016 British Broadcasting Corporation
193 | >
194 | > Permission is hereby granted, free of charge, to any person obtaining a copy of
195 | > this software and associated documentation files (the "Software"), to deal in
196 | > the Software without restriction, including without limitation the rights to
197 | > use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
198 | > the Software, and to permit persons to whom the Software is furnished to do so,
199 | > subject to the following conditions:
200 | >
201 | > The above copyright notice and this permission notice shall be included in all
202 | > copies or substantial portions of the Software.
203 | >
204 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
205 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
206 | > FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
207 | > COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
208 | > IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
209 | > CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
210 |
--------------------------------------------------------------------------------
/lib/_settings.scss:
--------------------------------------------------------------------------------
1 | @use 'sass-mq/mq';
2 | @use 'gel-sass-tools/sass-tools';
3 |
4 | ///*------------------------------------*\
5 | // # GEL TYPOGRAPHY - SETTINGS
6 | //\*------------------------------------*/
7 |
8 | // The following variables are used to configure the GEL Typography component.
9 | // These variables should not be modified or adjusted directly; you should
10 | // predefine the variables in your own project, to overide these default settings.
11 |
12 | /// General configuration
13 | //
14 | // The default namespace applied to all typography classes output is inherits
15 | // from the default gel-namespace: `gel-`.
16 | //
17 | // @type String
18 | // @link http://bit.ly/1Z6hPfd
19 | //
20 | $gel-type-namespace: sass-tools.$gel-namespace !default;
21 |
22 | // The classname used to signify if the device needs to display the no-touch group. This
23 | // class needs to be applied to high level elemet such as `body` or `html`
24 | //
25 | // @type String
26 | //
27 | $gel-type-touch-class: 'no-touch' !default;
28 |
29 | // Which typography group contains the base or core typography styles
30 | //
31 | // @type String
32 | //
33 | $gel-type-base-group: 'group-a';
34 |
35 | // Which typography group contains our non-touch typography styles
36 | //
37 | // @type String
38 | //
39 | $gel-type-no-touch-group: 'group-d';
40 |
41 | /// Output configuration
42 | //
43 | // By default the typography component has no output and just exposes a
44 | // series of Sass mixins and tools. Enabling this option will output
45 | // a series of typography classes to be used within your markup.
46 | //
47 | // @type Bool
48 | //
49 | $gel-type-enable--markup-output: false !default;
50 |
51 | // The BBCs global header and footer, Barlesque, will set the correct font-family
52 | // on the tag but if you're working on a project without Barlesque will need
53 | // to enable this flag to have the correct font-family declared
54 | //
55 | // @type Bool
56 | //
57 | $gel-type-enable--font-family: false !default;
58 |
59 | // Map the GEL Typography classes to the relevant HTML elements
60 | //
61 | // @type Bool
62 | //
63 | $gel-type-enable--base-elements: false !default;
64 |
65 | // Map the larger GEL typography with the default gel-type-settings
66 | //
67 | // @type Bool
68 | //
69 | $gel-type-enable--larger-type-sizes: false !default;
70 |
71 | // The GEL typography specification for each type class at each type group.
72 | // Having these values stored in a map allows them to be easily updated and
73 | // customised for specific non-latin character sets.
74 | //
75 | // @type Map
76 | //
77 | $gel-type-settings: (
78 | 'canon': (
79 | 'group-a': (
80 | 'font-size': 28px,
81 | 'line-height': 32px,
82 | ),
83 | 'group-b': (
84 | 'font-size': 32px,
85 | 'line-height': 36px,
86 | ),
87 | 'group-c': (
88 | 'font-size': 52px,
89 | 'line-height': 56px,
90 | ),
91 | 'group-d': (
92 | 'font-size': 44px,
93 | 'line-height': 48px,
94 | ),
95 | ),
96 | 'canon-bold': (
97 | 'group-a': (
98 | 'font-weight': bold,
99 | 'letter-spacing': -1px,
100 | ),
101 | ),
102 | 'trafalgar': (
103 | 'group-a': (
104 | 'font-size': 20px,
105 | 'line-height': 24px,
106 | ),
107 | 'group-b': (
108 | 'font-size': 24px,
109 | 'line-height': 28px,
110 | ),
111 | 'group-c': (
112 | 'font-size': 36px,
113 | 'line-height': 40px,
114 | ),
115 | 'group-d': (
116 | 'font-size': 32px,
117 | 'line-height': 36px,
118 | ),
119 | ),
120 | 'trafalgar-bold': (
121 | 'group-a': (
122 | 'font-weight': bold,
123 | 'letter-spacing': -1px,
124 | ),
125 | ),
126 | 'paragon': (
127 | 'group-a': (
128 | 'font-size': 20px,
129 | 'line-height': 24px,
130 | ),
131 | 'group-b': (
132 | 'font-size': 22px,
133 | 'line-height': 26px,
134 | ),
135 | 'group-c': (
136 | 'font-size': 28px,
137 | 'line-height': 32px,
138 | ),
139 | 'group-d': (
140 | 'font-size': 28px,
141 | 'line-height': 32px,
142 | ),
143 | ),
144 | 'paragon-bold': (
145 | 'group-a': (
146 | 'font-weight': bold,
147 | 'letter-spacing': -1px,
148 | ),
149 | ),
150 | 'double-pica': (
151 | 'group-a': (
152 | 'font-size': 20px,
153 | 'line-height': 24px,
154 | ),
155 | 'group-c': (
156 | 'font-size': 26px,
157 | 'line-height': 30px,
158 | ),
159 | 'group-d': (
160 | 'font-size': 24px,
161 | 'line-height': 28px,
162 | ),
163 | ),
164 | 'double-pica-bold': (
165 | 'group-a': (
166 | 'font-weight': bold,
167 | 'letter-spacing': -1px,
168 | ),
169 | ),
170 | 'great-primer': (
171 | 'group-a': (
172 | 'font-size': 18px,
173 | 'line-height': 22px,
174 | ),
175 | 'group-c': (
176 | 'font-size': 21px,
177 | 'line-height': 24px,
178 | ),
179 | 'group-d': (
180 | 'font-size': 20px,
181 | ),
182 | ),
183 | 'great-primer-bold': (
184 | 'group-a': (
185 | 'font-weight': bold,
186 | ),
187 | 'group-b': (
188 | 'letter-spacing': -1px,
189 | ),
190 | ),
191 | 'pica': (
192 | 'group-a': (
193 | 'font-size': 15px,
194 | 'line-height': 20px,
195 | ),
196 | 'group-b': (
197 | 'font-size': 16px,
198 | 'line-height': 20px,
199 | ),
200 | 'group-c': (
201 | 'font-size': 18px,
202 | 'line-height': 22px,
203 | ),
204 | 'group-d': (
205 | 'font-size': 16px,
206 | 'line-height': 20px,
207 | ),
208 | ),
209 | 'pica-bold': (
210 | 'group-a': (
211 | 'font-weight': bold,
212 | ),
213 | ),
214 | 'long-primer': (
215 | 'group-a': (
216 | 'font-size': 15px,
217 | 'line-height': 18px,
218 | ),
219 | 'group-c': (
220 | 'line-height': 20px,
221 | ),
222 | 'group-d': (
223 | 'font-size': 14px,
224 | 'line-height': 18px,
225 | ),
226 | ),
227 | 'long-primer-bold': (
228 | 'group-a': (
229 | 'font-weight': bold,
230 | ),
231 | ),
232 | 'brevier': (
233 | 'group-a': (
234 | 'font-size': 14px,
235 | 'line-height': 16px,
236 | ),
237 | 'group-b': (
238 | 'line-height': 18px,
239 | ),
240 | 'group-d': (
241 | 'font-size': 13px,
242 | 'line-height': 16px,
243 | ),
244 | ),
245 | 'brevier-bold': (
246 | 'group-a': (
247 | 'font-weight': bold,
248 | ),
249 | ),
250 | 'minion': (
251 | 'group-a': (
252 | 'font-size': 12px,
253 | 'line-height': 16px,
254 | 'text-transform': uppercase,
255 | ),
256 | 'group-c': (
257 | 'font-size': 13px,
258 | ),
259 | 'group-d': (
260 | 'font-size': 12px,
261 | ),
262 | ),
263 | 'minion-bold': (
264 | 'group-a': (
265 | 'font-weight': bold,
266 | ),
267 | ),
268 | 'body-copy': (
269 | 'group-a': (
270 | 'font-size': 15px,
271 | 'line-height': 20px,
272 | ),
273 | 'group-b': (
274 | 'font-size': 16px,
275 | 'line-height': 22px,
276 | ),
277 | 'group-c': (
278 | 'font-size': 18px,
279 | 'line-height': 24px,
280 | ),
281 | 'group-d': (
282 | 'font-size': 16px,
283 | 'line-height': 22px,
284 | ),
285 | ),
286 | ) !default;
287 |
288 | $gel-larger-font-sizes: (
289 | // Additional type sizes for larger contexts
290 | 'atlas': (
291 | 'group-a': (
292 | 'font-size': 78px,
293 | 'line-height': 84px,
294 | ),
295 | 'group-b': (
296 | 'font-size': 96px,
297 | 'line-height': 104px,
298 | ),
299 | 'group-c': (
300 | 'font-size': 192px,
301 | 'line-height': 208px,
302 | ),
303 | 'group-d': (
304 | 'font-size': 140px,
305 | 'line-height': 148px,
306 | ),
307 | ),
308 | 'atlas-bold': (
309 | 'group-a': (
310 | 'font-weight': bold,
311 | 'letter-spacing': -1px,
312 | ),
313 | ),
314 | 'elephant': (
315 | 'group-a': (
316 | 'font-size': 60px,
317 | 'line-height': 64px,
318 | ),
319 | 'group-b': (
320 | 'font-size': 78px,
321 | 'line-height': 84px,
322 | ),
323 | 'group-c': (
324 | 'font-size': 156px,
325 | 'line-height': 170px,
326 | ),
327 | 'group-d': (
328 | 'font-size': 116px,
329 | 'line-height': 124px,
330 | ),
331 | ),
332 | 'elephant-bold': (
333 | 'group-a': (
334 | 'font-weight': bold,
335 | 'letter-spacing': -1px,
336 | ),
337 | ),
338 | 'imperial': (
339 | 'group-a': (
340 | 'font-size': 50px,
341 | 'line-height': 54px,
342 | ),
343 | 'group-b': (
344 | 'font-size': 64px,
345 | 'line-height': 72px,
346 | ),
347 | 'group-c': (
348 | 'font-size': 124px,
349 | 'line-height': 136px,
350 | ),
351 | 'group-d': (
352 | 'font-size': 96px,
353 | 'line-height': 104px,
354 | ),
355 | ),
356 | 'imperial-bold': (
357 | 'group-a': (
358 | 'font-weight': bold,
359 | 'letter-spacing': -1px,
360 | ),
361 | ),
362 | 'royal': (
363 | 'group-a': (
364 | 'font-size': 40px,
365 | 'line-height': 44px,
366 | ),
367 | 'group-b': (
368 | 'font-size': 52px,
369 | 'line-height': 60px,
370 | ),
371 | 'group-c': (
372 | 'font-size': 94px,
373 | 'line-height': 104px,
374 | ),
375 | 'group-d': (
376 | 'font-size': 76px,
377 | 'line-height': 84px,
378 | ),
379 | ),
380 | 'royal-bold': (
381 | 'group-a': (
382 | 'font-weight': bold,
383 | 'letter-spacing': -1px,
384 | ),
385 | ),
386 | 'foolscap': (
387 | 'group-a': (
388 | 'font-size': 32px,
389 | 'line-height': 36px,
390 | ),
391 | 'group-b': (
392 | 'font-size': 40px,
393 | 'line-height': 44px,
394 | ),
395 | 'group-c': (
396 | 'font-size': 72px,
397 | 'line-height': 80px,
398 | ),
399 | 'group-d': (
400 | 'font-size': 56px,
401 | 'line-height': 60px,
402 | ),
403 | ),
404 | 'foolscap-bold': (
405 | 'group-a': (
406 | 'font-weight': bold,
407 | 'letter-spacing': -1px,
408 | ),
409 | )
410 | ) !default;
411 |
412 | // Adds the typography specific breakpoints to the Sass MQ list
413 | // of breakpoints
414 | //
415 | @include mq.add-breakpoint(gel-bp-type-b, 320px);
416 | @include mq.add-breakpoint(gel-bp-type-c, 600px);
417 |
--------------------------------------------------------------------------------
/dist/gel-typography.css:
--------------------------------------------------------------------------------
1 | .gel-canon {
2 | font-size: 28px;
3 | font-size: 1.75rem;
4 | line-height: 32px;
5 | line-height: 2rem;
6 | }
7 | @media (min-width: 20em) {
8 | .gel-canon {
9 | font-size: 32px;
10 | font-size: 2rem;
11 | line-height: 36px;
12 | line-height: 2.25rem;
13 | }
14 | }
15 | @media (min-width: 37.5em) {
16 | .gel-canon {
17 | font-size: 52px;
18 | font-size: 3.25rem;
19 | line-height: 56px;
20 | line-height: 3.5rem;
21 | }
22 | .no-touch .gel-canon {
23 | font-size: 44px;
24 | font-size: 2.75rem;
25 | line-height: 48px;
26 | line-height: 3rem;
27 | }
28 | }
29 |
30 | .gel-canon-bold {
31 | font-size: 28px;
32 | font-size: 1.75rem;
33 | line-height: 32px;
34 | line-height: 2rem;
35 | font-weight: bold;
36 | letter-spacing: -1px;
37 | letter-spacing: -0.0625rem;
38 | }
39 | .b-reith-sans-loaded .gel-canon-bold, .b-reith-serif-loaded .gel-canon-bold {
40 | letter-spacing: normal;
41 | }
42 | @media (min-width: 20em) {
43 | .gel-canon-bold {
44 | font-size: 32px;
45 | font-size: 2rem;
46 | line-height: 36px;
47 | line-height: 2.25rem;
48 | }
49 | }
50 | @media (min-width: 37.5em) {
51 | .gel-canon-bold {
52 | font-size: 52px;
53 | font-size: 3.25rem;
54 | line-height: 56px;
55 | line-height: 3.5rem;
56 | }
57 | .no-touch .gel-canon-bold {
58 | font-size: 44px;
59 | font-size: 2.75rem;
60 | line-height: 48px;
61 | line-height: 3rem;
62 | }
63 | }
64 |
65 | .gel-trafalgar {
66 | font-size: 20px;
67 | font-size: 1.25rem;
68 | line-height: 24px;
69 | line-height: 1.5rem;
70 | }
71 | @media (min-width: 20em) {
72 | .gel-trafalgar {
73 | font-size: 24px;
74 | font-size: 1.5rem;
75 | line-height: 28px;
76 | line-height: 1.75rem;
77 | }
78 | }
79 | @media (min-width: 37.5em) {
80 | .gel-trafalgar {
81 | font-size: 36px;
82 | font-size: 2.25rem;
83 | line-height: 40px;
84 | line-height: 2.5rem;
85 | }
86 | .no-touch .gel-trafalgar {
87 | font-size: 32px;
88 | font-size: 2rem;
89 | line-height: 36px;
90 | line-height: 2.25rem;
91 | }
92 | }
93 |
94 | .gel-trafalgar-bold {
95 | font-size: 20px;
96 | font-size: 1.25rem;
97 | line-height: 24px;
98 | line-height: 1.5rem;
99 | font-weight: bold;
100 | letter-spacing: -1px;
101 | letter-spacing: -0.0625rem;
102 | }
103 | .b-reith-sans-loaded .gel-trafalgar-bold, .b-reith-serif-loaded .gel-trafalgar-bold {
104 | letter-spacing: normal;
105 | }
106 | @media (min-width: 20em) {
107 | .gel-trafalgar-bold {
108 | font-size: 24px;
109 | font-size: 1.5rem;
110 | line-height: 28px;
111 | line-height: 1.75rem;
112 | }
113 | }
114 | @media (min-width: 37.5em) {
115 | .gel-trafalgar-bold {
116 | font-size: 36px;
117 | font-size: 2.25rem;
118 | line-height: 40px;
119 | line-height: 2.5rem;
120 | }
121 | .no-touch .gel-trafalgar-bold {
122 | font-size: 32px;
123 | font-size: 2rem;
124 | line-height: 36px;
125 | line-height: 2.25rem;
126 | }
127 | }
128 |
129 | .gel-paragon {
130 | font-size: 20px;
131 | font-size: 1.25rem;
132 | line-height: 24px;
133 | line-height: 1.5rem;
134 | }
135 | @media (min-width: 20em) {
136 | .gel-paragon {
137 | font-size: 22px;
138 | font-size: 1.375rem;
139 | line-height: 26px;
140 | line-height: 1.625rem;
141 | }
142 | }
143 | @media (min-width: 37.5em) {
144 | .gel-paragon {
145 | font-size: 28px;
146 | font-size: 1.75rem;
147 | line-height: 32px;
148 | line-height: 2rem;
149 | }
150 | .no-touch .gel-paragon {
151 | font-size: 28px;
152 | font-size: 1.75rem;
153 | line-height: 32px;
154 | line-height: 2rem;
155 | }
156 | }
157 |
158 | .gel-paragon-bold {
159 | font-size: 20px;
160 | font-size: 1.25rem;
161 | line-height: 24px;
162 | line-height: 1.5rem;
163 | font-weight: bold;
164 | letter-spacing: -1px;
165 | letter-spacing: -0.0625rem;
166 | }
167 | .b-reith-sans-loaded .gel-paragon-bold, .b-reith-serif-loaded .gel-paragon-bold {
168 | letter-spacing: normal;
169 | }
170 | @media (min-width: 20em) {
171 | .gel-paragon-bold {
172 | font-size: 22px;
173 | font-size: 1.375rem;
174 | line-height: 26px;
175 | line-height: 1.625rem;
176 | }
177 | }
178 | @media (min-width: 37.5em) {
179 | .gel-paragon-bold {
180 | font-size: 28px;
181 | font-size: 1.75rem;
182 | line-height: 32px;
183 | line-height: 2rem;
184 | }
185 | .no-touch .gel-paragon-bold {
186 | font-size: 28px;
187 | font-size: 1.75rem;
188 | line-height: 32px;
189 | line-height: 2rem;
190 | }
191 | }
192 |
193 | .gel-double-pica {
194 | font-size: 20px;
195 | font-size: 1.25rem;
196 | line-height: 24px;
197 | line-height: 1.5rem;
198 | }
199 | @media (min-width: 37.5em) {
200 | .gel-double-pica {
201 | font-size: 26px;
202 | font-size: 1.625rem;
203 | line-height: 30px;
204 | line-height: 1.875rem;
205 | }
206 | .no-touch .gel-double-pica {
207 | font-size: 24px;
208 | font-size: 1.5rem;
209 | line-height: 28px;
210 | line-height: 1.75rem;
211 | }
212 | }
213 |
214 | .gel-double-pica-bold {
215 | font-size: 20px;
216 | font-size: 1.25rem;
217 | line-height: 24px;
218 | line-height: 1.5rem;
219 | font-weight: bold;
220 | letter-spacing: -1px;
221 | letter-spacing: -0.0625rem;
222 | }
223 | .b-reith-sans-loaded .gel-double-pica-bold, .b-reith-serif-loaded .gel-double-pica-bold {
224 | letter-spacing: normal;
225 | }
226 | @media (min-width: 37.5em) {
227 | .gel-double-pica-bold {
228 | font-size: 26px;
229 | font-size: 1.625rem;
230 | line-height: 30px;
231 | line-height: 1.875rem;
232 | }
233 | .no-touch .gel-double-pica-bold {
234 | font-size: 24px;
235 | font-size: 1.5rem;
236 | line-height: 28px;
237 | line-height: 1.75rem;
238 | }
239 | }
240 |
241 | .gel-great-primer {
242 | font-size: 18px;
243 | font-size: 1.125rem;
244 | line-height: 22px;
245 | line-height: 1.375rem;
246 | }
247 | @media (min-width: 37.5em) {
248 | .gel-great-primer {
249 | font-size: 21px;
250 | font-size: 1.3125rem;
251 | line-height: 24px;
252 | line-height: 1.5rem;
253 | }
254 | .no-touch .gel-great-primer {
255 | font-size: 20px;
256 | font-size: 1.25rem;
257 | }
258 | }
259 |
260 | .gel-great-primer-bold {
261 | font-size: 18px;
262 | font-size: 1.125rem;
263 | line-height: 22px;
264 | line-height: 1.375rem;
265 | font-weight: bold;
266 | }
267 | @media (min-width: 20em) {
268 | .gel-great-primer-bold {
269 | letter-spacing: -1px;
270 | letter-spacing: -0.0625rem;
271 | }
272 | .b-reith-sans-loaded .gel-great-primer-bold, .b-reith-serif-loaded .gel-great-primer-bold {
273 | letter-spacing: normal;
274 | }
275 | }
276 | @media (min-width: 37.5em) {
277 | .gel-great-primer-bold {
278 | font-size: 21px;
279 | font-size: 1.3125rem;
280 | line-height: 24px;
281 | line-height: 1.5rem;
282 | }
283 | .no-touch .gel-great-primer-bold {
284 | font-size: 20px;
285 | font-size: 1.25rem;
286 | }
287 | }
288 |
289 | .gel-pica {
290 | font-size: 15px;
291 | font-size: 0.9375rem;
292 | line-height: 20px;
293 | line-height: 1.25rem;
294 | }
295 | @media (min-width: 20em) {
296 | .gel-pica {
297 | font-size: 16px;
298 | font-size: 1rem;
299 | line-height: 20px;
300 | line-height: 1.25rem;
301 | }
302 | }
303 | @media (min-width: 37.5em) {
304 | .gel-pica {
305 | font-size: 18px;
306 | font-size: 1.125rem;
307 | line-height: 22px;
308 | line-height: 1.375rem;
309 | }
310 | .no-touch .gel-pica {
311 | font-size: 16px;
312 | font-size: 1rem;
313 | line-height: 20px;
314 | line-height: 1.25rem;
315 | }
316 | }
317 |
318 | .gel-pica-bold {
319 | font-size: 15px;
320 | font-size: 0.9375rem;
321 | line-height: 20px;
322 | line-height: 1.25rem;
323 | font-weight: bold;
324 | }
325 | @media (min-width: 20em) {
326 | .gel-pica-bold {
327 | font-size: 16px;
328 | font-size: 1rem;
329 | line-height: 20px;
330 | line-height: 1.25rem;
331 | }
332 | }
333 | @media (min-width: 37.5em) {
334 | .gel-pica-bold {
335 | font-size: 18px;
336 | font-size: 1.125rem;
337 | line-height: 22px;
338 | line-height: 1.375rem;
339 | }
340 | .no-touch .gel-pica-bold {
341 | font-size: 16px;
342 | font-size: 1rem;
343 | line-height: 20px;
344 | line-height: 1.25rem;
345 | }
346 | }
347 |
348 | .gel-long-primer {
349 | font-size: 15px;
350 | font-size: 0.9375rem;
351 | line-height: 18px;
352 | line-height: 1.125rem;
353 | }
354 | @media (min-width: 37.5em) {
355 | .gel-long-primer {
356 | line-height: 20px;
357 | line-height: 1.25rem;
358 | }
359 | .no-touch .gel-long-primer {
360 | font-size: 14px;
361 | font-size: 0.875rem;
362 | line-height: 18px;
363 | line-height: 1.125rem;
364 | }
365 | }
366 |
367 | .gel-long-primer-bold {
368 | font-size: 15px;
369 | font-size: 0.9375rem;
370 | line-height: 18px;
371 | line-height: 1.125rem;
372 | font-weight: bold;
373 | }
374 | @media (min-width: 37.5em) {
375 | .gel-long-primer-bold {
376 | line-height: 20px;
377 | line-height: 1.25rem;
378 | }
379 | .no-touch .gel-long-primer-bold {
380 | font-size: 14px;
381 | font-size: 0.875rem;
382 | line-height: 18px;
383 | line-height: 1.125rem;
384 | }
385 | }
386 |
387 | .gel-brevier {
388 | font-size: 14px;
389 | font-size: 0.875rem;
390 | line-height: 16px;
391 | line-height: 1rem;
392 | }
393 | @media (min-width: 20em) {
394 | .gel-brevier {
395 | line-height: 18px;
396 | line-height: 1.125rem;
397 | }
398 | }
399 | @media (min-width: 37.5em) {
400 | .no-touch .gel-brevier {
401 | font-size: 13px;
402 | font-size: 0.8125rem;
403 | line-height: 16px;
404 | line-height: 1rem;
405 | }
406 | }
407 |
408 | .gel-brevier-bold {
409 | font-size: 14px;
410 | font-size: 0.875rem;
411 | line-height: 16px;
412 | line-height: 1rem;
413 | font-weight: bold;
414 | }
415 | @media (min-width: 20em) {
416 | .gel-brevier-bold {
417 | line-height: 18px;
418 | line-height: 1.125rem;
419 | }
420 | }
421 | @media (min-width: 37.5em) {
422 | .no-touch .gel-brevier-bold {
423 | font-size: 13px;
424 | font-size: 0.8125rem;
425 | line-height: 16px;
426 | line-height: 1rem;
427 | }
428 | }
429 |
430 | .gel-minion {
431 | font-size: 12px;
432 | font-size: 0.75rem;
433 | line-height: 16px;
434 | line-height: 1rem;
435 | text-transform: uppercase;
436 | }
437 | @media (min-width: 37.5em) {
438 | .gel-minion {
439 | font-size: 13px;
440 | font-size: 0.8125rem;
441 | }
442 | .no-touch .gel-minion {
443 | font-size: 12px;
444 | font-size: 0.75rem;
445 | }
446 | }
447 |
448 | .gel-minion-bold {
449 | font-size: 12px;
450 | font-size: 0.75rem;
451 | line-height: 16px;
452 | line-height: 1rem;
453 | text-transform: uppercase;
454 | font-weight: bold;
455 | }
456 | @media (min-width: 37.5em) {
457 | .gel-minion-bold {
458 | font-size: 13px;
459 | font-size: 0.8125rem;
460 | }
461 | .no-touch .gel-minion-bold {
462 | font-size: 12px;
463 | font-size: 0.75rem;
464 | }
465 | }
466 |
467 | .gel-body-copy {
468 | font-size: 15px;
469 | font-size: 0.9375rem;
470 | line-height: 20px;
471 | line-height: 1.25rem;
472 | }
473 | @media (min-width: 20em) {
474 | .gel-body-copy {
475 | font-size: 16px;
476 | font-size: 1rem;
477 | line-height: 22px;
478 | line-height: 1.375rem;
479 | }
480 | }
481 | @media (min-width: 37.5em) {
482 | .gel-body-copy {
483 | font-size: 18px;
484 | font-size: 1.125rem;
485 | line-height: 24px;
486 | line-height: 1.5rem;
487 | }
488 | .no-touch .gel-body-copy {
489 | font-size: 16px;
490 | font-size: 1rem;
491 | line-height: 22px;
492 | line-height: 1.375rem;
493 | }
494 | }
495 |
--------------------------------------------------------------------------------
/test/__snapshots__/typography.test.js.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`GEL Typography > larger type sizes > Atlas 1`] = `
4 | ".atlas {
5 | font-size: 78px;
6 | font-size: 4.875rem;
7 | line-height: 84px;
8 | line-height: 5.25rem;
9 | }
10 | @media (min-width: 20em) {
11 | .atlas {
12 | font-size: 96px;
13 | font-size: 6rem;
14 | line-height: 104px;
15 | line-height: 6.5rem;
16 | }
17 | }
18 | @media (min-width: 37.5em) {
19 | .atlas {
20 | font-size: 192px;
21 | font-size: 12rem;
22 | line-height: 208px;
23 | line-height: 13rem;
24 | }
25 | .no-touch .atlas {
26 | font-size: 140px;
27 | font-size: 8.75rem;
28 | line-height: 148px;
29 | line-height: 9.25rem;
30 | }
31 | }"
32 | `;
33 |
34 | exports[`GEL Typography > larger type sizes > Elephant 1`] = `
35 | ".elephant {
36 | font-size: 60px;
37 | font-size: 3.75rem;
38 | line-height: 64px;
39 | line-height: 4rem;
40 | }
41 | @media (min-width: 20em) {
42 | .elephant {
43 | font-size: 78px;
44 | font-size: 4.875rem;
45 | line-height: 84px;
46 | line-height: 5.25rem;
47 | }
48 | }
49 | @media (min-width: 37.5em) {
50 | .elephant {
51 | font-size: 156px;
52 | font-size: 9.75rem;
53 | line-height: 170px;
54 | line-height: 10.625rem;
55 | }
56 | .no-touch .elephant {
57 | font-size: 116px;
58 | font-size: 7.25rem;
59 | line-height: 124px;
60 | line-height: 7.75rem;
61 | }
62 | }"
63 | `;
64 |
65 | exports[`GEL Typography > larger type sizes > Foolscap 1`] = `
66 | ".foolscap {
67 | font-size: 32px;
68 | font-size: 2rem;
69 | line-height: 36px;
70 | line-height: 2.25rem;
71 | }
72 | @media (min-width: 20em) {
73 | .foolscap {
74 | font-size: 40px;
75 | font-size: 2.5rem;
76 | line-height: 44px;
77 | line-height: 2.75rem;
78 | }
79 | }
80 | @media (min-width: 37.5em) {
81 | .foolscap {
82 | font-size: 72px;
83 | font-size: 4.5rem;
84 | line-height: 80px;
85 | line-height: 5rem;
86 | }
87 | .no-touch .foolscap {
88 | font-size: 56px;
89 | font-size: 3.5rem;
90 | line-height: 60px;
91 | line-height: 3.75rem;
92 | }
93 | }"
94 | `;
95 |
96 | exports[`GEL Typography > larger type sizes > Imperial 1`] = `
97 | ".imperial {
98 | font-size: 50px;
99 | font-size: 3.125rem;
100 | line-height: 54px;
101 | line-height: 3.375rem;
102 | }
103 | @media (min-width: 20em) {
104 | .imperial {
105 | font-size: 64px;
106 | font-size: 4rem;
107 | line-height: 72px;
108 | line-height: 4.5rem;
109 | }
110 | }
111 | @media (min-width: 37.5em) {
112 | .imperial {
113 | font-size: 124px;
114 | font-size: 7.75rem;
115 | line-height: 136px;
116 | line-height: 8.5rem;
117 | }
118 | .no-touch .imperial {
119 | font-size: 96px;
120 | font-size: 6rem;
121 | line-height: 104px;
122 | line-height: 6.5rem;
123 | }
124 | }"
125 | `;
126 |
127 | exports[`GEL Typography > larger type sizes > Royal 1`] = `
128 | ".royal {
129 | font-size: 40px;
130 | font-size: 2.5rem;
131 | line-height: 44px;
132 | line-height: 2.75rem;
133 | }
134 | @media (min-width: 20em) {
135 | .royal {
136 | font-size: 52px;
137 | font-size: 3.25rem;
138 | line-height: 60px;
139 | line-height: 3.75rem;
140 | }
141 | }
142 | @media (min-width: 37.5em) {
143 | .royal {
144 | font-size: 94px;
145 | font-size: 5.875rem;
146 | line-height: 104px;
147 | line-height: 6.5rem;
148 | }
149 | .no-touch .royal {
150 | font-size: 76px;
151 | font-size: 4.75rem;
152 | line-height: 84px;
153 | line-height: 5.25rem;
154 | }
155 | }"
156 | `;
157 |
158 | exports[`GEL Typography > type sizes > Body Copy 1`] = `
159 | ".body-copy {
160 | font-size: 15px;
161 | font-size: 0.9375rem;
162 | line-height: 20px;
163 | line-height: 1.25rem;
164 | }
165 | @media (min-width: 20em) {
166 | .body-copy {
167 | font-size: 16px;
168 | font-size: 1rem;
169 | line-height: 22px;
170 | line-height: 1.375rem;
171 | }
172 | }
173 | @media (min-width: 37.5em) {
174 | .body-copy {
175 | font-size: 18px;
176 | font-size: 1.125rem;
177 | line-height: 24px;
178 | line-height: 1.5rem;
179 | }
180 | .no-touch .body-copy {
181 | font-size: 16px;
182 | font-size: 1rem;
183 | line-height: 22px;
184 | line-height: 1.375rem;
185 | }
186 | }"
187 | `;
188 |
189 | exports[`GEL Typography > type sizes > Brevier 1`] = `
190 | ".brevier {
191 | font-size: 14px;
192 | font-size: 0.875rem;
193 | line-height: 16px;
194 | line-height: 1rem;
195 | }
196 | @media (min-width: 20em) {
197 | .brevier {
198 | line-height: 18px;
199 | line-height: 1.125rem;
200 | }
201 | }
202 | @media (min-width: 37.5em) {
203 | .no-touch .brevier {
204 | font-size: 13px;
205 | font-size: 0.8125rem;
206 | line-height: 16px;
207 | line-height: 1rem;
208 | }
209 | }"
210 | `;
211 |
212 | exports[`GEL Typography > type sizes > Canon 1`] = `
213 | ".canon {
214 | font-size: 28px;
215 | font-size: 1.75rem;
216 | line-height: 32px;
217 | line-height: 2rem;
218 | }
219 | @media (min-width: 20em) {
220 | .canon {
221 | font-size: 32px;
222 | font-size: 2rem;
223 | line-height: 36px;
224 | line-height: 2.25rem;
225 | }
226 | }
227 | @media (min-width: 37.5em) {
228 | .canon {
229 | font-size: 52px;
230 | font-size: 3.25rem;
231 | line-height: 56px;
232 | line-height: 3.5rem;
233 | }
234 | .no-touch .canon {
235 | font-size: 44px;
236 | font-size: 2.75rem;
237 | line-height: 48px;
238 | line-height: 3rem;
239 | }
240 | }"
241 | `;
242 |
243 | exports[`GEL Typography > type sizes > Double Pica 1`] = `
244 | ".double-pica {
245 | font-size: 20px;
246 | font-size: 1.25rem;
247 | line-height: 24px;
248 | line-height: 1.5rem;
249 | }
250 | @media (min-width: 37.5em) {
251 | .double-pica {
252 | font-size: 26px;
253 | font-size: 1.625rem;
254 | line-height: 30px;
255 | line-height: 1.875rem;
256 | }
257 | .no-touch .double-pica {
258 | font-size: 24px;
259 | font-size: 1.5rem;
260 | line-height: 28px;
261 | line-height: 1.75rem;
262 | }
263 | }"
264 | `;
265 |
266 | exports[`GEL Typography > type sizes > Great Primer 1`] = `
267 | ".great-primer {
268 | font-size: 18px;
269 | font-size: 1.125rem;
270 | line-height: 22px;
271 | line-height: 1.375rem;
272 | }
273 | @media (min-width: 37.5em) {
274 | .great-primer {
275 | font-size: 21px;
276 | font-size: 1.3125rem;
277 | line-height: 24px;
278 | line-height: 1.5rem;
279 | }
280 | .no-touch .great-primer {
281 | font-size: 20px;
282 | font-size: 1.25rem;
283 | }
284 | }"
285 | `;
286 |
287 | exports[`GEL Typography > type sizes > Long Primer 1`] = `
288 | ".long-primer {
289 | font-size: 15px;
290 | font-size: 0.9375rem;
291 | line-height: 18px;
292 | line-height: 1.125rem;
293 | }
294 | @media (min-width: 37.5em) {
295 | .long-primer {
296 | line-height: 20px;
297 | line-height: 1.25rem;
298 | }
299 | .no-touch .long-primer {
300 | font-size: 14px;
301 | font-size: 0.875rem;
302 | line-height: 18px;
303 | line-height: 1.125rem;
304 | }
305 | }"
306 | `;
307 |
308 | exports[`GEL Typography > type sizes > Minion 1`] = `
309 | ".minion {
310 | font-size: 12px;
311 | font-size: 0.75rem;
312 | line-height: 16px;
313 | line-height: 1rem;
314 | text-transform: uppercase;
315 | }
316 | @media (min-width: 37.5em) {
317 | .minion {
318 | font-size: 13px;
319 | font-size: 0.8125rem;
320 | }
321 | .no-touch .minion {
322 | font-size: 12px;
323 | font-size: 0.75rem;
324 | }
325 | }"
326 | `;
327 |
328 | exports[`GEL Typography > type sizes > Paragon 1`] = `
329 | ".paragon {
330 | font-size: 20px;
331 | font-size: 1.25rem;
332 | line-height: 24px;
333 | line-height: 1.5rem;
334 | }
335 | @media (min-width: 20em) {
336 | .paragon {
337 | font-size: 22px;
338 | font-size: 1.375rem;
339 | line-height: 26px;
340 | line-height: 1.625rem;
341 | }
342 | }
343 | @media (min-width: 37.5em) {
344 | .paragon {
345 | font-size: 28px;
346 | font-size: 1.75rem;
347 | line-height: 32px;
348 | line-height: 2rem;
349 | }
350 | .no-touch .paragon {
351 | font-size: 28px;
352 | font-size: 1.75rem;
353 | line-height: 32px;
354 | line-height: 2rem;
355 | }
356 | }"
357 | `;
358 |
359 | exports[`GEL Typography > type sizes > Pica 1`] = `
360 | ".pica {
361 | font-size: 15px;
362 | font-size: 0.9375rem;
363 | line-height: 20px;
364 | line-height: 1.25rem;
365 | }
366 | @media (min-width: 20em) {
367 | .pica {
368 | font-size: 16px;
369 | font-size: 1rem;
370 | line-height: 20px;
371 | line-height: 1.25rem;
372 | }
373 | }
374 | @media (min-width: 37.5em) {
375 | .pica {
376 | font-size: 18px;
377 | font-size: 1.125rem;
378 | line-height: 22px;
379 | line-height: 1.375rem;
380 | }
381 | .no-touch .pica {
382 | font-size: 16px;
383 | font-size: 1rem;
384 | line-height: 20px;
385 | line-height: 1.25rem;
386 | }
387 | }"
388 | `;
389 |
390 | exports[`GEL Typography > type sizes > Trafalgar 1`] = `
391 | ".trafalgar {
392 | font-size: 20px;
393 | font-size: 1.25rem;
394 | line-height: 24px;
395 | line-height: 1.5rem;
396 | }
397 | @media (min-width: 20em) {
398 | .trafalgar {
399 | font-size: 24px;
400 | font-size: 1.5rem;
401 | line-height: 28px;
402 | line-height: 1.75rem;
403 | }
404 | }
405 | @media (min-width: 37.5em) {
406 | .trafalgar {
407 | font-size: 36px;
408 | font-size: 2.25rem;
409 | line-height: 40px;
410 | line-height: 2.5rem;
411 | }
412 | .no-touch .trafalgar {
413 | font-size: 32px;
414 | font-size: 2rem;
415 | line-height: 36px;
416 | line-height: 2.25rem;
417 | }
418 | }"
419 | `;
420 |
421 | exports[`GEL Typography > with large fonts 1`] = `
422 | ".gel-canon {
423 | font-size: 28px;
424 | font-size: 1.75rem;
425 | line-height: 32px;
426 | line-height: 2rem;
427 | }
428 | @media (min-width: 20em) {
429 | .gel-canon {
430 | font-size: 32px;
431 | font-size: 2rem;
432 | line-height: 36px;
433 | line-height: 2.25rem;
434 | }
435 | }
436 | @media (min-width: 37.5em) {
437 | .gel-canon {
438 | font-size: 52px;
439 | font-size: 3.25rem;
440 | line-height: 56px;
441 | line-height: 3.5rem;
442 | }
443 | .no-touch .gel-canon {
444 | font-size: 44px;
445 | font-size: 2.75rem;
446 | line-height: 48px;
447 | line-height: 3rem;
448 | }
449 | }
450 |
451 | .gel-canon-bold {
452 | font-size: 28px;
453 | font-size: 1.75rem;
454 | line-height: 32px;
455 | line-height: 2rem;
456 | font-weight: bold;
457 | letter-spacing: -1px;
458 | letter-spacing: -0.0625rem;
459 | }
460 | .b-reith-sans-loaded .gel-canon-bold, .b-reith-serif-loaded .gel-canon-bold {
461 | letter-spacing: normal;
462 | }
463 | @media (min-width: 20em) {
464 | .gel-canon-bold {
465 | font-size: 32px;
466 | font-size: 2rem;
467 | line-height: 36px;
468 | line-height: 2.25rem;
469 | }
470 | }
471 | @media (min-width: 37.5em) {
472 | .gel-canon-bold {
473 | font-size: 52px;
474 | font-size: 3.25rem;
475 | line-height: 56px;
476 | line-height: 3.5rem;
477 | }
478 | .no-touch .gel-canon-bold {
479 | font-size: 44px;
480 | font-size: 2.75rem;
481 | line-height: 48px;
482 | line-height: 3rem;
483 | }
484 | }
485 |
486 | .gel-trafalgar {
487 | font-size: 20px;
488 | font-size: 1.25rem;
489 | line-height: 24px;
490 | line-height: 1.5rem;
491 | }
492 | @media (min-width: 20em) {
493 | .gel-trafalgar {
494 | font-size: 24px;
495 | font-size: 1.5rem;
496 | line-height: 28px;
497 | line-height: 1.75rem;
498 | }
499 | }
500 | @media (min-width: 37.5em) {
501 | .gel-trafalgar {
502 | font-size: 36px;
503 | font-size: 2.25rem;
504 | line-height: 40px;
505 | line-height: 2.5rem;
506 | }
507 | .no-touch .gel-trafalgar {
508 | font-size: 32px;
509 | font-size: 2rem;
510 | line-height: 36px;
511 | line-height: 2.25rem;
512 | }
513 | }
514 |
515 | .gel-trafalgar-bold {
516 | font-size: 20px;
517 | font-size: 1.25rem;
518 | line-height: 24px;
519 | line-height: 1.5rem;
520 | font-weight: bold;
521 | letter-spacing: -1px;
522 | letter-spacing: -0.0625rem;
523 | }
524 | .b-reith-sans-loaded .gel-trafalgar-bold, .b-reith-serif-loaded .gel-trafalgar-bold {
525 | letter-spacing: normal;
526 | }
527 | @media (min-width: 20em) {
528 | .gel-trafalgar-bold {
529 | font-size: 24px;
530 | font-size: 1.5rem;
531 | line-height: 28px;
532 | line-height: 1.75rem;
533 | }
534 | }
535 | @media (min-width: 37.5em) {
536 | .gel-trafalgar-bold {
537 | font-size: 36px;
538 | font-size: 2.25rem;
539 | line-height: 40px;
540 | line-height: 2.5rem;
541 | }
542 | .no-touch .gel-trafalgar-bold {
543 | font-size: 32px;
544 | font-size: 2rem;
545 | line-height: 36px;
546 | line-height: 2.25rem;
547 | }
548 | }
549 |
550 | .gel-paragon {
551 | font-size: 20px;
552 | font-size: 1.25rem;
553 | line-height: 24px;
554 | line-height: 1.5rem;
555 | }
556 | @media (min-width: 20em) {
557 | .gel-paragon {
558 | font-size: 22px;
559 | font-size: 1.375rem;
560 | line-height: 26px;
561 | line-height: 1.625rem;
562 | }
563 | }
564 | @media (min-width: 37.5em) {
565 | .gel-paragon {
566 | font-size: 28px;
567 | font-size: 1.75rem;
568 | line-height: 32px;
569 | line-height: 2rem;
570 | }
571 | .no-touch .gel-paragon {
572 | font-size: 28px;
573 | font-size: 1.75rem;
574 | line-height: 32px;
575 | line-height: 2rem;
576 | }
577 | }
578 |
579 | .gel-paragon-bold {
580 | font-size: 20px;
581 | font-size: 1.25rem;
582 | line-height: 24px;
583 | line-height: 1.5rem;
584 | font-weight: bold;
585 | letter-spacing: -1px;
586 | letter-spacing: -0.0625rem;
587 | }
588 | .b-reith-sans-loaded .gel-paragon-bold, .b-reith-serif-loaded .gel-paragon-bold {
589 | letter-spacing: normal;
590 | }
591 | @media (min-width: 20em) {
592 | .gel-paragon-bold {
593 | font-size: 22px;
594 | font-size: 1.375rem;
595 | line-height: 26px;
596 | line-height: 1.625rem;
597 | }
598 | }
599 | @media (min-width: 37.5em) {
600 | .gel-paragon-bold {
601 | font-size: 28px;
602 | font-size: 1.75rem;
603 | line-height: 32px;
604 | line-height: 2rem;
605 | }
606 | .no-touch .gel-paragon-bold {
607 | font-size: 28px;
608 | font-size: 1.75rem;
609 | line-height: 32px;
610 | line-height: 2rem;
611 | }
612 | }
613 |
614 | .gel-double-pica {
615 | font-size: 20px;
616 | font-size: 1.25rem;
617 | line-height: 24px;
618 | line-height: 1.5rem;
619 | }
620 | @media (min-width: 37.5em) {
621 | .gel-double-pica {
622 | font-size: 26px;
623 | font-size: 1.625rem;
624 | line-height: 30px;
625 | line-height: 1.875rem;
626 | }
627 | .no-touch .gel-double-pica {
628 | font-size: 24px;
629 | font-size: 1.5rem;
630 | line-height: 28px;
631 | line-height: 1.75rem;
632 | }
633 | }
634 |
635 | .gel-double-pica-bold {
636 | font-size: 20px;
637 | font-size: 1.25rem;
638 | line-height: 24px;
639 | line-height: 1.5rem;
640 | font-weight: bold;
641 | letter-spacing: -1px;
642 | letter-spacing: -0.0625rem;
643 | }
644 | .b-reith-sans-loaded .gel-double-pica-bold, .b-reith-serif-loaded .gel-double-pica-bold {
645 | letter-spacing: normal;
646 | }
647 | @media (min-width: 37.5em) {
648 | .gel-double-pica-bold {
649 | font-size: 26px;
650 | font-size: 1.625rem;
651 | line-height: 30px;
652 | line-height: 1.875rem;
653 | }
654 | .no-touch .gel-double-pica-bold {
655 | font-size: 24px;
656 | font-size: 1.5rem;
657 | line-height: 28px;
658 | line-height: 1.75rem;
659 | }
660 | }
661 |
662 | .gel-great-primer {
663 | font-size: 18px;
664 | font-size: 1.125rem;
665 | line-height: 22px;
666 | line-height: 1.375rem;
667 | }
668 | @media (min-width: 37.5em) {
669 | .gel-great-primer {
670 | font-size: 21px;
671 | font-size: 1.3125rem;
672 | line-height: 24px;
673 | line-height: 1.5rem;
674 | }
675 | .no-touch .gel-great-primer {
676 | font-size: 20px;
677 | font-size: 1.25rem;
678 | }
679 | }
680 |
681 | .gel-great-primer-bold {
682 | font-size: 18px;
683 | font-size: 1.125rem;
684 | line-height: 22px;
685 | line-height: 1.375rem;
686 | font-weight: bold;
687 | }
688 | @media (min-width: 20em) {
689 | .gel-great-primer-bold {
690 | letter-spacing: -1px;
691 | letter-spacing: -0.0625rem;
692 | }
693 | .b-reith-sans-loaded .gel-great-primer-bold, .b-reith-serif-loaded .gel-great-primer-bold {
694 | letter-spacing: normal;
695 | }
696 | }
697 | @media (min-width: 37.5em) {
698 | .gel-great-primer-bold {
699 | font-size: 21px;
700 | font-size: 1.3125rem;
701 | line-height: 24px;
702 | line-height: 1.5rem;
703 | }
704 | .no-touch .gel-great-primer-bold {
705 | font-size: 20px;
706 | font-size: 1.25rem;
707 | }
708 | }
709 |
710 | .gel-pica {
711 | font-size: 15px;
712 | font-size: 0.9375rem;
713 | line-height: 20px;
714 | line-height: 1.25rem;
715 | }
716 | @media (min-width: 20em) {
717 | .gel-pica {
718 | font-size: 16px;
719 | font-size: 1rem;
720 | line-height: 20px;
721 | line-height: 1.25rem;
722 | }
723 | }
724 | @media (min-width: 37.5em) {
725 | .gel-pica {
726 | font-size: 18px;
727 | font-size: 1.125rem;
728 | line-height: 22px;
729 | line-height: 1.375rem;
730 | }
731 | .no-touch .gel-pica {
732 | font-size: 16px;
733 | font-size: 1rem;
734 | line-height: 20px;
735 | line-height: 1.25rem;
736 | }
737 | }
738 |
739 | .gel-pica-bold {
740 | font-size: 15px;
741 | font-size: 0.9375rem;
742 | line-height: 20px;
743 | line-height: 1.25rem;
744 | font-weight: bold;
745 | }
746 | @media (min-width: 20em) {
747 | .gel-pica-bold {
748 | font-size: 16px;
749 | font-size: 1rem;
750 | line-height: 20px;
751 | line-height: 1.25rem;
752 | }
753 | }
754 | @media (min-width: 37.5em) {
755 | .gel-pica-bold {
756 | font-size: 18px;
757 | font-size: 1.125rem;
758 | line-height: 22px;
759 | line-height: 1.375rem;
760 | }
761 | .no-touch .gel-pica-bold {
762 | font-size: 16px;
763 | font-size: 1rem;
764 | line-height: 20px;
765 | line-height: 1.25rem;
766 | }
767 | }
768 |
769 | .gel-long-primer {
770 | font-size: 15px;
771 | font-size: 0.9375rem;
772 | line-height: 18px;
773 | line-height: 1.125rem;
774 | }
775 | @media (min-width: 37.5em) {
776 | .gel-long-primer {
777 | line-height: 20px;
778 | line-height: 1.25rem;
779 | }
780 | .no-touch .gel-long-primer {
781 | font-size: 14px;
782 | font-size: 0.875rem;
783 | line-height: 18px;
784 | line-height: 1.125rem;
785 | }
786 | }
787 |
788 | .gel-long-primer-bold {
789 | font-size: 15px;
790 | font-size: 0.9375rem;
791 | line-height: 18px;
792 | line-height: 1.125rem;
793 | font-weight: bold;
794 | }
795 | @media (min-width: 37.5em) {
796 | .gel-long-primer-bold {
797 | line-height: 20px;
798 | line-height: 1.25rem;
799 | }
800 | .no-touch .gel-long-primer-bold {
801 | font-size: 14px;
802 | font-size: 0.875rem;
803 | line-height: 18px;
804 | line-height: 1.125rem;
805 | }
806 | }
807 |
808 | .gel-brevier {
809 | font-size: 14px;
810 | font-size: 0.875rem;
811 | line-height: 16px;
812 | line-height: 1rem;
813 | }
814 | @media (min-width: 20em) {
815 | .gel-brevier {
816 | line-height: 18px;
817 | line-height: 1.125rem;
818 | }
819 | }
820 | @media (min-width: 37.5em) {
821 | .no-touch .gel-brevier {
822 | font-size: 13px;
823 | font-size: 0.8125rem;
824 | line-height: 16px;
825 | line-height: 1rem;
826 | }
827 | }
828 |
829 | .gel-brevier-bold {
830 | font-size: 14px;
831 | font-size: 0.875rem;
832 | line-height: 16px;
833 | line-height: 1rem;
834 | font-weight: bold;
835 | }
836 | @media (min-width: 20em) {
837 | .gel-brevier-bold {
838 | line-height: 18px;
839 | line-height: 1.125rem;
840 | }
841 | }
842 | @media (min-width: 37.5em) {
843 | .no-touch .gel-brevier-bold {
844 | font-size: 13px;
845 | font-size: 0.8125rem;
846 | line-height: 16px;
847 | line-height: 1rem;
848 | }
849 | }
850 |
851 | .gel-minion {
852 | font-size: 12px;
853 | font-size: 0.75rem;
854 | line-height: 16px;
855 | line-height: 1rem;
856 | text-transform: uppercase;
857 | }
858 | @media (min-width: 37.5em) {
859 | .gel-minion {
860 | font-size: 13px;
861 | font-size: 0.8125rem;
862 | }
863 | .no-touch .gel-minion {
864 | font-size: 12px;
865 | font-size: 0.75rem;
866 | }
867 | }
868 |
869 | .gel-minion-bold {
870 | font-size: 12px;
871 | font-size: 0.75rem;
872 | line-height: 16px;
873 | line-height: 1rem;
874 | text-transform: uppercase;
875 | font-weight: bold;
876 | }
877 | @media (min-width: 37.5em) {
878 | .gel-minion-bold {
879 | font-size: 13px;
880 | font-size: 0.8125rem;
881 | }
882 | .no-touch .gel-minion-bold {
883 | font-size: 12px;
884 | font-size: 0.75rem;
885 | }
886 | }
887 |
888 | .gel-body-copy {
889 | font-size: 15px;
890 | font-size: 0.9375rem;
891 | line-height: 20px;
892 | line-height: 1.25rem;
893 | }
894 | @media (min-width: 20em) {
895 | .gel-body-copy {
896 | font-size: 16px;
897 | font-size: 1rem;
898 | line-height: 22px;
899 | line-height: 1.375rem;
900 | }
901 | }
902 | @media (min-width: 37.5em) {
903 | .gel-body-copy {
904 | font-size: 18px;
905 | font-size: 1.125rem;
906 | line-height: 24px;
907 | line-height: 1.5rem;
908 | }
909 | .no-touch .gel-body-copy {
910 | font-size: 16px;
911 | font-size: 1rem;
912 | line-height: 22px;
913 | line-height: 1.375rem;
914 | }
915 | }
916 |
917 | .gel-atlas {
918 | font-size: 78px;
919 | font-size: 4.875rem;
920 | line-height: 84px;
921 | line-height: 5.25rem;
922 | }
923 | @media (min-width: 20em) {
924 | .gel-atlas {
925 | font-size: 96px;
926 | font-size: 6rem;
927 | line-height: 104px;
928 | line-height: 6.5rem;
929 | }
930 | }
931 | @media (min-width: 37.5em) {
932 | .gel-atlas {
933 | font-size: 192px;
934 | font-size: 12rem;
935 | line-height: 208px;
936 | line-height: 13rem;
937 | }
938 | .no-touch .gel-atlas {
939 | font-size: 140px;
940 | font-size: 8.75rem;
941 | line-height: 148px;
942 | line-height: 9.25rem;
943 | }
944 | }
945 |
946 | .gel-atlas-bold {
947 | font-size: 78px;
948 | font-size: 4.875rem;
949 | line-height: 84px;
950 | line-height: 5.25rem;
951 | font-weight: bold;
952 | letter-spacing: -1px;
953 | letter-spacing: -0.0625rem;
954 | }
955 | .b-reith-sans-loaded .gel-atlas-bold, .b-reith-serif-loaded .gel-atlas-bold {
956 | letter-spacing: normal;
957 | }
958 | @media (min-width: 20em) {
959 | .gel-atlas-bold {
960 | font-size: 96px;
961 | font-size: 6rem;
962 | line-height: 104px;
963 | line-height: 6.5rem;
964 | }
965 | }
966 | @media (min-width: 37.5em) {
967 | .gel-atlas-bold {
968 | font-size: 192px;
969 | font-size: 12rem;
970 | line-height: 208px;
971 | line-height: 13rem;
972 | }
973 | .no-touch .gel-atlas-bold {
974 | font-size: 140px;
975 | font-size: 8.75rem;
976 | line-height: 148px;
977 | line-height: 9.25rem;
978 | }
979 | }
980 |
981 | .gel-elephant {
982 | font-size: 60px;
983 | font-size: 3.75rem;
984 | line-height: 64px;
985 | line-height: 4rem;
986 | }
987 | @media (min-width: 20em) {
988 | .gel-elephant {
989 | font-size: 78px;
990 | font-size: 4.875rem;
991 | line-height: 84px;
992 | line-height: 5.25rem;
993 | }
994 | }
995 | @media (min-width: 37.5em) {
996 | .gel-elephant {
997 | font-size: 156px;
998 | font-size: 9.75rem;
999 | line-height: 170px;
1000 | line-height: 10.625rem;
1001 | }
1002 | .no-touch .gel-elephant {
1003 | font-size: 116px;
1004 | font-size: 7.25rem;
1005 | line-height: 124px;
1006 | line-height: 7.75rem;
1007 | }
1008 | }
1009 |
1010 | .gel-elephant-bold {
1011 | font-size: 60px;
1012 | font-size: 3.75rem;
1013 | line-height: 64px;
1014 | line-height: 4rem;
1015 | font-weight: bold;
1016 | letter-spacing: -1px;
1017 | letter-spacing: -0.0625rem;
1018 | }
1019 | .b-reith-sans-loaded .gel-elephant-bold, .b-reith-serif-loaded .gel-elephant-bold {
1020 | letter-spacing: normal;
1021 | }
1022 | @media (min-width: 20em) {
1023 | .gel-elephant-bold {
1024 | font-size: 78px;
1025 | font-size: 4.875rem;
1026 | line-height: 84px;
1027 | line-height: 5.25rem;
1028 | }
1029 | }
1030 | @media (min-width: 37.5em) {
1031 | .gel-elephant-bold {
1032 | font-size: 156px;
1033 | font-size: 9.75rem;
1034 | line-height: 170px;
1035 | line-height: 10.625rem;
1036 | }
1037 | .no-touch .gel-elephant-bold {
1038 | font-size: 116px;
1039 | font-size: 7.25rem;
1040 | line-height: 124px;
1041 | line-height: 7.75rem;
1042 | }
1043 | }
1044 |
1045 | .gel-imperial {
1046 | font-size: 50px;
1047 | font-size: 3.125rem;
1048 | line-height: 54px;
1049 | line-height: 3.375rem;
1050 | }
1051 | @media (min-width: 20em) {
1052 | .gel-imperial {
1053 | font-size: 64px;
1054 | font-size: 4rem;
1055 | line-height: 72px;
1056 | line-height: 4.5rem;
1057 | }
1058 | }
1059 | @media (min-width: 37.5em) {
1060 | .gel-imperial {
1061 | font-size: 124px;
1062 | font-size: 7.75rem;
1063 | line-height: 136px;
1064 | line-height: 8.5rem;
1065 | }
1066 | .no-touch .gel-imperial {
1067 | font-size: 96px;
1068 | font-size: 6rem;
1069 | line-height: 104px;
1070 | line-height: 6.5rem;
1071 | }
1072 | }
1073 |
1074 | .gel-imperial-bold {
1075 | font-size: 50px;
1076 | font-size: 3.125rem;
1077 | line-height: 54px;
1078 | line-height: 3.375rem;
1079 | font-weight: bold;
1080 | letter-spacing: -1px;
1081 | letter-spacing: -0.0625rem;
1082 | }
1083 | .b-reith-sans-loaded .gel-imperial-bold, .b-reith-serif-loaded .gel-imperial-bold {
1084 | letter-spacing: normal;
1085 | }
1086 | @media (min-width: 20em) {
1087 | .gel-imperial-bold {
1088 | font-size: 64px;
1089 | font-size: 4rem;
1090 | line-height: 72px;
1091 | line-height: 4.5rem;
1092 | }
1093 | }
1094 | @media (min-width: 37.5em) {
1095 | .gel-imperial-bold {
1096 | font-size: 124px;
1097 | font-size: 7.75rem;
1098 | line-height: 136px;
1099 | line-height: 8.5rem;
1100 | }
1101 | .no-touch .gel-imperial-bold {
1102 | font-size: 96px;
1103 | font-size: 6rem;
1104 | line-height: 104px;
1105 | line-height: 6.5rem;
1106 | }
1107 | }
1108 |
1109 | .gel-royal {
1110 | font-size: 40px;
1111 | font-size: 2.5rem;
1112 | line-height: 44px;
1113 | line-height: 2.75rem;
1114 | }
1115 | @media (min-width: 20em) {
1116 | .gel-royal {
1117 | font-size: 52px;
1118 | font-size: 3.25rem;
1119 | line-height: 60px;
1120 | line-height: 3.75rem;
1121 | }
1122 | }
1123 | @media (min-width: 37.5em) {
1124 | .gel-royal {
1125 | font-size: 94px;
1126 | font-size: 5.875rem;
1127 | line-height: 104px;
1128 | line-height: 6.5rem;
1129 | }
1130 | .no-touch .gel-royal {
1131 | font-size: 76px;
1132 | font-size: 4.75rem;
1133 | line-height: 84px;
1134 | line-height: 5.25rem;
1135 | }
1136 | }
1137 |
1138 | .gel-royal-bold {
1139 | font-size: 40px;
1140 | font-size: 2.5rem;
1141 | line-height: 44px;
1142 | line-height: 2.75rem;
1143 | font-weight: bold;
1144 | letter-spacing: -1px;
1145 | letter-spacing: -0.0625rem;
1146 | }
1147 | .b-reith-sans-loaded .gel-royal-bold, .b-reith-serif-loaded .gel-royal-bold {
1148 | letter-spacing: normal;
1149 | }
1150 | @media (min-width: 20em) {
1151 | .gel-royal-bold {
1152 | font-size: 52px;
1153 | font-size: 3.25rem;
1154 | line-height: 60px;
1155 | line-height: 3.75rem;
1156 | }
1157 | }
1158 | @media (min-width: 37.5em) {
1159 | .gel-royal-bold {
1160 | font-size: 94px;
1161 | font-size: 5.875rem;
1162 | line-height: 104px;
1163 | line-height: 6.5rem;
1164 | }
1165 | .no-touch .gel-royal-bold {
1166 | font-size: 76px;
1167 | font-size: 4.75rem;
1168 | line-height: 84px;
1169 | line-height: 5.25rem;
1170 | }
1171 | }
1172 |
1173 | .gel-foolscap {
1174 | font-size: 32px;
1175 | font-size: 2rem;
1176 | line-height: 36px;
1177 | line-height: 2.25rem;
1178 | }
1179 | @media (min-width: 20em) {
1180 | .gel-foolscap {
1181 | font-size: 40px;
1182 | font-size: 2.5rem;
1183 | line-height: 44px;
1184 | line-height: 2.75rem;
1185 | }
1186 | }
1187 | @media (min-width: 37.5em) {
1188 | .gel-foolscap {
1189 | font-size: 72px;
1190 | font-size: 4.5rem;
1191 | line-height: 80px;
1192 | line-height: 5rem;
1193 | }
1194 | .no-touch .gel-foolscap {
1195 | font-size: 56px;
1196 | font-size: 3.5rem;
1197 | line-height: 60px;
1198 | line-height: 3.75rem;
1199 | }
1200 | }
1201 |
1202 | .gel-foolscap-bold {
1203 | font-size: 32px;
1204 | font-size: 2rem;
1205 | line-height: 36px;
1206 | line-height: 2.25rem;
1207 | font-weight: bold;
1208 | letter-spacing: -1px;
1209 | letter-spacing: -0.0625rem;
1210 | }
1211 | .b-reith-sans-loaded .gel-foolscap-bold, .b-reith-serif-loaded .gel-foolscap-bold {
1212 | letter-spacing: normal;
1213 | }
1214 | @media (min-width: 20em) {
1215 | .gel-foolscap-bold {
1216 | font-size: 40px;
1217 | font-size: 2.5rem;
1218 | line-height: 44px;
1219 | line-height: 2.75rem;
1220 | }
1221 | }
1222 | @media (min-width: 37.5em) {
1223 | .gel-foolscap-bold {
1224 | font-size: 72px;
1225 | font-size: 4.5rem;
1226 | line-height: 80px;
1227 | line-height: 5rem;
1228 | }
1229 | .no-touch .gel-foolscap-bold {
1230 | font-size: 56px;
1231 | font-size: 3.5rem;
1232 | line-height: 60px;
1233 | line-height: 3.75rem;
1234 | }
1235 | }"
1236 | `;
1237 |
1238 | exports[`GEL Typography > without large fonts 1`] = `
1239 | ".gel-canon {
1240 | font-size: 28px;
1241 | font-size: 1.75rem;
1242 | line-height: 32px;
1243 | line-height: 2rem;
1244 | }
1245 | @media (min-width: 20em) {
1246 | .gel-canon {
1247 | font-size: 32px;
1248 | font-size: 2rem;
1249 | line-height: 36px;
1250 | line-height: 2.25rem;
1251 | }
1252 | }
1253 | @media (min-width: 37.5em) {
1254 | .gel-canon {
1255 | font-size: 52px;
1256 | font-size: 3.25rem;
1257 | line-height: 56px;
1258 | line-height: 3.5rem;
1259 | }
1260 | .no-touch .gel-canon {
1261 | font-size: 44px;
1262 | font-size: 2.75rem;
1263 | line-height: 48px;
1264 | line-height: 3rem;
1265 | }
1266 | }
1267 |
1268 | .gel-canon-bold {
1269 | font-size: 28px;
1270 | font-size: 1.75rem;
1271 | line-height: 32px;
1272 | line-height: 2rem;
1273 | font-weight: bold;
1274 | letter-spacing: -1px;
1275 | letter-spacing: -0.0625rem;
1276 | }
1277 | .b-reith-sans-loaded .gel-canon-bold, .b-reith-serif-loaded .gel-canon-bold {
1278 | letter-spacing: normal;
1279 | }
1280 | @media (min-width: 20em) {
1281 | .gel-canon-bold {
1282 | font-size: 32px;
1283 | font-size: 2rem;
1284 | line-height: 36px;
1285 | line-height: 2.25rem;
1286 | }
1287 | }
1288 | @media (min-width: 37.5em) {
1289 | .gel-canon-bold {
1290 | font-size: 52px;
1291 | font-size: 3.25rem;
1292 | line-height: 56px;
1293 | line-height: 3.5rem;
1294 | }
1295 | .no-touch .gel-canon-bold {
1296 | font-size: 44px;
1297 | font-size: 2.75rem;
1298 | line-height: 48px;
1299 | line-height: 3rem;
1300 | }
1301 | }
1302 |
1303 | .gel-trafalgar {
1304 | font-size: 20px;
1305 | font-size: 1.25rem;
1306 | line-height: 24px;
1307 | line-height: 1.5rem;
1308 | }
1309 | @media (min-width: 20em) {
1310 | .gel-trafalgar {
1311 | font-size: 24px;
1312 | font-size: 1.5rem;
1313 | line-height: 28px;
1314 | line-height: 1.75rem;
1315 | }
1316 | }
1317 | @media (min-width: 37.5em) {
1318 | .gel-trafalgar {
1319 | font-size: 36px;
1320 | font-size: 2.25rem;
1321 | line-height: 40px;
1322 | line-height: 2.5rem;
1323 | }
1324 | .no-touch .gel-trafalgar {
1325 | font-size: 32px;
1326 | font-size: 2rem;
1327 | line-height: 36px;
1328 | line-height: 2.25rem;
1329 | }
1330 | }
1331 |
1332 | .gel-trafalgar-bold {
1333 | font-size: 20px;
1334 | font-size: 1.25rem;
1335 | line-height: 24px;
1336 | line-height: 1.5rem;
1337 | font-weight: bold;
1338 | letter-spacing: -1px;
1339 | letter-spacing: -0.0625rem;
1340 | }
1341 | .b-reith-sans-loaded .gel-trafalgar-bold, .b-reith-serif-loaded .gel-trafalgar-bold {
1342 | letter-spacing: normal;
1343 | }
1344 | @media (min-width: 20em) {
1345 | .gel-trafalgar-bold {
1346 | font-size: 24px;
1347 | font-size: 1.5rem;
1348 | line-height: 28px;
1349 | line-height: 1.75rem;
1350 | }
1351 | }
1352 | @media (min-width: 37.5em) {
1353 | .gel-trafalgar-bold {
1354 | font-size: 36px;
1355 | font-size: 2.25rem;
1356 | line-height: 40px;
1357 | line-height: 2.5rem;
1358 | }
1359 | .no-touch .gel-trafalgar-bold {
1360 | font-size: 32px;
1361 | font-size: 2rem;
1362 | line-height: 36px;
1363 | line-height: 2.25rem;
1364 | }
1365 | }
1366 |
1367 | .gel-paragon {
1368 | font-size: 20px;
1369 | font-size: 1.25rem;
1370 | line-height: 24px;
1371 | line-height: 1.5rem;
1372 | }
1373 | @media (min-width: 20em) {
1374 | .gel-paragon {
1375 | font-size: 22px;
1376 | font-size: 1.375rem;
1377 | line-height: 26px;
1378 | line-height: 1.625rem;
1379 | }
1380 | }
1381 | @media (min-width: 37.5em) {
1382 | .gel-paragon {
1383 | font-size: 28px;
1384 | font-size: 1.75rem;
1385 | line-height: 32px;
1386 | line-height: 2rem;
1387 | }
1388 | .no-touch .gel-paragon {
1389 | font-size: 28px;
1390 | font-size: 1.75rem;
1391 | line-height: 32px;
1392 | line-height: 2rem;
1393 | }
1394 | }
1395 |
1396 | .gel-paragon-bold {
1397 | font-size: 20px;
1398 | font-size: 1.25rem;
1399 | line-height: 24px;
1400 | line-height: 1.5rem;
1401 | font-weight: bold;
1402 | letter-spacing: -1px;
1403 | letter-spacing: -0.0625rem;
1404 | }
1405 | .b-reith-sans-loaded .gel-paragon-bold, .b-reith-serif-loaded .gel-paragon-bold {
1406 | letter-spacing: normal;
1407 | }
1408 | @media (min-width: 20em) {
1409 | .gel-paragon-bold {
1410 | font-size: 22px;
1411 | font-size: 1.375rem;
1412 | line-height: 26px;
1413 | line-height: 1.625rem;
1414 | }
1415 | }
1416 | @media (min-width: 37.5em) {
1417 | .gel-paragon-bold {
1418 | font-size: 28px;
1419 | font-size: 1.75rem;
1420 | line-height: 32px;
1421 | line-height: 2rem;
1422 | }
1423 | .no-touch .gel-paragon-bold {
1424 | font-size: 28px;
1425 | font-size: 1.75rem;
1426 | line-height: 32px;
1427 | line-height: 2rem;
1428 | }
1429 | }
1430 |
1431 | .gel-double-pica {
1432 | font-size: 20px;
1433 | font-size: 1.25rem;
1434 | line-height: 24px;
1435 | line-height: 1.5rem;
1436 | }
1437 | @media (min-width: 37.5em) {
1438 | .gel-double-pica {
1439 | font-size: 26px;
1440 | font-size: 1.625rem;
1441 | line-height: 30px;
1442 | line-height: 1.875rem;
1443 | }
1444 | .no-touch .gel-double-pica {
1445 | font-size: 24px;
1446 | font-size: 1.5rem;
1447 | line-height: 28px;
1448 | line-height: 1.75rem;
1449 | }
1450 | }
1451 |
1452 | .gel-double-pica-bold {
1453 | font-size: 20px;
1454 | font-size: 1.25rem;
1455 | line-height: 24px;
1456 | line-height: 1.5rem;
1457 | font-weight: bold;
1458 | letter-spacing: -1px;
1459 | letter-spacing: -0.0625rem;
1460 | }
1461 | .b-reith-sans-loaded .gel-double-pica-bold, .b-reith-serif-loaded .gel-double-pica-bold {
1462 | letter-spacing: normal;
1463 | }
1464 | @media (min-width: 37.5em) {
1465 | .gel-double-pica-bold {
1466 | font-size: 26px;
1467 | font-size: 1.625rem;
1468 | line-height: 30px;
1469 | line-height: 1.875rem;
1470 | }
1471 | .no-touch .gel-double-pica-bold {
1472 | font-size: 24px;
1473 | font-size: 1.5rem;
1474 | line-height: 28px;
1475 | line-height: 1.75rem;
1476 | }
1477 | }
1478 |
1479 | .gel-great-primer {
1480 | font-size: 18px;
1481 | font-size: 1.125rem;
1482 | line-height: 22px;
1483 | line-height: 1.375rem;
1484 | }
1485 | @media (min-width: 37.5em) {
1486 | .gel-great-primer {
1487 | font-size: 21px;
1488 | font-size: 1.3125rem;
1489 | line-height: 24px;
1490 | line-height: 1.5rem;
1491 | }
1492 | .no-touch .gel-great-primer {
1493 | font-size: 20px;
1494 | font-size: 1.25rem;
1495 | }
1496 | }
1497 |
1498 | .gel-great-primer-bold {
1499 | font-size: 18px;
1500 | font-size: 1.125rem;
1501 | line-height: 22px;
1502 | line-height: 1.375rem;
1503 | font-weight: bold;
1504 | }
1505 | @media (min-width: 20em) {
1506 | .gel-great-primer-bold {
1507 | letter-spacing: -1px;
1508 | letter-spacing: -0.0625rem;
1509 | }
1510 | .b-reith-sans-loaded .gel-great-primer-bold, .b-reith-serif-loaded .gel-great-primer-bold {
1511 | letter-spacing: normal;
1512 | }
1513 | }
1514 | @media (min-width: 37.5em) {
1515 | .gel-great-primer-bold {
1516 | font-size: 21px;
1517 | font-size: 1.3125rem;
1518 | line-height: 24px;
1519 | line-height: 1.5rem;
1520 | }
1521 | .no-touch .gel-great-primer-bold {
1522 | font-size: 20px;
1523 | font-size: 1.25rem;
1524 | }
1525 | }
1526 |
1527 | .gel-pica {
1528 | font-size: 15px;
1529 | font-size: 0.9375rem;
1530 | line-height: 20px;
1531 | line-height: 1.25rem;
1532 | }
1533 | @media (min-width: 20em) {
1534 | .gel-pica {
1535 | font-size: 16px;
1536 | font-size: 1rem;
1537 | line-height: 20px;
1538 | line-height: 1.25rem;
1539 | }
1540 | }
1541 | @media (min-width: 37.5em) {
1542 | .gel-pica {
1543 | font-size: 18px;
1544 | font-size: 1.125rem;
1545 | line-height: 22px;
1546 | line-height: 1.375rem;
1547 | }
1548 | .no-touch .gel-pica {
1549 | font-size: 16px;
1550 | font-size: 1rem;
1551 | line-height: 20px;
1552 | line-height: 1.25rem;
1553 | }
1554 | }
1555 |
1556 | .gel-pica-bold {
1557 | font-size: 15px;
1558 | font-size: 0.9375rem;
1559 | line-height: 20px;
1560 | line-height: 1.25rem;
1561 | font-weight: bold;
1562 | }
1563 | @media (min-width: 20em) {
1564 | .gel-pica-bold {
1565 | font-size: 16px;
1566 | font-size: 1rem;
1567 | line-height: 20px;
1568 | line-height: 1.25rem;
1569 | }
1570 | }
1571 | @media (min-width: 37.5em) {
1572 | .gel-pica-bold {
1573 | font-size: 18px;
1574 | font-size: 1.125rem;
1575 | line-height: 22px;
1576 | line-height: 1.375rem;
1577 | }
1578 | .no-touch .gel-pica-bold {
1579 | font-size: 16px;
1580 | font-size: 1rem;
1581 | line-height: 20px;
1582 | line-height: 1.25rem;
1583 | }
1584 | }
1585 |
1586 | .gel-long-primer {
1587 | font-size: 15px;
1588 | font-size: 0.9375rem;
1589 | line-height: 18px;
1590 | line-height: 1.125rem;
1591 | }
1592 | @media (min-width: 37.5em) {
1593 | .gel-long-primer {
1594 | line-height: 20px;
1595 | line-height: 1.25rem;
1596 | }
1597 | .no-touch .gel-long-primer {
1598 | font-size: 14px;
1599 | font-size: 0.875rem;
1600 | line-height: 18px;
1601 | line-height: 1.125rem;
1602 | }
1603 | }
1604 |
1605 | .gel-long-primer-bold {
1606 | font-size: 15px;
1607 | font-size: 0.9375rem;
1608 | line-height: 18px;
1609 | line-height: 1.125rem;
1610 | font-weight: bold;
1611 | }
1612 | @media (min-width: 37.5em) {
1613 | .gel-long-primer-bold {
1614 | line-height: 20px;
1615 | line-height: 1.25rem;
1616 | }
1617 | .no-touch .gel-long-primer-bold {
1618 | font-size: 14px;
1619 | font-size: 0.875rem;
1620 | line-height: 18px;
1621 | line-height: 1.125rem;
1622 | }
1623 | }
1624 |
1625 | .gel-brevier {
1626 | font-size: 14px;
1627 | font-size: 0.875rem;
1628 | line-height: 16px;
1629 | line-height: 1rem;
1630 | }
1631 | @media (min-width: 20em) {
1632 | .gel-brevier {
1633 | line-height: 18px;
1634 | line-height: 1.125rem;
1635 | }
1636 | }
1637 | @media (min-width: 37.5em) {
1638 | .no-touch .gel-brevier {
1639 | font-size: 13px;
1640 | font-size: 0.8125rem;
1641 | line-height: 16px;
1642 | line-height: 1rem;
1643 | }
1644 | }
1645 |
1646 | .gel-brevier-bold {
1647 | font-size: 14px;
1648 | font-size: 0.875rem;
1649 | line-height: 16px;
1650 | line-height: 1rem;
1651 | font-weight: bold;
1652 | }
1653 | @media (min-width: 20em) {
1654 | .gel-brevier-bold {
1655 | line-height: 18px;
1656 | line-height: 1.125rem;
1657 | }
1658 | }
1659 | @media (min-width: 37.5em) {
1660 | .no-touch .gel-brevier-bold {
1661 | font-size: 13px;
1662 | font-size: 0.8125rem;
1663 | line-height: 16px;
1664 | line-height: 1rem;
1665 | }
1666 | }
1667 |
1668 | .gel-minion {
1669 | font-size: 12px;
1670 | font-size: 0.75rem;
1671 | line-height: 16px;
1672 | line-height: 1rem;
1673 | text-transform: uppercase;
1674 | }
1675 | @media (min-width: 37.5em) {
1676 | .gel-minion {
1677 | font-size: 13px;
1678 | font-size: 0.8125rem;
1679 | }
1680 | .no-touch .gel-minion {
1681 | font-size: 12px;
1682 | font-size: 0.75rem;
1683 | }
1684 | }
1685 |
1686 | .gel-minion-bold {
1687 | font-size: 12px;
1688 | font-size: 0.75rem;
1689 | line-height: 16px;
1690 | line-height: 1rem;
1691 | text-transform: uppercase;
1692 | font-weight: bold;
1693 | }
1694 | @media (min-width: 37.5em) {
1695 | .gel-minion-bold {
1696 | font-size: 13px;
1697 | font-size: 0.8125rem;
1698 | }
1699 | .no-touch .gel-minion-bold {
1700 | font-size: 12px;
1701 | font-size: 0.75rem;
1702 | }
1703 | }
1704 |
1705 | .gel-body-copy {
1706 | font-size: 15px;
1707 | font-size: 0.9375rem;
1708 | line-height: 20px;
1709 | line-height: 1.25rem;
1710 | }
1711 | @media (min-width: 20em) {
1712 | .gel-body-copy {
1713 | font-size: 16px;
1714 | font-size: 1rem;
1715 | line-height: 22px;
1716 | line-height: 1.375rem;
1717 | }
1718 | }
1719 | @media (min-width: 37.5em) {
1720 | .gel-body-copy {
1721 | font-size: 18px;
1722 | font-size: 1.125rem;
1723 | line-height: 24px;
1724 | line-height: 1.5rem;
1725 | }
1726 | .no-touch .gel-body-copy {
1727 | font-size: 16px;
1728 | font-size: 1rem;
1729 | line-height: 22px;
1730 | line-height: 1.375rem;
1731 | }
1732 | }"
1733 | `;
1734 |
--------------------------------------------------------------------------------