Отличные пары шрифтов CSS
Отличные сочетания шрифтов необходимы для отличного дизайна.
Правила сопряжения шрифтов
Вот несколько основных правил для создания отличных сочетаний шрифтов:
1. Дополнение
Всегда безопасно найти пары шрифтов, которые дополняют друг друга.
Отличная комбинация шрифтов должна гармонировать, не будучи слишком похожей или слишком разной.
2. Используйте суперсемьи шрифтов
Суперсемейство шрифтов - это набор шрифтов, предназначенных для хорошей совместной работы. Таким образом, использование разных шрифтов в одном и том же суперсемействе безопасно.
Например, суперсемейство Lucida содержит следующие шрифты: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif и Lucida Math.
3. Контраст - это король
Два слишком похожих шрифта часто конфликтуют. Тем не менее, контрасты, сделанные правильно, выделяют лучшее в каждом шрифте.
Пример: Сочетание засечек с без засечками является хорошо известной комбинацией.
Сильное суперсемейство включает в себя как засечек, так и без засечек одного и того же шрифта (например, Люсида и Люсида Санс).
4. Выбери только одного босса
Один шрифт должен быть боссом. Это устанавливает иерархию шрифтов на вашей странице. Это может быть достигнуто путем изменения размера, веса и цвета.
Пример
Без сомнения, "Georgia" - это босс здесь:
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
Ниже мы показали некоторые популярные пары шрифтов, которые подойдут многим брендам и контекстам.
Georgia и Verdana
Georgia и Verdana - это классическое сочетание. Он также придерживается стандартов веб-безопасных шрифтов:
Пример
Используйте шрифт "Georgia" для заголовков и "Verdana" для текста:
Helvetica и Garamond
Helvetica и Garamond - это еще одна классическая комбинация, в которой используются безопасные веб-шрифты:
Пример
Используйте шрифт "Helvetica" для заголовков и "Garamond" для текста:
Популярные пары шрифтов Google
Если вы не хотите использовать стандартные шрифты в HTML, вы можете использовать Google Fonts.
Шрифты Google бесплатны в использовании и имеют более 1000 шрифтов на выбор.
Ниже приведены некоторые популярные сочетания шрифтов Google.
Merriweather и Open Sans
Пример
Используйте шрифт "Merriweather" для заголовков и "Open Sans" для текста:
Ubuntu и Lora
Пример
Используйте шрифт "Ubuntu" для заголовков и "Lora" для текста:
Abril Fatface и Poppins
Пример
Используйте шрифт "Abril Fatface" для заголовков и "Poppins" для текста:
Cinzel и Fauna One
Пример
Используйте шрифт "Cinzel" для заголовков и "Fauna One" для текста:
Fjalla One и Libre Baskerville
Пример
Используйте шрифт "Fjalla One" для заголовков и "Libre Baskerville" для текста:
Space Mono и Muli
Пример
Используйте шрифт "Space Mono" для заголовков и "Muli" для текста:
Spectral и Rubik
Пример
Используйте шрифт "Spectral" для заголовков и "Rubik" для текста:
Oswald и Noto Sans
Пример
Используйте шрифт "Oswald" для заголовков и "Noto Sans" для текста:
