Одним из самых простых способов воздействовать на дизайн веб-страницы являются шрифты, которые вы используете. Данное руководство поможет вам найти шрифт, который лучше всего подходит для вашей ситуации.
Некоторые правила 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 шрифты в изображениях и заголовках.
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
Попробуйте сами » Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает
Наш код теперь работает идеально! Он показывает одинаковый размер текста во всех браузерах, и позволяет всем браузерам изменять размер текста корректно!
Еще примеры
Установка степени жирности шрифта Этот пример демонстрирует как установить степень жирности шрифта.
Установка разновидности шрифта Этот пример демонстрирует как установить разновидность шрифта.
Все свойства шрифта в одном объявлении Этот пример демонстрирует как использовать стенографическое свойство, чтобы установить все свойства шрифта в одном объявлении.
Serif или Sans Serif: что выбрать и для каких целей в веб-дизайне
Вопросы выбора подходящего шрифта для интернет-проекта вечны, а дискуссии длятся практически бесконечно. Но существуют особенности и нюансы, которые важны всегда и которые учитываются веб-мастерами. Так как выбрать между шрифтами Serif и Sans Serif? Что важно помнить и так ли важен общий стиль дизайна сайта? Об этом и не только в материале ниже.
Многолетняя дискуссия среди дизайнеров в полиграфии и цифровом пространстве не смолкает и не прекращается. Каким должен быть идеальный шрифт проекта? Какого размера использовать на сайте и почему при одинаковой визуализации изображение и шрифт в полиграфии воспринимаются совсем не так, как если на это же самое смотреть на экране монитора? Но при этом смысл всех вопросов и дискуссий один: шрифт должен быть с засечками или без засечек?
Иными словами, как все мы знаем, шрифтов много, но по факту они бывают строгие брусковые и более «игривые» с засечками. И как мы не раз разбирали эту тему оба шрифта удачно используются в веб-дизайне. Но вот ведь какой момент: трендов так много, изменений, развитий, а как дело доходит до выбора шрифта – снова мучения.
Давайте подумаем обо всем том, что каждый из нас знает о засечках и не засечках, о мифах вокруг таких шрифтов. Подумаем об анатомии засечек и не только. Тогда гораздо проще будет понять и определиться, в каких случаях нужно (именно «нужно») использовать Serif или Sans Serif.
Анатомия засечек
Шрифты с засечками являются одними из самых старых современных шрифтов. Именно они и используются во всем: от книгоиздания, газет и журналов до плакатов на рекламных щитах и, разумеется, встречаем мы их и в веб-дизайне. Так что это за засечки?
Это маленький декоративный элемент, который расходится в стороны от букв. Он может выглядеть как хвостик: острый или тупой, декоративный или обычный. При этом каждая гарнитура засечки имеет отличительный стиль для данного набора, что делает семейство шрифтов узнаваемым и отличаемым от других. Засечки (Serifs) появляются на всех буквах (строчных и прописных) в пределах одного семейства шрифтов, а также и на глифах, цифрах и других символах, что входят в данный набор.
Но засечки это не только графический штрих, это – настроение и чувства. Это самые разные ассоциации, возникающие у смотрящего на них. Обычно такие ассоциации, воспоминания, фантазии связывают с уверенностью, элегантностью, классичностью и чем-то немного формальным. Если вы открываете художественную книгу, с вероятностью 90% будет присутствовать шрифт с засечками. Открывая сайты нестрогой тематики (кафе, дизайн-студий, блоги, туристические и иные тематические ресурсы), мы тоже подсознательно ожидаем именно шрифт с засечками. Например, еда или напитки пробуждают чувства, разные, а значит строгим и унылым сайт просто не может быть.
Отправляясь к Sans Serif
Шрифты без засечек считаются более современными и могут состоять из букв разной ширины и формы. И здесь, да, засечек нет, поэтому они воплощают собой простоту и внешнее спокойствие, поскольку нет никаких декоративных элементов. Хотя, к слову, почувствовать безмятежность с ними невозможно. При этом, несмотря на то, что края букв могут быть немногого закруглены или, наоборот, иметь прямые углы, это все равно строгие прямые, немного грубые символы.
Что же касается чувств и настроения, то Sans Serif передают все краски современности, минимализма, чистоты и прямоты. Если смысл контента или тематики – донести ясную информацию, конкретную и важную, то именно шрифты без засечек будут важны и необходимы. Согласитесь, но сайт мэрии города со шрифтом Serif смотрелся бы не столь строго и официально.
В тоже время шрифты без засечек используются в тех же тематиках, что и шрифты с засечками. Например: codigovision, ultragroup, vita-electricskinhair, fubiztalks.
Мифы разных шрифтов
Темы общие, а шрифты разные. Но почему же? Как приходят к такому выбору веб-дизайнеры? Что на этот самый выбор так сильно влияет? Проблему выбора усугубляют, в частности и в большей мере, мифы, которые мы можем почти каждый день встретить в разных источниках. И если в прошлом некоторые из этих мифов и слухов, возможно, имели некоторое доверие со стороны дизайнеров, современные методы публикации (печатные и онлайн) существенно уменьшили разрыв между шрифтами (с засечками и без засечек) и читаемостью. Во многих случаях проблема читаемости не основана на типе шрифта, а скорее кроется в фактическом шрифте и его применении.
Посмотрим на некоторые мифы внимательнее…
Для печати нужен только Serifs
Этот миф повторяется постоянно. Но посмотрим на atomkyrkan, galialahav и другие примеры, которых в этом и других материалах нашего блога было большое количество. Везде шрифты с засечками используются красиво. Они прекрасно читаются и добавляют акцент к общей концепции дизайна.
Но откуда этот миф пришел? С одной стороны, раньше качество экранов было хуже, а передача графики в полиграфии была заметно на высоте, поэтому засечки попросту были не видны на мониторах. Да и до сих пор качество печатных публикаций заметно выше. Сейчас экраны мониторов, смартфонов, планшетов имеют более высокое качество, четкость, поэтому, разумеется, что данный аргумент стараются развенчать.
Sans Serifs только для веб-дизайна
Аналогично предыдущему мифу, некоторые дизайнеры уверены, что на веб-сайтах нужно использовать только шрифты без засечек. Любой текст необходимо набирать строгим и простым шрифтом. Это несколько неверно. Да, на протяжении многих лет дизайнеры использовали такие шрифты в печати. Но, чтобы связать Sans Serifs только с цифровой публикацией – смешно. Посмотрите на количество книг и журналов, которые используют Sans Serifs для обложек и в тексте всей публикации.
Sans Serifs слишком неформален
Использование шрифта Sans Serif само по себе не делает сообщение неформальным (неофициальным). Даже наоборот, придает ему строгости. Но он может стать таковым при использовании с другими шрифтами или в сочетании с декоративным шрифтом.
В то же время одна из приятных особенностей шрифта без засечек заключается в том, что он имеет тенденцию вбирать в себя характеристики окружающих шрифтов. Таким образом, засечки или без засечек в сочетании со шрифтом старой стилистики будут иметь возрастное и классическое ощущение. Примеры baileyscreamers и brandaffair как раз и демонстрируют варианты, когда шрифт без засечек выглядит не строго, не официально, а наоборот, подчеркивает непринужденность и легкость тематики, цветов, настроения и контраста.
Шрифт с засечками сложно читать
Исследования удобства читаемости печатной продукции и в интернете, напротив, обнаруживали, что шрифты с засечками легче читать. Причина проста и возможно некоторым покажется необычной, но засечки, эти самые штрихи, делают каждый символ (букву) более своеобразным, оригинальным. Человеческому же зрению свойственно быстрее и легче распознавать более различные между собой символы. Отсюда и следует, что шрифты с засечками быстрее воспринимаются, скорость чтения повышается, нежели долго смотреть на одинаковые строгие прямые буквы без засечек и уловить тот момент, когда глаза начнут сбиваться со строки.
Кроме того, этот стиль (с засечками) помогает направлять поток букв, слов, предложений и абзацев, потому что штрихи эти способны помочь и «подтолкнуть» человека от одной буквы к другой.
Засечки могут использоваться для увеличения интервала между буквами
Sans Serifs повышают внимание к контенту
Посмотрим сразу на два примера: agostinetto-wine и expressbank.
Количество внимания к дизайну сайта не основывается только на гарнитуре шрифта. Это вопрос цвета, образности, контраста и типографики. Внимание человека может быть поглощено тогда, когда совокупность всего этого заинтересовывает сознание и мысли.
Сайт банка создан с помощью шрифтов без засечек, жирных, драматических и привлекающих внимание. Они имеют разный размер и разный цвет (оттенки).
Сайт винного бренда имеет основной шрифт с засечками, одного цвета, но разного размера. При этом даже этикетки бумажные выполнены с использованием данного вида шрифта. Это притягивает взгляд, шрифт удобно читать, понятно и все в целом очень даже нераздражительно.
Но что самое интересное, оба эти варианта одинаково эффективны, удобны и способны донести до пользователя всю суть ресурса и контента.
Завершение и мысли
И снова вопросы. Так что же лучше выбирать: шрифт с засечками или без? Есть ли правила по тематикам и стилям дизайна? Существуют ли исследования правильности выбора? Нет и нет. Это все зависит только от настроения веб-дизайнера, индивидуальных особенностей проекта, от использования шрифтов. Лучший ответ, как правило, не менее ясен, но дается всегда – сочетания обоих стилей. И неважно, в каком проекте: полиграфия или цифровое пространство.
Serifs и sans serifs могут работать везде на отлично. И в приложениях, и на сайтах, и в книгах, плакатах, флайерах и прочем. Но ключом для проектирования или создания инструмента, что позволит преобразить всю концепцию проекта в целом, является сопоставление цели проекта и стиля шрифта с содержимым (контентом).
Сайты банковской тематики, в целом, могут иметь шрифт с засечками, но в небольшом объеме, поскольку контент должен подаваться четким и ясным для пользователей, чтобы его можно было быстро понять и не возникало двоякости. Но сайт отеля только визуально выиграет от того, что в оформлении и в содержании будет шрифт с засечками, а иногда еще будет и курсивным. Но вот создавая сайт ресторана, у дизайнера есть большой выбор в сторону сочетаний и возможностей использования даже декоративных элементов и символов (без фанатизма по количеству).
Проще говоря: нет тематик, но есть смысл содержания и цель проекта, которые влияют на выбор и цветов, и контраста, и типографики.
Факторы, которые следует учитывать при выборе шрифта для вашего следующего проекта.
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 — ресурс для поиска бесплатных шрифтов
Насколько успешно будет применен выбранный вами шрифт в конечном итоге, зависит только от вас!
Дизайнерам на выбор доступны тысячи шрифтов, и в первую очередь необходимо решить, какой шрифт использовать — с засечками или без засечек. Узнайте, как этот выбор влияет на результат в целом.
Выбор между шрифтами 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.
Считается, что на дисплеях компьютеров шрифты sans-serif легче читать, чем шрифты serif.
