Internetstiftelsen Styleguide

Typography 

<div class="wrapper" role="main">
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.supersize</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h1 class="supersize">Typografiska regler för Internetstiftelsens webbplatser.</h1>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H1</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h1>Typografi Ut ante enim, mollis sit amet arcu sed, auctor accumsan arcu</h1>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H2</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H3</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">H4</p>
        </div>
        <div class="grid-18 grid-md-14">
            <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.preamble</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="preamble u-indent-1">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">P</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p>Typografiska regler för Internetstiftelsens webbplatser. <strong>Den här texten är bold</strong> och <em>den här texten är italic</em></p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">A</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p>Typografiska regler för Internetstiftelsens webbplatser <a href="https://google.se">lorem non turpis condimentum iaculis <svg class="icon o-mega-menu__link__icon">
                        <use xlink:href="#icon-external-link"></use>
                    </svg>
                </a> Typografiska regler för Internetstiftelsens webbplatser</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">LISTS</p>
        </div>
        <div class="grid-18 grid-md-14">
            <ul class="checklist">
                <li>Lorem ipsum dolor sit amet</li>
                <li>Sed nisl justo, pharetra non scelerisque</li>
                <li> Vestibulum ullamcorper</li>
                <li>
                    Nam vitae mauris blandit
                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Sed nisl justo, pharetra non scelerisque</li>
                        <li> Vestibulum ullamcorper</li>
                        <li>
                            Nam vitae mauris blandit
                            <ul>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Sed nisl justo, pharetra non scelerisque</li>
                                <li> Vestibulum ullamcorper</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

            <ol>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Sed nisl justo, pharetra non scelerisque</li>
                <li> Vestibulum ullamcorper</li>
                <li>
                    Nam vitae mauris blandit
                    <ol>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Sed nisl justo, pharetra non scelerisque</li>
                        <li> Vestibulum ullamcorper</li>
                        <li>
                            Nam vitae mauris blandit
                            <ol>
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Sed nisl justo, pharetra non scelerisque</li>
                                <li> Vestibulum ullamcorper</li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.meta</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="meta">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">.small</p>
        </div>
        <div class="grid-18 grid-md-14">
            <p class="small">Typografiska regler för Internetstiftelsens webbplatser.</p>
        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">BLOCKQUOTE</p>
        </div>
        <div class="grid-18 grid-md-14">
            <blockquote class="jade">
                <svg class="icon">
                    <use xlink:href="#icon-quote"></use>
                </svg>
                <p>Välkommen till Internetmuseum!
 Här tar vi dig med på en resa genom den svenska internethistorien.</p>
                <cite class="meta">Frank Zappa</cite>
            </blockquote>

        </div>
    </div>
    <div class="row u-m-b-6">
        <div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
            <p class="meta">pre > code</p>
        </div>
        <div class="grid-18 grid-md-14">
            <pre><code>const debounce = (func, delay) => {
	let inDebounce;

	return (...args) => {
		const context = this;
		clearTimeout(inDebounce);
		inDebounce = setTimeout(() => func.apply(context, args), delay);
	};
};

const checkElements = debounce(() => {
	const accordionElementFresh = document.querySelector(`.js-${className}`);

	if (accordionElementFresh) {
		attachAccordion();
	}
}, 50);

const observeHandler = (mutationsList) => {
	mutationsList.forEach((mutation) => {
		if (mutation.type !== 'childList') {
			return;
		}

		checkElements();
	});
};

const observer = new MutationObserver(observeHandler);

observer.observe(document.body, { childList: true, subtree: true });</code>
			</pre>
        </div>
    </div>
</div>

<h1></h1>
<p></p>
<button type="button" class="grid-toggle">Grid</button>
 
