Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Синтаксис
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
CSS свойства шрифта определяют имя семейства шрифта, жирный шрифт или нет, размер, и стиль текста.
Разница Между Шрифтами Serif и Sans-serif
Считается, что на дисплеях компьютеров шрифты sans-serif легче читать, чем шрифты serif.
CSS Семейства Шрифтов
В CSS сушествует два типа имен семейств шрифтов:
Семейство Шрифтов
Семество шрифта устанавливается с помощью свойства font-family.
Свойство font-family должно содержать несколько имен шрифтов в качестве «запасных» вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.
Начинайте со шрифта, который вы хотите использовать, и заканчивайте обобщенным семейством, чтобы позволить браузеру выбрать схожий шрифт из обобщенного семейства, если ни один из указанных шрифтов не доступен.
Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов «Times New Roman».
Более одного семейства шрифтов указывается через запятую:
Пример
p.serif
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
Стиль Шрифта
Свойство font-style в основном используется, чтобы указать курсивный текст.
Это свойство имеет три значения:
Пример
p.normal p.italic p.oblique
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
Размер Шрифта
Свойство font-size устанавливает размер текста.
Возможность управлять размеров текста важна в веб дизайне. Однако вам не следует использовать настройки размера шрифта, чтобы сделать параграфы похожими на заголовки, или, наоборот, заголовки сделать походими на параграфы.
Всегда используйте подходящие теги HTML, например
для заголовков и
Значение font-size может быть абсолютным или относительным.
Если вы не указываете размер шрифта, то размер шрифта по умолчанию, размер обычного текста, например в параграфах, равен 16px, т.е. 16 пикселей (16px=1em).
Установка Размера Шрифта в Пикселях
Установка размера шрифта в пикселях дает вам полный контроль на размером текста:
Пример
h1 h2 p
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
Пример выше позволяет браузерам Firefox, Chrome, и Safari изменять размер текста, но не Internet Explorer.
Размер текста может быть изменен во всех браузерах, используя инструмент увеличения (zoom) (однако, это изменяет размер страницы в целом, а не только текста).
Установка Размера Шрифта с Помощью Em
Чтобы избежать проблем изменения размера в Internet Explorer, многие разработчики используют единицы em вместо пикселей.
Единицы размеры em рекомендуются W3C.
1em равен текущему размеру шрифта. Размер текста по умолчанию в браузерах равен 16px. Таким образом, размер по умолчанию одной единицы em равен 16px.
Размер может быть вычислен из пикселей в единицы em, используя эту формулу: пиксели/16=em
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
В примере выше, размер текста в em такой же, как и в предыдущем примере в пикселях. Однако, указывая размер в em, становится возможным подгонять размер текста во всех браузерах.
К сожалению, по-прежнему остается проблема с IE. При изменении размера текста, он становится больше чем должен, когда увеличиваешь его, и становится меньше, чем должен, когда уменьшаешь его.
Использование Комбинации Процентов и Em
Пример
body h1 h2 p
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!
Еще примеры
Установка степени жирности шрифта Этот пример демонстрирует как установить степень жирности шрифта.
Установка разновидности шрифта Этот пример демонстрирует как установить разновидность шрифта.
Все свойства шрифта в одном объявлении Этот пример демонстрирует как использовать стенографическое свойство, чтобы установить все свойства шрифта в одном объявлении.
Одним из самых простых способов воздействовать на дизайн веб-страницы являются шрифты, которые вы используете. Данное руководство поможет вам найти шрифт, который лучше всего подходит для вашей ситуации.
Некоторые правила 1.Не использовать более 3-4 шрифтов на одной странице. 2.Не изменить шрифт в середине предложения, пока у вас нет очень веских оснований. 3.Sans-Serif для онлайн версии, Serif для печати. 4.Monospace для пишущей машинки и кодов. 5.Script и fantasy для важных штрихов.
Sans-serif шрифты являются основой Вашего Сайта Sans-serif это те шрифты, которые не имеют «засечки»: маленькие крючки в конце письма. Если у вас были какие-либо курсы дизайна печати, вероятно, было сказано, что вы должны использовать только sans-serif для заголовок. Это не относится к Интернету. Веб-страницы предназначены для просмотра веб-браузерами, на компьютерных мониторах. И компьютерные мониторы не имеют такую же хорошую резолюцию, как бумага. Это означает, что когда ваши читатели смотрят страницу с serif шрифтами на экране, маленькие засечки делают текст трудным для чтения.
Всегда используйте sans-serif для основной копии Вашей веб-страницы.
Некоторые примеры шрифтов без засечек (sans-serif):
•Arial •Geneva •Helvetica •Lucida Sans •Trebuchet •Verdana Verdana это семейство шрифтов, который фактически был изобретен для использования в Интернете.
Использование Serif шрифтов для печати Хотя Serif шрифты трудно прочитать онлайн, они идеально подходят для печати.
Некоторые примеры Serif шрифтов:
•Garamond •Georgia •New York •Times •Times New Roman Monospace используется для примеров кода Даже если ваш сайт не о вычислительной технике, вы можете использовать monospace, чтобы предоставить инструкции, приводить примеры или показать машинописный текст. Monospace буквы имеют одинаковую ширину для каждого символа, поэтому они всегда занимают одинаковое место на странице. Пишущие машинки обычно использовали monospace шрифты.
Некоторые примеры monospace шрифтов:
•Courier •Courier New •Lucida Console •Monaco Не используйте Fantasy или Cursive для основного текста (body text)
Используйте fantasy и cursive шрифты в изображениях и заголовках.
Дизайнерам на выбор доступны тысячи шрифтов, и в первую очередь необходимо решить, какой шрифт использовать — с засечками или без засечек. Узнайте, как этот выбор влияет на результат в целом.
Выбор между шрифтами Serif и Sans Serif
«Шрифтовое оформление прежде всего относится к искусству создания надписей, — говорит дизайнер Дилан Тодд. — При разработке шрифта выбранное начертание создает определенное настроение».
Гарнитуры шрифтов могут многое рассказать о том, на что вы смотрите. Например, шрифт на логотипе может дать представление об истории компании и о ее отношении к аудитории. Шрифт в рекламных материалах может намекать, на какую аудиторию рассчитана реклама, а шрифт на обложках книг и кинопостерах — на их жанр. Выбрать подходящий шрифт для конкретного проекта непросто, поэтому для начала необходимо решить, какой шрифт лучше использовать — Serif или Sans Serif.
Что такое засечки?
Засечки — это небольшие линии на концах букв. Их происхождение окутано тайной; по одной из теорий, они появились, когда писцы оставляли небольшие следы кистью или пером на конце каждого штриха. Со временем такие декоративные штрихи начали добавлять намеренно, и они стали непременной частью букв.
Узнайте больше о шрифтах
Ищете краткий курс? Изучите основы шрифтов в данном руководстве, чтобы понять, как использовать шрифты в работе.
Когда использовать шрифты с засечками
Шрифты с засечками могут выглядеть авторитетно, профессионально и демонстрировать всю важность истории или опыта. Шрифты с засечками, такие как Times New Roman, являются признаком старого машинописного стиля: The New York Times и другие авторитетные издания, существующие уже более века, все еще используют этот шрифт. «Такие шрифты выглядят немного старомодно», — говорит дизайнер Мэдлин ДеКотс.
«Шрифты Serif могут выглядеть более чопорно и формально», — говорит Тодд, который использует шрифты с засечками для отсылки к прошлому. Работая над дизайном книги, действие которой происходит во время Второй мировой войны, Тодд использовал шрифты с засечками, чтобы создать у читателей ощущение присутствия в мире, существовавшем до возникновения современных традиций дизайна.
Однако шрифты с засечками не просто создают эстетичный вид. Они также имеют реальное функциональное значение для основного текста. «Шрифты с засечками зачастую обеспечивают большую разборчивость мелкого текста, — говорит ДеКотс. — При чтении книги, напечатанной шрифтом с кеглем 9,5 пунктов, буквы с засечками легче различать и, следовательно, проще читать».
Изучите основы кернинга
Важно не только то, какие буквы вы используете. Расстояние между ними также имеет значение. Изучите основы кернинга в этом руководстве по Adobe Illustrator.
Когда использовать шрифты без засечек
Несмотря на то, что некоторые образцы древней письменности не имеют засечек, например скандинавские руны, шрифты Sans Serif в основном ассоциируются с современными шрифтами. В 1928 году Futura стал одним из первых популярных шрифтов без засечек, вскоре появились и другие шрифты без засечек, такие как Helvetica.
Сначала гарнитуры шрифтов Sans Serif воспринимались неоднозначно и иногда назывались «гротескными». Но когда дизайнеры-модернисты, такие как приверженцы школы Баухаус, начали активно использовать шрифты Sans Serif, они стали ассоциироваться с ультрасовременным дизайном, коммерцией и попыткой модернизма разрушить прошлое.
Эти ассоциации существуют до сих пор; например, Тодд использует шрифты Sans Serif для комиксов, действие которых разворачивается в современном, космополитичном и ориентированном на моду Лос-Анджелесе. Однако гарнитуры Sans Serif также могут напоминать современную рукопись, в которой отсутствуют дополнительные штрихи, ставшие результатом письма кистью или пером. «Существует общепринятое мнение, что шрифты Sans Serif должны имитировать рукописный текст, который отличается большей плавностью», — говорит Тодд.
Шрифты Sans Serif также эффективно использовать в случаях, когда для текста мало места. Вывески, текст в приложениях и названия на картах обычно набираются буквами без засечек. (Конечно, есть исключения. Некоторые семейства шрифтов Sans Serif, такие как Arial, в основном предназначены для основного текста — текста, который состоит больше, чем из одного или двух предложений.)
«При разработке приложения или сайта обычно используются шрифты Sans Serif, — говорит ДеКотс, — поскольку отсутствие удобочитаемости — главная проблема для экранов небольшого размера и экранов с низким разрешением. Шрифты Sans Serif также применяются для оформления вывесок и указателей». Clearview, один из наиболее распространенных шрифтов в США, является шрифтом семейства Sans Serif. Он был специально разработан для дорожных знаков. Водителям нужно прочитать небольшой текст с дальнего расстояния, и в этом случае шрифт без засечек — то что надо.
Узнайте, как комбинировать шрифты, чтобы максимально эффективно использовать различные шрифты и их семейства для оформления проектов, в этой статье из журнала Adobe Create.
Факторы, которые следует учитывать при выборе шрифта для вашего следующего проекта.
Serif или Sans Serif, вот в чем вопрос
Большинство шрифтов можно разделить на две основные категории: с засечками и без засечек. Шрифты serif содержат штрихи на концах каждой буквы, а шрифты sans serif не имеют никаких дополнительных элементов. Первые гораздо старше, они появились по подобию почерка. Шрифты без засечек, в свою очередь, моложе, они были созданы с развитием типографии.
До сих пор не существует единого мнения, какой тип шрифта стоит применять в разных форматах текста, но как правило, любая категория одинаково удобна для чтения в любом формате от интернета до печати.
Варианты начертания
Основные варианты начертания — это жирный, полужирный, обычный, курсив, светлый и т. д. Для некоторых шрифтов выбор вариантов начертания ограничен, что затруднит добавление выделений при форматировании текста.
Хотя выбор шрифта с большим количеством стилей начертания кажется логичным, будьте осторожны при их использовании. При верстке стоит руководствоваться принципом — чем меньше, тем лучше.
В приведенном выше примере из всех вариантов шрифта Merriweather я бы в подавляющем большинстве случаев использовал только обычный, жирный шрифт и курсив.
Какой шрифт выбрать именно вам
Шрифт для приглашения на мероприятие может не подойти для основного текста веб-сайта.
В данном примере я использую Baskervville, sans serif, заданный по умолчанию, и Dancing Script. Обратите внимание, что и Baskervville, и стандартный sans serif разборчивы и удобны для чтения, несмотря на то, что они сильно отличаются друг от друга. А вот Dancing Script в таком формате очень трудно читать. Несмотря на то, что Dancing Script вообще довольно элегантный, для длинных текстов он никуда не годится. Зато в приглашениях на мероприятие он будет очень кстати.
Продумайте концепцию своего бренда
Шрифт является элементом фирменного стиля вашего бренда. Он должен отражать отличительные особенности компании, продукта, проекта и т.д. Шрифт поможет создать для бренда забавный, запоминающийся или, например, эксцентричный образ.
Чтобы проиллюстрировать, как шрифт может взаимодействовать с читателем, я применил Monoton, Amatic SC и Cinzel. Они немного своеобразные, поэтому я вряд ли буду ими пользоваться в дальнейшем, но если бы я их применил, то ограничился бы заголовками и подобрал бы подходящий шрифт для остального текста.
Используйте шрифтовые пары
Комбинирование различных шрифтов позволяет дизайнеру добавить в композицию больше уровней визуальной иерархии.
Некоторые пары сочетаются лучше, чем другие. Не существует строгих правил для составления гармоничных пар. Опирайтесь на сходство или контраст, избегайте конфликтов, а главное — не переусердствуйте: лучше сочетать два шрифта, чем три.
Помните про глифы
Некоторые шрифты имеют более функциональный набор символов. Поначалу вы можете об этом не задумываться, но когда понадобится определенный набор, нужных символов может не оказаться, и у вас могут возникнуть трудности.
Изучите Google Fonts — ресурс для поиска бесплатных шрифтов
Насколько успешно будет применен выбранный вами шрифт в конечном итоге, зависит только от вас!
Считается, что на дисплеях компьютеров шрифты sans-serif легче читать, чем шрифты serif.
