Рассмотрим 10 лучших sans шрифтов и скачаем для установки в photoshop и на web landing page в пяти форматах ttf, eot, svg, woff и woff2, которые поддерживают все браузеры интернета, плюс инструкция css в архиве для быстрого подключения к проекту.
Содержание статьи
1). Шрифт PT Sans
Шрифт PT Sans идеально подходит для текста с размерами от 14 до 26 пикселей. Хорошая корреляция с большими шрифтами для заголовков.
2). Шрифт Roboto
Шрифтом Roboto оформляем заголовки с большими буквами. Сочетается с шрифтами с засечками.
3). Шрифт Open Sans
Шрифт Open Sans имеет красивое начертание. Подходит для больших заголовком с подзаголовком шрифта PT Sans.
4). Шрифт Museo Sans
На шрифте Museo Sans можно сделать целиком лендинг. В шрифте есть размеры 100, 300, 500, 700, 900. Выставляем свой размер для текста и побольше для заголовка.
5). Шрифт Uni Sans
Шрифт Uni Sans подойдет для заголовков. В шрифте есть тонкое и толстое начертание.
6). Шрифт Ubuntu
Шрифт Ubuntu подходит хорошо для большого текста, сочетается гармонично с шрифтами PT Sans, Roboto, Open Sans.
7). Шрифт Officina Sans
Шрифт Officina Sans используется для основного текста и сочетается с Droid Sans и с шрифтом засечками.
8). Шрифт Fira Sans
Шрифт Fira Sans простой и хорошо читается с выразительными шрифтами.
9). Шрифт Raleway
Шрифт Raleway подходит для заголовков, потому что достаточно тонкий, сочетается с округлыми шрифтами.
10). Шрифт Lato
Шрифт Lato имеет классические пропорции, смотрится элегантно.
Установим sans шрифт в проект и photoshop по шагам
- После как скачали шрифт скопируем содержание архива в папку fonts в шаблоне.
- Откроем инструкцию css и скопируем код в файл стилей style.css.
У каждого sans шрифта будет свой код, пример.
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'PTSansBold'; src: url('fonts/PTSansBold.eot'); src: url('fonts/PTSansBold.eot') format('embedded-opentype'), url('fonts/PTSansBold.woff2') format('woff2'), url('fonts/PTSansBold.woff') format('woff'), url('fonts/PTSansBold.ttf') format('truetype'), url('fonts/PTSansBold.svg#PTSansBold') format('svg'); } |
Установим sans шрифт в photoshop
- Нажимаем два раза на файл с расширением .ttf и нажимаем кнопку установить.
- Второй способ установки шрифта. Копируем файлы в папку C:/Windows/Fonts.