<div class="wrapper" role="main">
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.supersize</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h1 class="supersize">{{supersize}}</h1>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H1</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h1>{{h1}}</h1>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H2</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h2>{{h2}}</h2>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H3</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h3>{{h2}}</h3>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">H4</p>
		</div>
		<div class="grid-18 grid-md-14">
			<h4>{{h2}}</h4>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.preamble</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="preamble u-indent-1">{{preamble}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">P</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p>{{preamble}} <strong>{{strong}}</strong> och <em>{{italic}}</em></p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">A</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p>{{paragraph}} <a href="https://google.se">{{link}} {{> @icon id="external-link" additional_classes="o-mega-menu__link__icon"}}</a> {{paragraph}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">LISTS</p>
		</div>
		<div class="grid-18 grid-md-14">
			<ul class="checklist">
				<li>Lorem ipsum dolor sit amet</li>
				<li>Sed nisl justo, pharetra non scelerisque</li>
				<li> Vestibulum ullamcorper</li>
				<li>
					Nam vitae mauris blandit
					<ul>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Sed nisl justo, pharetra non scelerisque</li>
						<li> Vestibulum ullamcorper</li>
						<li>
							Nam vitae mauris blandit
							<ul>
								<li>Lorem ipsum dolor sit amet</li>
								<li>Sed nisl justo, pharetra non scelerisque</li>
								<li> Vestibulum ullamcorper</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>

			<ol>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Sed nisl justo, pharetra non scelerisque</li>
				<li> Vestibulum ullamcorper</li>
				<li>
					Nam vitae mauris blandit
					<ol>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Sed nisl justo, pharetra non scelerisque</li>
						<li> Vestibulum ullamcorper</li>
						<li>
							Nam vitae mauris blandit
							<ol>
								<li>Lorem ipsum dolor sit amet</li>
								<li>Sed nisl justo, pharetra non scelerisque</li>
								<li> Vestibulum ullamcorper</li>
							</ol>
						</li>
					</ol>
				</li>
			</ol>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.meta</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="meta">{{meta}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">.small</p>
		</div>
		<div class="grid-18 grid-md-14">
			<p class="small">{{small}}</p>
		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">BLOCKQUOTE</p>
		</div>
		<div class="grid-18 grid-md-14">
			<blockquote class="jade">
				{{>@ icon id="quote"}}
				<p>{{blockquote}}</p>
				<cite class="meta">{{quotee}}</cite>
			</blockquote>

		</div>
	</div>
	<div class="row u-m-b-6">
		<div class="grid-md-3 display-flex align-items-md-center align-self-stretch justify-content-md-center">
			<p class="meta">pre > code</p>
		</div>
		<div class="grid-18 grid-md-14">
			<pre><code>const debounce = (func, delay) => {
	let inDebounce;

	return (...args) => {
		const context = this;
		clearTimeout(inDebounce);
		inDebounce = setTimeout(() => func.apply(context, args), delay);
	};
};

const checkElements = debounce(() => {
	const accordionElementFresh = document.querySelector(`.js-${className}`);

	if (accordionElementFresh) {
		attachAccordion();
	}
}, 50);

const observeHandler = (mutationsList) => {
	mutationsList.forEach((mutation) => {
		if (mutation.type !== 'childList') {
			return;
		}

		checkElements();
	});
};

const observer = new MutationObserver(observeHandler);

observer.observe(document.body, { childList: true, subtree: true });</code>
			</pre>
		</div>
	</div>
</div>

{{> @grid-toggle }}
 
{
  "supersize": "Typografiska regler för Internetstiftelsens webbplatser.",
  "h1": "Typografi Ut ante enim, mollis sit amet arcu sed, auctor accumsan arcu",
  "h2": "Lorem ipsum dolor sit amet, consectetur adipisicing elit",
  "preamble": "Typografiska regler för Internetstiftelsens webbplatser.",
  "paragraph": "Typografiska regler för Internetstiftelsens webbplatser",
  "meta": "Typografiska regler för Internetstiftelsens webbplatser.",
  "small": "Typografiska regler för Internetstiftelsens webbplatser.",
  "blockquote": "Välkommen till Internetmuseum!
 Här tar vi dig med på en resa genom den svenska internethistorien.",
  "quotee": "Frank Zappa",
  "link": "lorem non turpis condimentum iaculis",
  "strong": "Den här texten är bold",
  "italic": "den här texten är italic"
}
  • Content: 
    @charset "UTF-8";
@use '../variables' as var;
@use '../functions' as func;
@use '../extends';
@use '../colors/colors' as colors;
@use '../colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;
@use '../bem' as bem;

h1,
.alpha,
%alpha {
	@include plumber.plumber(
		$font-size: 3,
		$line-height: 4,
		$leading-bottom: 2,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-headings;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 4,
			$line-height: 5,
			$leading-bottom: 1,
			$baseline: var.$headings-baseline
		);
	}
}

h2,
.beta,
%beta {
	@include plumber.plumber(
		$font-size: 2.44444,
		$line-height: 3,
		$leading-bottom: 1,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-headings;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 2.666666,
			$leading-bottom: 1
		);

		line-height: 1.75rem;
	}
}

h3,
.gamma,
%gamma {
	@include plumber.plumber(
		$font-size: 2.22222,
		$line-height: 3,
		$leading-top: 0,
		$leading-bottom: 1
	);

	font-family: var.$font-family-headings;
}

h4,
.delta,
%delta {
	@include plumber.plumber(
		$font-size: 1.888888,
		$line-height: 3,
		$leading-top: 0,
		$leading-bottom: 1
	);

	font-family: var.$font-family-headings;
}

%reset-link-style {
	padding: unset;
	border-bottom: unset;
	color: unset;
	text-decoration: unset;

	&:hover,
	&:focus {
		border-bottom: unset;
		border-radius: unset;
		background-color: unset;
	}
}

p a,
td a:not([class*='tag']),
th a:not([class*='tag']) {
	@extend %break-long-links;
	@extend %link-styles;
}

ul:not([class]),
ol:not([class]) {
	li > a {
		@extend %break-long-links;
		@extend %link-styles;
	}
}

li {
	padding-top: func.rhythm(0.25);
	padding-bottom: func.rhythm(0.25);
}

li ul,
li ol {
	margin-top: func.rhythm(1);
	margin-left: func.rhythm(4);
	padding-top: 0;
	padding-left: 0;
}

li ol {
	list-style-type: lower-latin;
}

li ol li ol {
	list-style-type: lower-roman;
}

p,
ul,
ol,
dl {
	@include plumber.plumber(
		$leading-bottom: 3
	);
}

ul,
ol,
dl {
	+ h2,
	+ .beta {
		margin-top: func.rhythm(5);
	}
}

.small,
small {
	@include plumber.plumber(
		$font-size: 1.5,
		$line-height: 2,
		$leading-bottom: 0
	);
}

.supersize,
%supersize {
	@include plumber.plumber(
		$font-size: 3,
		$line-height: 4,
		$leading-bottom: 1,
		$baseline: var.$headings-baseline
	);

	font-family: var.$font-family-bold;

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 4.5,
			$line-height: 5,
			$leading-bottom: 1
		);
	}

	@include breakpoint.bp-up(md) {
		@include plumber.plumber(
			$font-size: 7,
			$line-height: 8,
			$leading-bottom: 2
		);
	}

	&--large-mobile {
		hyphens: auto;
		hyphenate-limit-chars: 13 3 4;
		overflow-wrap: break-word;

		@include plumber.plumber(
			$font-size: 4.5,
			$line-height: 5,
			$leading-bottom: 1
		);

		@include breakpoint.bp-up(md) {
			hyphens: initial;
			overflow-wrap: normal;

			@include plumber.plumber(
				$font-size: 7,
				$line-height: 8,
				$leading-bottom: 2
			);
		}
	}
}

