Правила сочетания шрифтов
Удачные сочетания шрифтов — ключ к отличному дизайну. Вот несколько основных правил:
- Дополняемость — выбирайте шрифты, которые сочетаются друг с другом, гармонируя без излишнего сходства или различия.
- Используйте суперсемейства шрифтов — суперсемейство — это набор шрифтов, разработанных для совместной работы, поэтому смешивать шрифты внутри одного безопасно (например, семейство Lucida).
- Контраст — король — слишком похожие шрифты могут конфликтовать, тогда как хороший контраст раскрывает лучшее в каждом. Сочетание шрифта с засечками и рубленого шрифта — известная комбинация.
- Выберите только одного главного — пусть один шрифт лидирует, задавая чёткую иерархию за счёт размера, начертания и цвета.
Один главный
Большой белый заголовок Georgia явно лидирует над маленьким серым текстом Verdana.
Prompt
HTML-страница, показывающая, как один шрифт становится «главным», задавая иерархию.
Во внутреннем блоке
<style> задайте body чёрный фон, шрифт Verdana sans-serif, 16px, серый текст; а <h1> — Georgia serif, 60px, белый. Добавьте заголовок и абзац так, чтобы заголовок явно доминировал.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has beautiful mountains, glaciers and stunning fjords. The large white Georgia heading is clearly the boss over the small gray Verdana text.</p>
</body>
</html>
Georgia и Verdana
Georgia и Verdana — классическое сочетание, придерживающееся веб-безопасных шрифтов.
Пример
Georgia используется для заголовков, а Verdana — для текста.
Prompt
HTML-страница, сочетающая заголовки Georgia с основным текстом Verdana (веб-безопасные шрифты).
Во внутреннем блоке
<style> задайте <h1> шрифт Georgia, serif, а body — Verdana, sans-serif. Добавьте заголовок и пару абзацев текста.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Helvetica и Garamond
Helvetica и Garamond — ещё одно классическое сочетание, использующее веб-безопасные шрифты.
Пример
Helvetica используется для заголовков, а Garamond — для текста.
Prompt
HTML-страница, сочетающая заголовки Helvetica с основным текстом Garamond (веб-безопасные шрифты).
Во внутреннем блоке
<style> задайте <h1> шрифт Helvetica, sans-serif, а body — Garamond, serif. Добавьте заголовок и пару абзацев текста.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Garamond, serif;
}
h1 {
font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Популярные сочетания шрифтов Google
Если вы не хотите использовать стандартные шрифты HTML, можно использовать шрифты Google, которые бесплатны и предлагают более 1000 шрифтов. Ниже приведены несколько популярных сочетаний веб-шрифтов Google.
Merriweather и Open Sans
Merriweather для заголовков, Open Sans для текста.
Пример
Сочетание шрифтов Google Merriweather и Open Sans.
Prompt
HTML-страница, сочетающая шрифты Google Merriweather (заголовки) и Open Sans (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Merriweather|Open+Sans, задайте <h1> шрифт "Merriweather", serif, а body — "Open Sans", sans-serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: "Merriweather", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Ubuntu и Lora
Ubuntu для заголовков, Lora для текста.
Пример
Сочетание шрифтов Google Ubuntu и Lora.
Prompt
HTML-страница, сочетающая шрифты Google Ubuntu (заголовки) и Lora (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Ubuntu|Lora, задайте <h1> шрифт "Ubuntu", sans-serif, а body — "Lora", serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: "Lora", serif;
}
h1 {
font-family: "Ubuntu", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Abril Fatface и Poppins
Abril Fatface для заголовков, Poppins для текста.
Пример
Сочетание шрифтов Google Abril Fatface и Poppins.
Prompt
HTML-страница, сочетающая шрифты Google Abril Fatface (заголовки) и Poppins (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins, задайте <h1> шрифт "Abril Fatface", serif, а body — "Poppins", sans-serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: "Poppins", sans-serif;
}
h1 {
font-family: "Abril Fatface", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Cinzel и Fauna One
Cinzel для заголовков, Fauna One для текста.
Пример
Сочетание шрифтов Google Cinzel и Fauna One.
Prompt
HTML-страница, сочетающая шрифты Google Cinzel (заголовки) и Fauna One (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Cinzel|Fauna+One, задайте <h1> шрифт "Cinzel", serif, а body — "Fauna One", serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: "Fauna One", serif;
}
h1 {
font-family: "Cinzel", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Fjalla One и Libre Baskerville
Fjalla One для заголовков, Libre Baskerville для текста.
Пример
Сочетание шрифтов Google Fjalla One и Libre Baskerville.
Prompt
HTML-страница, сочетающая шрифты Google Fjalla One (заголовки) и Libre Baskerville (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville, задайте <h1> шрифт "Fjalla One", sans-serif, а body — "Libre Baskerville", serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: "Libre Baskerville", serif;
}
h1 {
font-family: "Fjalla One", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Space Mono и Muli
Space Mono для заголовков, Muli для текста.
Пример
Сочетание шрифтов Google Space Mono и Muli.
Prompt
HTML-страница, сочетающая шрифты Google Space Mono (заголовки) и Muli (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Space+Mono|Muli, задайте <h1> шрифт "Space Mono", monospace, а body — "Muli", sans-serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: "Muli", sans-serif;
}
h1 {
font-family: "Space Mono", monospace;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Spectral и Rubik
Spectral для заголовков, Rubik для текста.
Пример
Сочетание шрифтов Google Spectral и Rubik.
Prompt
HTML-страница, сочетающая шрифты Google Spectral (заголовки) и Rubik (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Spectral|Rubik, задайте <h1> шрифт "Spectral", serif, а body — "Rubik", sans-serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: "Rubik", sans-serif;
}
h1 {
font-family: "Spectral", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Oswald и Noto Sans
Oswald для заголовков, Noto Sans для текста.
Пример
Сочетание шрифтов Google Oswald и Noto Sans.
Prompt
HTML-страница, сочетающая шрифты Google Oswald (заголовки) и Noto Sans (текст).
В
<head> подключите https://fonts.googleapis.com/css?family=Oswald|Noto+Sans, задайте <h1> шрифт "Oswald", sans-serif, а body — "Noto Sans", sans-serif. Добавьте заголовок и пару абзацев.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family: "Noto Sans", sans-serif;
}
h1 {
font-family: "Oswald", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>