Лучший шрифт для сайта – Встречаем: 15 лучших безопасных веб-шрифтов
08.09.2019 
Разное
Встречаем: 15 лучших безопасных веб-шрифтов
Одной из главных задач веб-дизайна является подбор правильных стандартных шрифтов. Сервисы для внедрения шрифтов, такие как Google Web Fonts или Typekit, были созданы в качестве альтернативы с целью предоставить что-то новое.
Их очень просто использовать. Рассмотрим в качестве примера сервис Google Web Fonts.
Выбираете шрифт Open Sans, Droid Serif или Lato. Пишите код и вставляете его в элемент <head> HTML-документа. Все готово, чтобы ссылаться на него в CSS! Весь Процесс занял не более 60 секунд. Причем все совершенно бесплатно.
Какой-то шрифт может быть доступен не для всех. А это означает, что могут проблемы. Вы довольны тем, что выбрали красивый шрифт для сайта, а посетитель веб-страницы видит вместо него безобразную писанину.
Такого не случится, если реализовать резервный вариант.
Насколько важно применение безопасных веб-шрифтов?
У каждого устройства есть собственный набор предустановленных шрифтов. Какой именно, зависит от операционной системы. Беда в том, что между ними есть небольшие различия.
А сайты? Например, этот? Шрифт, который видите вы, может быть вовсе не тем, который изначально прописан для сайта.
Что это значит? Допустим, что дизайнер выбрал для сайта какое-то семейство платных шрифтов. Если у вас они не установлены и не предоставляется специальным веб-сервисом, то шрифт, который вы видите, — один из стандартных вариантов. Например, Times New Roman.
Поэтому как на вашем экране текст может выглядеть просто ужасно.
А вот стандартные шрифты для сайта есть во всех операционных системах. Это небольшая коллекция, доступная в Windows, Mac, Google, а также Unix и Linux.
С помощью этой подборки дизайнеры, а также владельцы сайтов могут указать, какой именно шрифт следует применить в качестве резервного. Таким образом, появляется возможность контроля над тем, как будет выглядеть страница на разных устройствах.
В качестве запасного варианта разработчик подбирает шрифт, очень похожий на оригинальный, и именно он будет продемонстрирован пользователю.
Взглянем на подборку самых популярных стандартных шрифтов HTML.
Считается стандартным в большинстве случаев. Самый распространенный из шрифтов «sans serif» или рубленых шрифтов (у которых нет засечек на кончиках букв). Его часто используют в Windows для замены других литер.
Helvetica — палочка-выручалочка для дизайнеров. Этот стандартный веб шрифт работает практически всегда (по крайней мере, в качестве подстраховки для других шрифтов).
Выполняет ту же роль для шрифтов с засечками, что и Arial для тех, что без засечек. Он является одним из самых популярных на Windows-устройствах. Это обновленная версия старого шрифта Times.
CSS стандартный шрифт Times знаком большинству. Многим он запомнился по маленьким буквам в узких колонках старых газет. Самый обычный, ставший традицией, вид печати.
Похож на Times New Roman и применяется в качестве разновидности старой классики. Он также считается моноширинным шрифтом. В отличие от шрифтов с засечками и без, все его знаки имеют одинаковую ширину.
Старый шрифт фиксированной ширины, который используется в качестве резервного почти на всех устройствах и операционных системах.
Verdana может по праву считаться истинным веб-шрифтом (true web font) благодаря простым линиям, выступающим в роли засечек, а также большому размеру. Его буквы слегка вытянуты, поэтому легко читаются на экране.
Стандартный web шрифт Georgia формой и размером напоминает шрифт Verdana. Его знаки больше, чем у других шрифтов того же размера. Но лучше не применять его в паре с другими. Тот же Times New Roman, по сравнению с ним выглядит словно карлик.
Palatino относится к эпохе ренессанса. Никаких шуток. Это еще один крупный шрифт, который идеально подходит для интернета. Обычно он используется в заголовках и рекламе.
Еще один старинный шрифт, который появился еще в 16 веке в Париже. Его новая и улучшенная версия входит в комплект стандартных в большинстве Windows-устройств. Позже данный шрифт был взят на вооружение и другими операционными системами.
Bookman (или Bookman Old Style) — один из лучших стандартных шрифтов для заголовков. Его характерная черта — удобочитаемость даже при использовании маленького размера.
Comic Sans MS — забавная альтернатива для шрифтов с засечками.
Это шрифт средневековой тематики, изначально разработанный корпорацией Microsoft в середине девяностых годов. Он применялся в Windows XP. Сегодня с его помощью составляют основной текст.
Аналог стандартного шрифта для сайта Arial. Правда, он больше, толще и жестче. Своими пропорциями он похож на шрифт Helvetica. А это важно. Им можно успешно заменить Helvetica без необходимости покупать лицензию.
Еще один замечательный шрифт для выделения заголовков. Он хорошо смотрится в короткой фразе, состоящей из нескольких слов, а также в длинных предложениях.
Стандартные шрифты — это запасной вариант на случай провала плана А. Десятилетиями они широко используются на большинстве устройств.
А если нет? Helvetica не подкачает!
Данная публикация представляет собой перевод статьи «15 Best Web Safe Fonts» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Какой шрифт лучше использовать для своего сайта?
Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта?», многие на это не обращают внимания, а зря!
Каждому начинающему веб-мастеру хочется как-то выделить свой сайт, чтобы он отличался от бесчисленного множества ресурсов, сделанных по шаблону.
Одним из способов считается отбор шрифтов для сайта, диапазон выбора которых не так велик. Задача веб-мастера сделать процесс чтения информации максимально комфортным. Но использование нескольких шрифтов может отпугнуть пользователя. А применение одного сделает ресурс однообразным и серым. Многие пытаются установить уникальный шрифт на страницу, но забывают о том, что он может не отобразиться у пользователя в компьютере. Ведь он не встраивается в веб-страницу.
Поэтому, если у человека на компьютере не установлен тот или иной шрифт, отображаться он у него не будет. Во избежание проблемы следует выбирать доступные, так называемые
Часто используемые шрифты
Стандартные шрифты для сайта это:
- Times New Roman;
- Arial; Georgia;
- Impact;
- Trebuchet MS;
- Verdana и другие.
Они входят в группу безопасных. Рассмотрим их подробней:
Arial. Преимущество этого компактного шрифта в высоте букв.
Tahoma. Благодаря средне-широким буквам, идеально-подходящий для технических статей.
Trebuchet MS. Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.
Times New Roman. Самый распространенный и широко-используемый шрифт. Идеально подходит для чтения, но при размере 12 px выглядит мелким.
MS Sans Serif. Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.
Georgia. Очень похож на Times. Но в нём более широкие и резкие засечки и концы.
Comic Sans MS. Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.
Courier New. Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием. —Минус: ненасыщенный цвет.
Impact. Отличается сжатием между символами, толстыми штрихами и небольшим пространством в буквах. Широко применим в заголовках, так как близкое расстояние между буквами делает чтение основного текста неудобным.
Verdana. Идеальный для сайта вариант шрифта. Благодаря оптимальному расстоянию между буквами и их ширине читается комфортно.
Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст — Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.
Бывает, шрифт не отображается на компьютере. В таком случае следует прописать не один шрифт, а несколько.
Например, Verdana, Impact, Trebuchet MS. Тогда браузер после неудачной попытки использования Verdana попытается использовать Impact, а затем Trebuchet. В случае не отображения всех заданных шрифтов, система обозначит свой — по умолчанию. Таким образом, можно легко и просто оформить сайт на свой вкус, сделать его ярким и необычным. Главное — предотвратить проблемы при отображении на компьютерах посетителей ресурса.
Нововведение от Яндекс. Размер имеет значение!
Вслед за мобильным алгоритмом «Владивосток», Яндекс сделал фактором ранжирования размер шрифта. Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.
Эта новость вызвала негативную критику у создателей сайтов. Ведь, например, ресурсам, сделанным с использованием flash- технологии, для того, чтобы нормально отображаться на экранах мобильных устройств, придется создавать специальное приложение. А это отнимет много времени и денег.
Часто будет получаться, что сайты, в которых тексты комфортны и удобочитаемы для пользователя, в мобильных версиях будут иметь огромный размер.
Новая проверка невосприимчива к рекламе. При наличии на странице рекламных блоков она ругается на размер шрифта. Реклама убирается — масштаб становится нормальным.
Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma — 12 px — выглядеть они будут по-разному. Последний, визуально будет смотреться больше.
babosik.ru
Шрифт для сайта — как найти подходящий? 20 рабочих советов!
Правилам написания слов, а поначалу слова рисовались целиком — одним символом, более 3000 лет. Ушки этого искусства, которое назовут позднее каллиграфией, торчат из древнего Египта и не менее древнего Китая. В Китае невозможно было стать чиновником, не сдав экзамен на это искусство, а это 50 тысяч иероглифов! В средневековой Европе человек, умеющий красиво писать, был вполне обеспеченным горожанином, настолько востребовано это было. Даже сейчас дизайнер, придумавший новое начертание мгновенно становится знаменитостью. Нам же предстоит лишь использовать достижения создателей электронного почерка, чтобы подобрать лучший шрифт для сайта и его подходящие сочетания. Об том мы поговорим с Иваном Бурыкиным. Кто не знает – это я. Поехали…
Как создаются шрифты для сайта?
Если вы думаете, что сел художник и начал лепить из ничего, то вы глубоко заблуждаетесь. Там конечно есть элементы творения в начале, но затем идет чистая математика с геометрией. И выглядит это так:
Перед вами исторические кадры создания букв для операционной системы Mac. Стив Джобс уделял этому направлению огромное внимание и буквально загонял этот отдел. Следы его творения переживут даже айфоны, они останутся с нами навсегда.
Красивые шрифты для сайта и их Правила:
1. Написание, его характер и настроение должно точно соответствовать общему стилю сайта! Если у вас на фоне утонченный пейзаж, нельзя использовать акцидентный (от слова акцент) кричащий текст плакатов. Здесь скорее подойдет фон яркий, как пламя ревущей домны. А вот на умиротворяющем фоне и буквы подойдут нежные, как котенок. Следуйте настроению, ловите его!
2. Избегайте использование более двух видов компьютерного почерка, максимум три, но это уже должно быть оправдано замыслом. То же самое относится и к гарнитурам: норм, жирная, курсив… Хотя…, напортачить можно и в одной категории если вы, например, выберете жирное (акцентное) написание для заголовка и для основного текста. Варьируйте, не обязательно всё время кричать, оглохнут! Действуйте по принципу прилива и отлива, эмоционально это то самое, что надо.
3. Так же нельзя использовать в заголовке и в основе рукописный тип печати.
4. Если выбрали один тип печати, то вы точно не ошибетесь, если используете надпись из одной группы. Вроде этого PT Sans и PT Serif.
5. Отличный прием если вы используете в заголовке печать с засечками (см. рисунок), а в основе без них. Наоборот тоже эффектно и со вкусом.
Выбирать там и там с засечками или без них можно лишь в том случае, если варианты радикально не похожи.
6. Прежде чем выбрать, определите каждому выбранному стилю написания свою индивидуальную задачу и придерживайтесь её до конца.
7. Подбирайте виды печати слов исходя из одинакового размера букв по высоте и ширине букв, при одинаковом размере набора — пт.
8. Посмотрите, как сочетаются буквы разных типов печати. Например, заглавное «О» очень плохо будет смотреться, если в одном она будет круглая, а другом овальная.
9. По причинам, изложенным во втором пункте, избегайте одинаково нарисованных вариантов похожих на одну гарнитуру. Так Didot и Rockwell имеют очень похожее на жирное написание.
10. Используйте разные цвета для каждого типа начертания слов. Совместимость цветов между собой и с фоном можно подобрать на онлайн-сервисах, например, Adobe Color CC. После подбора используйте следующий прием проверки: прищурьте глаза и взгляните на сочетание, если перед вами размытое пятно – неправильный выбор, визуальное разделение – правильный.
11. Пробуйте играть с контрастами. Изменяйте межстрочный интервал, расстояние между буквами (трекинг). Иногда это приносит неожиданные и хорошие результаты.
12. Применяйте написания одного исторического периода, часто они выполнены в одном стиле. Например, использовать шрифт Helvetica на сайте можно и нужно с Times Roman. Впрочем, это уже стало классикой.
13. Смотрим на то, как сочетаются курсивы у выбранных вами типов. Иногда они напрочь не соотносятся. Это не страшно, если не планируете использовать курсив в одном из видов.
14. Бесплатный шрифт не всегда удачный выбор. Часто там отсутствуют важные символы, что может стать крайне неприятным сюрпризом впоследствии. Проверьте — нет ли таких символов в вашем контенте.
15. Иногда, поймать созвучие помогает изменение размера букв (кегля). При одинаковом размере разные типы печати не смотрятся, а изменил и всё подходит.
16. Никогда не смешивайте виды набора, имеющие разную ширину букв (пропорциональные) и одинаковую (моноширинный вариант). Это полное отсутствие вкуса!
17. Не надо смешивать настроения. Легкомысленный Gill Sans не подойдет к деловому Times New Roman.
18. Комбинация должна быть легко читаемой, для этого визуально начертания должны различаться. Иначе, цели для которых мы избрали тот и другой вариант, будут неясны и в результате не раскрыты.
19. И последнее – НИКОГДА не используйте на сайте в качестве основы и заглавия Comic Sans. Это детям фотки в инстаграм подписывать. Если конечно у вас не стоит подобная цель.
20. И совсем-совсем последнее – Помните, правила существуют для того, чтобы их нарушать!
Кстати, в одном из предыдущих постов, я уже рассказывал и показывал, какой должна быть типографика в веб-дизайне.
Как подобрать шрифт онлайн:
- На мой взгляд, самым удобным сервисом для выбора созвучия является Fontstorage. Скачивать можно бесплатно, но самый вкусной фишкой является наличие полигона для подбора. Можно даже картинки вставлять, что совсем уже чудо, так как позволяет смотреть сочетания и с ними тоже. Очень удобно!
- Adobe Typekit – англоязычная платформа, но мне всё сразу стало понятно. Есть поле для вставки вашего варианта сочетания. Есть бесплатный вариант обслуживания и есть возможность купить необходимые вам платные варианты. Очень большая библиотека начертаний на выбор.
- Fonts.google – большой выбор кириллических вариантов.
- Если вы не знаете, какой перед вами экземпляр начертания и вас есть браузер Хром. То обязательно скачайте приложение WhatFont, оно поможет вам определить название любого понравившегося варианта в сети и определить самые удачные созвучия.
- Не забывайте об авторском праве и обязательно смотрите — платный избранный вами стандартный шрифт или нет. Это легко сделать, имея название и задав в поисковике соответствующий вопрос. Если заказчик требует установить платный, пусть платит за скачивание. За использование, он будет потом платить сам.
Статья получилась сложной, надеюсь у меня получилось ответить на вопрос — Как подобрать шрифт для сайта. Но главное, чтобы не вышло как в анекдоте:
Встречаю я приятеля, он спрашивает, чем я занимаюсь. Отвечаю, что веб-дизайном. А сколько зарабатываешь? Называю примерную сумму. Он помолчал и ушел. Через неделю от него звонок – Так, с работы я уволился, фотошоп установил. Что дальше?..
Учиться надо коллеги, учится! Если вы уже давно мечтаете стать веб-дизайнером, но у вас постоянно что-то не получается, то я могу вам помочь. Обратите внимание на раздел — Обучение веб-дизайну. Уже к кончу первого месяца, у вас будет своё портфолио и вы сможете зарабатывать удалённо.
До связи, Иван.
webdesignmaster.ru
Какой размер шрифта лучше для сайтов ? — Toster.ru
Я тоже постоянно задаю себе этот вопрос, но пока не видел ни одного исследования по этой теме. Могу только поделиться своим личным опытом и наблюдениями. Слежу за сервисами и тем, как они отображаются на разных экранах в течение последних 6 лет.Пять лет назад базовым размером стандартного шрифта, используемого для вывода текстов для чтения, считалось 12-13px. В то время как шрифт в 10-11px использовался для мелких подписей. За последние несколько лет произошло увеличение этих размеров. Сегодняшние сайты, задающие тренды, используют для вывода тестов для чтения размер шрифта 14-16px. Соответственно для мелких подписей используется уже шрифт не менее 12-13px.
Связано это прежде всего с тем, что за последнее время сильно увеличилось разрешение экранов при сохранении их физических размеров, а то даже и при их уменьшении. А это значит, что увеличивается плотность пикселей, а значит и шрифт одного и того же размера начинает выглядеть мельче. В 2012 году самым популярным стал экран с разрешением 1366px шириной, вытеснив лидера всех прошлых лет с шириной 1024px: habrahabr.ru/post/141948/.
По моему личному опыту скажу, что на мониторах с разрешением 1366px и выше стандартные системные шрифты размером 12px в текстах для чтения выглядят уже очень недружелюбно, приходится всё время увеличивать их размер с помощью браузера или наблюдать, как люди щурятся, вглядываясь в экран. Оптимальным оказывается как раз размер 14-16px.
Подбирая размер шрифта для чтения текста на вашем сайте, нужно понимать, какова статистика экранных разрешений вашей аудитории. В среднем по рунету мы видим, что пользователей с разрешением 1366px и выше примерно столько же, соколько и всех остальных: www.liveinternet.ru/stat/ru/resolutions.html?perio… Однако для Хабра, например, таких пользователей в 2 раза больше. А значит, для Хабра нужно делать размер шрифта крупнее.
Ну и конечно, не стоит забывать о том, что системные шрифты с засечками (Times New Roman, Georgia) выглядят мельче шрифтов без засечек (Verdana, Tahoma, Arial) при одних и тех же размерах. Чтобы Georgia смотрелась также как Verdana в размере 12px, нужно ставить ей 14px. Точно также отличаются видимым размером и несистемные, подгружаемые шрифты. На Lookatme используют шрифт ProximaNova-Regular размером 16px. Если вы попробуете прямо в браузере удалить этот шрифт из стилей, оставив только системый sans-serif, то увидите как этот системный шрифт увеличится. И чтобы он по размеру выглдяел бы как подгружаемый, нужно будет уменьшить в стилях размер до 15px.
toster.ru
Какой шрифт выбрать для сайта
От автора: типографская разметка – обширное поле деятельности. Люди посвящают годы своей жизни этому древнему ремеслу, и всегда найдется что-нибудь новое для изучения. В этой статье, я сделаю обзор основных моментов, которые следует обдумать при выборе шрифта для своего сайта и гарнитуры (набор из одного или нескольких шрифтов). После чего вопросы на подобие «Какой шрифт выбрать?» у вас отпадут сами по себе.
Практическая типографская разметка
При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить время на кернинг (подгонку пробелов между отдельными буквами) каждого заголовка большого вебсайта, вопрос даже не стоит. Другими словами, вы отказываетесь от контроля.
Сегодня я собираюсь сосредоточиться на практической разметке. Для меня это означает понимание того, что полного контроля над типографией своих вебсайтов вы никогда не получите. Выбор гарнитуры шрифтов, решение вопроса размера – это все те вещи, на которые мы, как дизайнеры, можем повлиять. Практическая разметка означает как, и еще более важно, зачем приводить в порядок то, что вам подконтрольно. Давайте начнем.
Читабельность при выборе шрифта
Перед тем как выбрать шрифт для сайта, вам следует ответить на некоторые вопросы. Что вы делаете с написанным? Читаете! Почему же множество вебсайтов так сильно усложняют это дело? Будь то крошечный размер шрифта, бессистемная высота строки или даже простые уродливые шрифты – кажется, многие сайты не хотят вам дать возможность нормально прочесть свое содержимое!
Сделав написанное удобочитаемым, вы немедленно опередите по крайней мере половину своих конкурентов, что на самом деле здорово, потому что не так уж сложно!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееКак выбрать гарнитуру шрифта?
Решая, какую гарнитуру применить на своем вебсайте, важно помнить: не перемудрите. Я знаю, как много дизайнеров недолюбливают использование Helvetica оттого, что она широко применяется. Я согласен, но это утверждение оставляет в стороне важные данные: почему. Люди слишком часто пользуются Helvetica, потому что он ужасно хорош. Он отлично подходит к любому дизайну, какой только можно себе представить, хорошо работает как в маленьком, так и огромном размере.
Установка такой ругаемой гарнитуры шрифтов может идти вразрез с вашими убеждениями, но если это работает, то принимайтесь за дело.
Основной текст, вероятно – как раз та часть дизайна, которая должна быть самой читабельной, так что убедитесь, что выбираете шрифт, который хорошо работает при маленьких размерах. Что я этим имею в виду? Если вы можете установить основной текст на 10px и все еще различать, о чем там пишется, то это отличный показатель читабельности гарнитуры шрифтов.
Это что касается основного текста, но как насчет заголовков, какой шрифт выбрать именно для них?
Вычислить читабельность больших заголовков гораздо проще, чем основных текстов. Если можно немедленно различить, о чем там пишется, то заголовок достаточно читабелен.
Хорошо то, что как только вы поработаете над достаточным количеством проектов, у вас сложится отличное представление о том, какие из гарнитур работают, а какие нет. С тех пор вы сможете лучше судить о том, какие шрифты выбирать.
Не существует формулы выбора верных шрифтов вашего вебсайта. Часто лучший способ решить, на каком остановиться – это попробовать каждый, который, как вы считаете, должен работать, а затем сравнить их. Выбор шрифтов на самом деле инстинктивен, но важно помнить, что 90% времени пользователь не будет раздумывать, что же за шрифт был тут применен, так что если он читаем – значит, достаточно хорош.
Выбор пары
Очень редко (если вообще бывает) случается ситуация, когда для использования на сайте подходит всего одна гарнитура. На среднем вебсайте используется много текстов. Не может получиться так, что одна гарнитура подойдет для них всех! Подавляющее большинство хорошо спроектированных вебсайтов применяют две: одну для основного текста и вторую для заголовков.
При выборе пары шрифтов важно обдумать, как они будут смотреться вместе. «Они достаточно похожи?» «Слишком похожи?» «Недостаточно разные?» Вы должны себе задать все эти вопросы. Я считаю, что лучший способ подобрать пару хорошо смотрящихся вместе шрифтов – просто поставить множество их рядом и решить, какие лучше. Нельзя этого узнать, пока не попробуете.
Иногда самыми подходящими будут два sans-serif, а в другое время вам понадобится sans для заголовков и serif для основного текста. Не имеет особого значения, что они смотрятся похожими, значение имеет то, что они действуют похоже. Это, конечно, зависит от остального дизайна вашего проекта. Какие бы шрифты вы не выбрали, они должны точно передавать ваше послание, и если это означает контрастные гарнитуры, тогда продолжайте в том же духе.
Саймон Коллисон (Simon Collison) использует в своем сайте идеально подобранные шрифты, выбирая мощный sans-serif для основных заголовков и простой Serif для всех прочих, меньших заголовков, а также для основного текста. Это партнерство искусно передает то, что пытается сказать вебсайт так, как не смог бы выразить каждый шрифт по отдельности.
Размер
Как правило, дизайнеры устанавливают размер основного текста как минимум на 12px. Большинство, однако, выбирают размер вроде 14px, который читается еще лучше. Выбрать размер шрифта основного текста довольно легко, а сложности начинаются с заголовками.
Насколько большими должны быть заголовки? Бывает по-разному. Собственными наблюдениями и в процессе создания вебсайтов я пришел к мысли, что заголовок должен быть настолько большим, насколько нужно. Это значит, что вы должны опробовать различные размеры, пока не найдете достаточно большой для привлечения внимания к чему следует, но не более того, если только огромный текст – не то, чего вы добиваетесь, и в таком случае продолжайте в том же духе.
Иерархия
По своей сути заголовок большой. На странице он – важный элемент, так что, естественно, он должен быть больше, правильно? И да, и нет. Да, заголовки обычно больше прочих элементов, и нет, это не единственный способ привлечь к ним внимание. Цвет, насыщенность и расположение в равной степени важны для учреждения четкой визуальной иерархии ваших страниц.
Ее ключевой момент, о котором нужно помнить – то, что все относительно. Текст на сайте просто должен выделяться по сравнению с другими текстами. Возьмите как пример сайт Уилсона Майнера (Wilson Miner). Его заголовки довольно маленькие для своей важности и на удивление близки по размеру. Однако использование им цвета дает возможность различить самые важные заголовки и придает им больше веса.
Использование типографии очень важно для установления визуальной иерархи, будь это посредством размера, цвета, плотности или даже размещения.
Межстрочный интервал
Межстрочный интервал, или пробел между строками текста, незаменимый инструмент читабельности. Плохой интервал может разрушить выдающийся при других условиях фрагмент основного текста, а хороший – сделать даже более плохой текст читабельным. К счастью, это не так сложно реализовать.
С помощью свойства CSS line-height (высота строки) можно легко установить пробел между строками основного текста. В общем говоря, для больших текстовых блоков хороший размер – в 1,5 раз больше размера текста. У более мелкого текста должен быть меньший междустрочный интервал, а у огромного – большой. На самом деле не так сложно.
Трекинг
Трекинг – это пробел между знаками в тексте. Отмечу, что он – нечто непонятное, когда дело доходит до «практической разметки текста», тут CSS не дает нам сильно контролировать его. Обычно в маленьком тексте вам не придется об этом беспокоиться, это становится проблемой только для заголовков. В общем, при добавлении в CSS letter-spacing: 1px; или letter-spacing: 2px; между буквами будет достаточный интервал.
Другое место, где будет выгодно добавить интервал – это маленькие заглавные буквы. Тут обычно хорошо получается, если добавить дополнительный пиксель или пару между символами, так как они, естественно, выглядят больше.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееЦвет
Хотя, строго говоря, не относящийся к типографской разметке, цвет – очень важная деталь каждого типа вебсайта. Я говорю не о цветовых схемах, а больше о контрасте, нужном для обеспечения читабельности сайта. Черный текст на белом (или светлом) фоне считается самым читабельным цветом для текста.
Я не говорю, что вы должны пойти и установить все на черное по белому, просто при создании дизайна вам следует знать о контрастности своего текста. Если вы не будете осмотрительны, это вам потом может откликнуться.
Сетка
По моему мнению, применение сетки – самая важная идея практической разметки текста в Сети. У вас могут быть отличные шрифты, отступы и цвета, но если отсутствует хорошая разметка, вы с тем же успехом можете применить comic sans.
Использование сетки при создании дизайна с текстами гарантирует четкий баланс и геометрическую структуру вашего проекта. Это – не волшебное исправление плохого дизайна, но если с самого начала вы создаете проект по сетке, то можете быть уверены, что по меньшей мере ваша разметка будет прочной.
Так какую же роль играет сетка в типографской разметке? Скажу просто: всеобщую. Сетка воплощает в себе все основные идеалы типографской разметки. Она геометрична, постоянна, легка в применении и, более того: прекрасна.
Выравнивание текста по сетке – ключевой метод установления визуальной иерархии и отличный показатель того, насколько большим (или маленьким) должен быть ваш текст.
Выделение
Как я уже говорил, если ваша типографская разметка читабельна, то вы уже на 50% выигрываете у конкурентов, а что насчет второй половины? Если вы зашли уже настолько далеко, то вместе мы оставим четкие, последовательные правила читабельности и входим в мрачный и мистический мир уникальности.
Шрифты
Хотите, чтобы ваш вебсайт выделялся? Шаг 1. Примените уникальную типографскую разметку. Предположительно для вас это означает использование уникальных шрифтов. Но в чем состоит уникальность шрифта? По-моему, это не тот шрифт, который не используется слишком часто, а тот, у которого есть послание или чувство, не содержащееся в других гарнитурах.
Выбор уникального шрифта – область ощущений. Ощущается ли этот шрифт по-другому? Или просто выглядит по-другому? При выборе гарнитур любого проекта всегда нужно принимать во внимание ощущение от дизайна. Так как это чисто личное мнение, я не могу помочь вам найти уникальную гарнитуру. Могу всего лишь показать примеры шрифтов.
У The Design Cubicle – очень уникальный логотип и дизайн. Он мощный, однако классный, привлекающий внимание, но изящный. Когда я смотрю на этот проект, у меня остается чувство высокого класса этого сайта. Он говорит мне: «Я знаю, что делаю».
Будьте небанальны
Сколько вы знаете вебсайтов с логотипом размером во все содержимое? Как насчет ультратонкого заголовка? В отличие от моего последнего пункта, быть небанальным – значит смотреть на то, что делают другие, а затем сделать все наоборот.
Ребята из Savvy Belfast умны. Они заметили, какими стесненными смотрятся большинство вебсайтов и решили заменить весь бессмысленный основной текст одним предложением.
Даже бросив на их сайт единственный взгляд на одно мгновение, вы не можете не запомнить их название.
Приводите свой дизайн в соответствие
Типографская разметка – не вещь сама в себе. Это часть веб-дизайна, как любая прочая. Текст важен, да, но не следует забывать, что он – всего лишь часть того, что делает ваш проект великим. Вы должны создавать текст, имея в голове образ остального дизайна.
Если у вас применяется замысловатая фоновая текстура, то, возможно, вашим заголовкам подойдет хороший serif.
Моя точка зрения тут проста: не забывайте о контексте. Область дизайна огромна, а сегодня я говорю только об одном ее разделе. Для создания успешного веб-дизайна все части нужно успешно смешать. Вот в чем состоит цель: выработать впечатление, которое кто-то получит от вашего сайта. Это нельзя сделать с помощью одного лишь текста, или одного лишь цвета, или даже одного лишь контента!
Эмоциональный текст
Так много во впечатлении определяется тем, как вы себя чувствуете: счастливым, печальным, удивленным, гневным, бла-бла-бла. У человеческих существ имеется большой набор эмоций, и наша работа как дизайнеров – пробудить своими проектами эти эмоции.
Из всего, о чем я сегодня говорил, это общепризнанно самая абстрактная вещь, и ее немного трудно объяснить. Вместо этого давайте я вам просто покажу.
Впервые посетив Solid Giant, я улыбнулся. Я улыбнулся в следующий раз, когда его увидел, и даже в следующий. Внезапно я ощутил родство с этим проектом. Эта большая, пушистая «G» слишком очаровательна, чтобы ее можно было забыть!
Если честно, я думаю, что это гениально.
Эмоциональному дизайну научить невозможно, это нечто, что следует испытать, а затем обыграть в собственных проектах.
Заключение урока о том какой выбрать шрифт для сайта
Ну, вот вы и добрались до конца поста. Надеюсь, что, по меньшей мере, вы что-то узнали, а если нет, тоже хорошо. Если я и хочу, чтобы после прочтения у вас отложилась какая-то мысль, то это: будьте читабельны, а все остальное приложится. Тем более что теперь то у вас не стоит вопроса, какой же именно выбрать шрифт для своего вебсайта
Как вы считаете, что самое важное в типографской разметке сайта? Оставьте свое мнение в комментариях!
Автор: Max Luzuriaga
Источник: http://webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Узнать подробнееХотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоwebformyself.com
Шрифт для сайта, лучшие шрифты для сайта, русские шрифты без засечек
Здравствуйте, уважаемые читатели! Сколько среди нас дизайнеров и верстальщиков веб-страниц? Уверены, что не так мало. Это не простая работа, которая требует концентрации и последовательности действий. Желая создать хороший ресурс, мы обращаем внимание на языки программирование и прочие дополнения.
Немаловажным критерием является шрифт для сайта. От его броскости и мягкости зависит популярность будущего ресурса. Оформление должно быть особенным, притягивающим, но, ни в коем случае не отталкивающим. Мы подобрали основные советы по выбору этого критерия и составили список самых популярных шрифтов.
На чем основывается правильный выбор
Используя даже самые красивые варианты можно легко переусердствовать. Во всем необходимо знать меру. Нельзя использовать сразу несколько вариантов, правильные комбинации уместны, но и в этом нужно знать толк. Особенно, если на странице будет находиться немалое количество причудливых логотипов и заголовков.
Специалисты рекомендуют подобрать лучшие шрифты для сайта, по мнению самого дизайнера. Это позволит умело их скооперировать и избежать излишней вычурности. Выбранный вариант должен быть удобным, приятным и гармоничным. Всегда думайте о гармонии.
При выборе шрифта особое внимание уделяется специфике ресурса.
Помните об умеренности, этот критерий позволяет правильно подбирать и регулировать контрасты. Множество вариантов могут вызвать чувство беспорядка и хаоса. Заходя на такой сайт, хочется быстрее его покинуть, даже в том случае, если представленная информация соответствует поиску потенциального клиента.
Всегда делайте ставку на статистику. Экспериментировать и делать уклон на оригинальность – это хорошо, но не во всех случаях оправдано. Многие посетители не оценят ваших трудов. Главной задачей дизайнера является выбор оптимального шрифта, который будет положительно восприниматься рядовыми посетителями.
Всегда стремитесь к гармонии и не забывайте о классике. Стандартные шрифты Times New Roman, Arial или Helvetica никто не отменял. Не забывайте выделять и форматировать подобранные варианты, но и в этом деле все предельно контролируйте.
Анатомия шрифтов
Хорошей и уместной альтернативной стандартным вариантам выступают шрифты без засечек. Они широко применяются в области дизайна. Красивый и стильный внешний вид стандартных вариантов не делает их уникальными.
Serif — шрифты с засечками, sans-serif — без засечек.
Поверьте, использование Arial или Georgia – это банально. Необходимо обращать внимание и на другие варианты. Не бойтесь экспериментировать. Вы можете создать свой уникальный пользовательский шрифт без особых проблем.
Наконец, избавьтесь от мысли о том, что бесплатные и популярные шрифты, гораздо, хуже стандартных вариантов. Именно пользовательские типажи делают сайт уникальным. Вы легко можете придумать свою личную вариацию.
Рассмотрим лучших их лучших
Кириллические шрифты хорошего качества
Качественные кириллические шрифты отыскать довольно сложно. Однако на сегодняшний день их не так мало. Мы подобрали для вас уникальный список оформлений, они подойдут под любое «мероприятие» и даже для особого случая.
Nord – его главное преимущество заключается в круглых краях и уникальных элементах. Он прекрасно подойдет для подчеркивания заголовков, шрифт выпускается в четырех вариациях Light, Medium, Regular и Bold.
Lora — прекрасный вариант для оформления основного текста.
Mateur – рукописный шрифт, идеально сочетается с иллюстрациями. Часто используется для их оформления
Lato – обладает уникальной синхронизацией, в его арсенале находится около 150 языков.
Sangha – это настоящее воплощение индийских мотивов. Встретить данный шрифт можно на тематических сайтах посвященных тематике Востока.
Arvo — относится к варианту типа Terminal. Он применяется для отображения кода на странице.
Frenchpress – этот тип подойдет исключительно для особых случаев. Его применяют для оформления пригласительных и билетов.
Proba Pro — доступен только в бесплатной версии Regular и Italic. Его использование позволит добиться качественного оформления на любом ресурсе.
Intro Condensed — считается уплотненной вариацией всеми известного Intro. Разработчики рекомендуют применять его для заголовков и плакатов. Вариации Black и Light находятся в бесплатном доступе.
Poiret One — это элегантный шрифт, которому нет равных. Он уместно сочетается на веб-страницах.
Латиница в моде
Русские шрифты без засечек пользуются особой популярностью. Однако найти их в свободном доступе сложно. Больше привилегий у англоязычных сотрудников. Латиница открывает безграничные возможности по оформлению ресурсов.
Многие создатели шрифтов делают их доступными как для общего, так и коммерческого пользования. Однако для получения полного комплекта расширений необходимо доплачивать. Мы собрали для вас самые популярные вариации из мира латиницы.
Volkorn – является одним из первых вариантов в основе которого лежат засечки. Популярен в вариации Google Fonts.
Kaushan Script – считается самым аккуратным и читабельным шрифтом рукописного типа. Его можно применять как для оформления веб-страниц, так и печатных материалов.
Stroke — желаете создать неповторимый слоган или заголовок? Непременно используйте Stroke.
Montserrat – идеальное решение для заголовков.
Oswald – представитель классического шрифта без засечек. Он прекрасно выглядит на любых типах устройств.
Jura – поражает своей элегантностью и округлыми формами. Идеальное оформление для основного текста.
Exo 2 – технологический тип, прекрасное дополнение к большинству текстовых элементов на странице.
Pompiere – умеренная элегантность и серьезность.
Aclonica – яркость, уместная для запоминающихся заголовков.
Museo – прекрасно выглядит в любом размере, подходит для отображения пунктов меню. Доступен только в варианте Museo Sans 500 и Museo Sans.
Как видите, шрифтов множество и каждый из них уникален. Вы можете выбрать как из представленных вариаций, так и создать свой оригинальный тип оформления.
До встречи в следующей статье!
Скачать все шрифты
Вы успешно подписались
mylife-it.ru
36 бесплатных шрифтов для веб-сайта
Редактор-переводчик SEOnews
Существует огромное количество способов для того, чтобы найти подходящий шрифт для вашего сайта. Например, можно воспользоваться сервисами с огромными библиотеками шрифтов, которые предполагают платную подписку.Если же ваш бюджет ограничен или вы экспериментируете с небольшим проектом, вы можете воспользоваться бесплатными веб-шрифтами, находящимися в свободном доступе. Поиск подходящего веб-шрифта для сайта может занимать огромное количество времени, поэтому мы предлагаем вам подборку лучших среди них.
1. Montserrat
По мере своего развития, типографика уходит от старинных урбанистических постеров и знаков. Создатель этого шрифта попыталась сохранить красотку типографики городских постеров, увиденных ею на улицах в Буэнос-Айресе.
2. Abril Fatface
Abril Fatface является частью большого семейства шрифтов, которая представлена 18 стилями, созданными для различных целей. Этот шрифт отличается сильным, элегантным присутствием, что делает его прекрасным решением для создания бросающихся в глаза заголовков. Чаще всего его комбинируют с Lato, Open Sans и Droid Sans.
3. Playfair Display
Учитывая значительную x-высоту и небольшие подстрочные элементы литер, Playfair Display также подходит для написания заголовка, особенно если место для него ограничено. Он хорошо сочетается с Georgia и часто используется с Oswald, Lato и Arvo.
4. GT Walsheim
Используемый сегодня во многих блогах, GT Walsheim является представителем геометрических гротесков и входит в семейство Grilli Type. За полный набор шрифтов нужно платить, но Grilli Type предлагает бесплатную пробную версию GT Walsheim.
5. Merriweather
Если читабельность на экране является приоритетом вашего проекта, воспользуйтесь Merriweather, который был создан для этой цели. К тому же, этот шрифт постоянно дорабатывается.
6. Josefin Sans
Josefin Sans создавался согласно канонам винтажного шведского дизайна и отличается элегантной геометрической эстетикой.
7. Gravitas One
Gravitas One создан на основе “UK fat face” – жирного рекламного шрифта, появившегося во время индустриальной революции в Англии. Этот шрифт прекрасно выглядит в среднем и большом масштабе и подходит для заголовков, названий и вкладок.
8. Jura
Литеры этого шрифта повторяют формы письма Кая-ли. В нем также содержатся глифы кириллицы и греческого алфавита. Он доступен в светлом, нормальном, среднем и полужирном начертаниях.
9. League Gothic
Изначально спроектированный Морисом Бентоном (Morris Fuller Benton) для American Type Founders Company в 1903 году, League Gothic нашел себе новое применение после апдейта и добавления новых глифов.
10. Fjord
Fjord – это шрифт с засечками, изначально созданный для печатных книг и особенно подходящий для размещения длинных текстов в небольшом печатном формате. Его можно применять для создания большого объема текстового контента на сайте, так как шрифт отличается четкой структурой, заметными засечками и длинными элегантными верхними и нижними выносными элементами.
11. Amaranth
Семейство шрифтов Amaranth отличается ненаклонным курсивным дизайном с небольшим контрастом и заметными изгибами. Все три стиля Amaranth хорошо сочетаются с практически любым другим шрифтом. С этим шрифтом можно поиграть – экспериментируйте и выбирайте лучшее.
12. Poly
Этот среднеконтрастный шрифт был изначально создан для туземного языка Wayuunaiki, для которого необходимы широкие глифы. Он отличается маленькими выносными элементами и большой x-высотой, что делает его особенно полезным в небольших размерах.
13. Gentium Basic
Этот шрифт создавался как мульти-лингвистический, включающий в себя латинские и греческие литеры, а также кириллицу и продвинутую поддержку в версии Gentium Plus. Gentium Basic и Gentium Book Basic доступны в бесплатной веб-версии, но ограничены только латинским алфавитом.
14. Open Sans
Open Sans является представителем гуманистических гротесков. Этот шрифт отличается высокой степенью разборчивости и адаптирован как для веб-, так и для мобильных интерфейсов. Это ненаклонный шрифт с простым начертанием литер, для которого характерен нейтральный, но достаточно приятный вид, что позволяет использовать его в разных целях.
15. Ledger Regular
Это мультифункциональный шрифт с большой x-высотой, сильным цветовым контрастом, четко очерченными засечками, что вносит свой вклад в читабельность текста. Этот шрифт хорошо выглядит как в печатном виде, так и на экране с низким разрешением.
16. Signika
Этот бесплатный веб-шрифт является представителем гротесков. Низкая контрастность и большая x-высота позволяют Signika хорошо отображаться на экране. Широкий выбор значков включает в себя символы, пиктограммы и стрелочки.
17. Josefin Slab
Созданный согласно канонам геометрического шрифта, характерного для 30-х годов прошлого века, с добавлением скандинавских черт, шрифт Josefin Slab обладает характеристиками брускового шрифта и напоминает шрифт печатной машинки. Интересно, что его х-высота составляет половину от высоты прописной буквы.
18. Forum
Как и предполагает название, это шрифт Roman, который хорош для заголовков в caps lock, но также подходит и для отображения текстов. Элегантные пропорции этого шрифта напоминают классическую архитектуру с ее полукруглыми арками, горизонтальными карнизами и вертикальными колоннами.
19. Tikal Sans
Названный в честь одного из самых известных городов Майя, Tikal Sans обладает чертами глифов, которые использовались в письме южноамериканской цивилизации. Его создатель выбрал большую x-высоту, что придало шрифту современный вид и оказало благотворное влияние на его разборчивость, а большой выбор видов начертаний позволяет применять его для различных целей.
20. Arvo
Подходящий в равной степени как для печатной, так и для веб-версии, этот геометрический брусковый шрифт доступен в Roman, Italic, Roman Bold и Bold Italic. Небольшая контрастность Arvo повышает его читабельность на экране.
21. Bevan
Bevan был создан на основе традиционного брускового шрифта 30-х. Буквы были отцифрованы, им придали новую форму и оптимизировали для веб-версии. Это один из немногих сверхжирных шрифтов, которые подходят для сайтов.
22. Old Standard TT
Old Standard TT был создан на основе шрифта с засечками Modern, который был популярен в конце 19-начале 20 веков, а затем забыт на долгое время. Этот шрифт подходит для придания стиля особому виду контента, например, научным исследованиям или текстам на греческом или кириллице.
23. Kreon
Идеально подходящий для новостных веб-сайтов и блогов, этот шрифт с засечками обладает также чертами брускового шрифта, но его сбалансированность и низкоконтрастность делают Kreon значительно более персонализированным.
24. Droid Sans
Droid Sans был оптимизирован для максимальной читабельности даже в небольших интерфейсах – например, меню на экранах мобильных телефонов. Это нейтральный ненаклонный шрифт с простыми открытыми очертаниями литер.
25. Italiana
Создатель этого шрифта вдохновился классической итальянской каллиграфией, поэтому шрифт будет очень полезен для проектов, где необходимо добавить элегантности. Italiana также подходит для написания новостных заголовков как в печатном, так и электронном виде.
26. Vollkorn
Этот детально разработанный, многофункциональный шрифт с засечками очень популярен. Его четкость и основательность выражают уверенность и энергию, что делает шрифт одинаково эффективным как в больших размерах для заголовков и названий, так и для значительных объемов текста в более мелком формате.
27. Actor
Этот шрифт отличается особенно большой x-высотой, что требует достаточно много пространства. Для Actor также характерно старомодное начертание некоторых символов, например, цифр 6 и 9.
28. Lato
Гротески этого семейства выглядят достаточно невзрачно в маленьких размерах, однако в большем масштабе отличаются округлыми очертаниями, что добавляет им неформальности.
29. Average
Как подразумевает название этого шрифта, очертания и пропорции литер достаточно нейтральны, он представлен как гротеском, так и шрифтом с засечками, которые хорошо друг друга дополняют. Этот шрифт чаще всего используется для больших объемов текстов.
30. EB Garamond
Уходящий корнями в 16 век, гуманистический шрифт Garamond стал настоящей иконой типографики, неоднократно послужившей основой для создания современных шрифтов, включая шрифт EB Garamond.
31. Ubuntu
Гротеск Ubuntu был создан для того, чтобы персонализировать веб-текст как на десктопах, так и мобильных устройствах. Пользователям предлагается экспериментировать с этим шрифтом, модифицировать и улучшать его по своему усмотрению.
32. Rosario
Rosario является классическим гуманистическим гротеском, который прекрасно подойдет для стилизации абзацев текста.
33. Roboto Slab
Roboto Slab является одним из шрифтов семейства Roboto. Брусковая версия особенно привлекает взгляд своими геометрическими формами и открытыми изгибами. Он одинаково хорошо подходит для экранов гаджетов и печатных версий текстов.
34. Oswald
Шрифт является переработанной версией классического гротеска Alternate Gothic. Oswald был недавно обновлен, теперь он представлен в различных начертаниях, содержит расширенный набор символов и отличается более удобным кернингом.
35. Stalemate
Stalemate – это изящный рукописный шрифт с некоторым винтажным оттенком. Он подходит для создания акцентов и персонализации вашего сайта.
36. Crimson Text
Этот тщательно разработанный классический пропорциональный шрифт может использоваться как для отображения больших объемов текста, так и написания заголовков.
Источник: CreativeBloq
www.seonews.ru
Leave a Comment