.godzilla {
	@include plumber.plumber(
		$leading-top: 0,
		$leading-bottom: 0
	);

	line-height: 79px;
	font-size: 120px;
	font-family: var.$font-family-bold;
	letter-spacing: -#{func.to_rem(5px)};

	@include breakpoint.bp-up(sm) {
		line-height: 100px;
		font-size: 150px;
	}

	@include breakpoint.bp-up(md) {
		line-height: 135px;
		font-size: 200px;
		letter-spacing: -#{func.to_rem(10px)};
	}

	@include breakpoint.bp-up(lg) {
		line-height: 201px;
		font-size: 295px;
		letter-spacing: -#{func.to_rem(20px)};
	}

	@include breakpoint.bp-up(xl) {
		line-height: 247px;
		font-size: 360px;
	}

	// Special rule for decade starting with 1
	@include bem.m(19) {
		&::first-letter {
			letter-spacing: -#{func.to_rem(20px)};

			@include breakpoint.bp-up(lg) {
				letter-spacing: -#{func.to_rem(40px)};
			}

			@include breakpoint.bp-up(xl) {
				letter-spacing: -#{func.to_rem(45px)};
			}
		}
	}
}

.preamble,
%preamble {

	@include plumber.plumber(
		$font-size: 2.55555,
		$line-height: 4,
		$leading-bottom: 4
	);

	@include breakpoint.bp-up(sm) {
		@include plumber.plumber(
			$font-size: 3,
			$line-height: 4,
			$leading-bottom: 4
		);
	}
}

.meta {
	@include plumber.plumber(
		$font-size: 1.75,
		$baseline: var.$mono-baseline
	);

	font-family: var.$font-family-mono;
	font-weight: normal;
	letter-spacing: func.to_rem(0.5px);
	text-transform: uppercase;
}

.mono {
	font-family: var.$font-family-mono;
	font-weight: normal;
	letter-spacing: func.to_rem(0.5px);
	text-decoration: none;
	text-transform: uppercase;
}

::selection {
	background-color: colors.$color-ruby-light;
}

::-moz-selection {
	background-color: colors.$color-ruby-light;
}

blockquote {

	@include colorFunc.color_classes (
		$map: colorFunc.$colors,
		$prefix: '-',
		$attribute: 'fill',
		$element: 'svg'
	);

	display: flex;
	position: relative;
	flex-direction: column;
	margin-top: func.rhythm(6);
	margin-right: 0;
	margin-bottom: func.rhythm(5);
	margin-left: 0;
	padding-left: func.to_rem(40px);

	p {
		@include plumber.plumber(
			$font-size: 2.5,
			$line-height: 3,
			$leading-top: 1,
			$leading-bottom: 0,
			$baseline: var.$headings-baseline
		);
	}

	svg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: func.rhythm(2);
		height: func.rhythm(4);
		fill: colors.$color-black;

		@include breakpoint.bp-up(md) {
			width: func.rhythm(3);
			height: func.rhythm(6);
		}
	}

	.meta {
		@include plumber.plumber(
			$font-size: 1.75,
			$leading-bottom: 0
		);

		margin-top: func.rhythm(1);
		line-height: func.rhythm(2.5);
	}

	@include breakpoint.bp-up(sm) {
		padding-right: func.rhythm(3);
		max-width: func.to_rem(613px);
		margin-left: auto;
		margin-right: auto;
	}

	@include breakpoint.bp-up(md) {
		margin-top: func.rhythm(6.5);
		padding-left: func.to_rem(52px);

		p {
			@include plumber.plumber(
				$font-size: 2.7,
				$line-height: 4,
				$leading-bottom: 0,
				$leading-top: 1
			);

			line-height: 32px;
		}

		.meta {
			margin-top: func.rhythm(0.5);
			line-height: func.rhythm(3.5);
		}
	}

	@include breakpoint.bp-up(lg) {
		margin-left: initial;
		margin-right: initial;
	}
}

b,
strong,
legend {
	font-family: var.$font-family-headings;
	font-weight: normal;
}
  • URL: /components/raw/typography/_typography.scss
  • Filesystem Path: src/configurations/typography/_typography.scss
  • Size: 6.3 KB

Typography

Blockquote

Blockquote icon can use any of the base colors. This is set by using class .colorname on the blockquote tag itself. If color is not set manually it will default to colors.$color-black. For a list of color names, see Color component