s0k0l_0ff
s0k0l_0ff Журнал Соколова Александра по прозвищу SokoL[off]
Видео, фото, приключения, творчество, музыка, работа
Продолжу тему, которая началась этим постом. Напоминаю, что для того, чтобы понимать, о чем я пишу, необходимо хоть что-нибудь знать из HTML и CSS.
Кегель шрифта
Кегель — это размер типографского шрифта. Однако при верстке в веб среде мы можем убедиться в том, что и здесь существуют ограничения. Допустим, шрифт можно сделать размером 14px или 15px — нельзя сделать шрифт 14,5px. По началу это раздражает, но к этому быстро привыкаешь.
Теперь поговорим о единицах измерения, в которых исчисляется размер шрифта. Их существует два типа — относительные и абсолютные. К абсолютным относятся cm, mm, in, pt, pc. Абсолютные единицы измерения почти не используются из-за их неудобства. Разрешение монитора у всех разное, поэтому нам не нужен шрифт, который будет очень жестко задан в сантиметрах. Нас интересуют относительные размеры.
px
Пиксель — это одна точка на устройстве вывода (мониторов, планшетов, мобильников). Реальный размер пикселя зависит только от разрешения вашего экрана. Если разрешающая способность вашего устройства равна 1024×768, то это значит, что у вас 1024 пикселя по горизонтали и 768 по вертикали.
%
Процентная единица, зависящая от размеров родительского элемента.
em
Единица, которая полностью зависит от заранее заданного значения шрифта, которое задается свойством font-size. А именно это высота текущего элемента. Допустим, тегу body задается свойство font-size в 10px. А размер 2em для его дочернего элемента будет равняться 20px, то есть 2×10px. Если размер шрифта явно не установлен, то используется стандартный размер, заложенный в браузере.
ex
Определяется как высота символа «х» в нижнем регистре. Единица ex привязана к размеру шрифта заданного в браузере по умолчанию. Если у родительского элемента задан атрибут font-size, то он привязан к нему.
В принципе, знать единицы измерения и уметь пользоваться свойствами CSS вполне достаточно, чтобы возможно было грамотно выставить размер шрифта. Но есть и рекомендации. Например, можно выставить размер вашего шрифта на всем сайте 100%. Он будет масштабироваться по стандарту заложенному в браузере. А если необходимо увеличить, то выставляем внутреннему элементу 1.2em. Это будет равняться 120%.
Сколько же пикселей в 100% шрифте? 100%=1em=16px, то есть по стандарту 16px — это наиболее удобный для восприятия размер шрифта. Следует это помнить, когда мы выставляем кегель в пикселях. И не стоит без необходимости делать шрифт меньше 9px — он очень плохо читается.
Другие посты о типографике в вебе: выбор гарнитуры
Соотношение кегля заголовка и текста
Типографика в Вебе! Соотношение кегля заголовка и основного текста
Типографика в Вебе! Многих волнует типографика в веб дизайне: как правильно создать заголовки h1, h2, h3…. и основной текст. Правила веб типографики! Все очень логично: h1 может быть только один, на странице h2 используют, как правило дважды, заголовки h3 – это подзаголовки, используемые в тех случаях, если h2 уже на странице дважды выделяются.
Далее речь пойдет о соотношении кегля.
Золотое соотношение (1.618) a/b=1,61803
Последовательность Фибоначчи (16, 24, 40, 64, 104)
Пример: у нас есть размер основного шрифта – 16pt и мы хотим подобрать размер для подзаголовка. В таком случае просто умножаем 16 на 1,6 и при необходимости округляем до целочисленного значения. Получаем подзаголовок размером 22pt.
Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например, размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.
Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь.
То же самое касается типографики: колонок текста, размеров заголовка по отношению к шрифту основного текста, размера рекламного баннера и текста под ним и так далее. Золотая спираль может быть как вертикальной, так и горизонтальной. Идеальная пропорция ширины каждого блока выглядит примерно как на рисунке:
Правило третей
страница делится на три одинаковые части по горизонтали и вертикали
Еще одно незыблемое правило дизайна, которое применяется в разметке страниц и наполнении их контентом. Каждая страница делится на три одинаковые части по горизонтали и вертикали. На месте пересечения этих частей мысленно поставьте точки – это и будут ключевые места, куда чаще всего падает взгляд посетителя.
Следовательно, рядом с этими точками нужно размещать самую важную информацию – чтобы наверняка увидели. Это может быть кнопка с call to action – призывом к действию, или форма заказа. Считается, что самая “активная” точка – левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!
Традиционная шкала
Последовательность 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
После выбора шрифта выберите размер для основного набора, например, 16-18 пункта;
Заголовок — обычно составляет 180–200% от размера основного шрифта, соответственно, 32—36 пункта;
Подзаголовок — 130–150% от размера основного шрифта или 21—24 пункта.
Если размер основного шрифта составляет 16 пунктов, межстрочный интервал должен быть установлен в пределах 20 пунктов.
Наиболее распространенный вид:
Последнее исследование дало следующие данные:
– В CSS можно установить эту величину в em, однако, вам стоит визуально оценить правильность выбранного интервала;
– В текстовых редакторах Pages или Word межстрочный интервал стоит устанавливать как 120% от размера текста или 1,2 единицы.
Правила типографики в веб дизайне: тенденции! Самый популярный размер основого текста на современных сайтах приходится на шрифты с размерами: от 18 до 20 и от 24 до 26 пикселей. Размер среднего шрифта для заголовков составляет 25.6 пикселей. … Интерлиньяж относится к размеру шрифта основного текста как 1,48. Отношение длины строки к интерлиньяжу равно 27,8.
В этой статье мы постарались изложить основы типографики в веб дизайне. Надеемся, что нам это удалось и Вам эта информация поможет в Ваших начинаях!
Спасибо за внимание, желаем процветания Вам и Вашему бизнесу!Другие статьи: SEO
Что такое типографика и какие шрифты использовать на сайте
Как сделать текст более читабельным? Как подбирать шрифтовые пары? Какой шрифт выбрать для бизнеса и не ошибиться? Ответы на эти и другие важные вопросы в руководстве по типографике от Skillbox.
Один из источников информации — это текст. Чтобы привлечь внимание читателя и выделить материал среди других, его стараются красиво оформить и сделать легким для восприятия. Направление, которое содержит в себе правила о расположении текста, выборе шрифтов и размеров, называется типографикой.
Чтобы сделать текст удобным для чтения и правильно подобрать шрифт, необходимо узнать, из чего состоит типографика и какие шрифты можно использовать на сайте.
Что такое типографика
Типографика — это оформление наборного текста. Его располагают на бумаге или экране, настраивают отступы и интервалы, подбирают шрифт. Хорошо проработанный материал смотрится лаконично и приятно. Легко читается, ощущается гармония.
До появления компьютеров правила типографики использовали для создания макетов книг, газет и плакатов. Теперь их применяют для удобного отображения информации на дисплее — в программах и на сайтах.
Правила типографики учитывают параметры шрифта, размеры текста, его расположение. Чтобы хорошо оформить текст, нужно знать, какие шрифты использовать на сайте, что такое начертание, каковы пропорции между основным текстом и заголовком.
Как подбирать шрифты на сайт
Внешний вид сайта во многом зависит от используемых шрифтов. Правильно подобранный шрифт помогает читать быстрее. Обычно пользователь заходит на страницу, пробегает взглядом по тексту и сразу получает нужную информацию.
Если использовать какой-то необычный шрифт, рукописный или акцидентный, то читать станет сложнее. Скорее всего, посетитель сайта не станет тратить время на то, чтобы разобрать текст, и просто закроет страницу.
Чтобы решить, какой шрифт выбрать для сайта, нужно знать, какие бывают семейства, что такое начертание и классификация.
Классификация шрифтов
Шрифты отличаются характером, внешним видом, стилем. Какие-то — статические, какие-то передают динамику. Но все эти различия видит опытный человек, а простой пользователь, скорее всего, не заметит.
Главное визуальное различие шрифтов — засечки на буквах. Этот параметр называется классификацией шрифта. На сайтах чаще всего встречается две классификации: антиква и гротеск.
Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.
Передает ощущения надежности и традиционности. Шрифт с засечками выглядит строго и классически. Используется в бумажных книгах, журналах и печатных изданиях. Длинный текст, набранный таким шрифтом, удобно читать.
Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.
Гротеск ассоциируется с чем-то современным и легким. Его часто использует в чертежах и технической документации, в интерфейсах программ, на сайтах.
Что такое гарнитура
Гарнитура — это название одной шрифтовой семьи, которая состоит из разных начертаний.
Привычное начертание — нормальное (Regular), остальные начертания зависят от вида шрифта и цели, для которой его создавали. Отличаются друг от друга наклоном, пропорциями, толщиной, но имеют одинаковый характер.
Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)
Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)
Выбор размеров шрифта
Размер шрифта подбирают для каждого сайта индивидуально. Главное, чтобы читать текст на странице было комфортно.
Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.
Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.
Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.
Нормальный текст: 18px
Заголовок 4: 18х1,6 = 27px.
Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:
Заголовок 3: 27х1,6 = 40px.
Вычислить, какой размер шрифта на сайте лучше использовать, можно с помощью калькулятора. На основе параметров обычного шрифта он подбирает оптимальные размеры для заголовков.
Сочетание шрифтов
Использование разных шрифтов на сайте помогает создать контраст и задает настроение во время чтения текста. Поэтому дизайнеры тщательно подбирают шрифты для сайта, анализируют разные сочетания.
Для выбора сочетания шрифтов нет каких-то определенных алгоритмов, потому что каждый проект индивидуален.
Обычно сочетают либо разные начертания одного и того же шрифта, либо выбирают два шрифта разной классификации. Комбинирование антиквы и гротеска помогает показать иерархию текста и добиться хорошей читабельности.
Самый простой способ подобрать пару шрифтов — просмотреть несколько, сравнить и проанализировать, какие пары подойдут.
Искать шрифтовые пару удобно с помощью сервисов Паратайп и FontPair.
Где брать шрифты
В интернете можно найти бесплатные и платные шрифты. И те, и другие шрифты можно использовать на сайте.
Бесплатные
Большая библиотека качественных шрифтов называется Google Fonts. Шрифт легко подобрать по нужным параметрам: выбрать только кириллицу, искать антикву или гротеск. С Google Fonts их можно скачать или напрямую подключить к сайту.
Часто дизайнеры рисуют свои шрифты и выкладывают их в общий доступ. Здесь стоит быть аккуратным, потому что не все они — качественные и подойдут для вашего проекта.
Платные
Ищут в специальных магазинах или на сайтах владельцев — студий и дизайнеров.
Где посмотреть:
Paratype.ru
MyFonts.com
Typekit.com
Студия Артемия Лебедева
Больше о типографике и шрифтах
Шрифт проектируются для определенной цели. У каждого — разные характер и настроение. Поэтому к подбору шрифтов и верстке текста на странице важно подходить осознанно.
Книги, которые помогут изучить основы типографики и узнать, как работать со шрифтами:
Углубиться в типографику, верстку и узнать об использовании шрифтов можно на курсе «Веб-дизайн с нуля» от Skillbox.
Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.
16 px кегль в Вебе
19 Мар 2013, 14:00, написал Максим Шайхалов в разделе «Веб-дизайн,Интерфейс»
На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.
Специалист в области юзабилити сайтов Оливер Рейхенштейн утверждает, что 16 пикселей – это стандарт для нормального отображения шрифта в браузере. При этом шрифт не будет выглядеть гигантским (чего опасаются многие дизайнеры), потому что 16 пикселей – это много только на первый взгляд, а на практике это самый удобный размер шрифта для сайта, в чем уже убедились многие разработчики.
Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.
Доход сайта и привлечение читателей
В большинстве случаев сайт создается с целью заработка, и чем больше у вас будет посетителей, тем большим будет вероятный доход. Если ваш сайт – продающий, то тем важнее для вас привлечь потенциального клиента среди аудитории сети Интернет. Каждый из читателей вашего сайта – это ценный бизнес-актив, который в конце-концов окупит ваши затраты на создание сайта.
Именно поэтому каждый элемент вашего сайта должен быть направлен на достижение конечной цели. Текстового контента это правило касается в первую очередь. Ведь текст на сайте – это основное средство влияние на читателя.
Если в текстах вашего сайта не будет четко указано, каких действий вы ожидаете от пользователя, то он не станет вашим клиентом. А для того чтобы текст эффективно воздействовал на пользователя он должен быть, как минимум, прочитан.
Итак, все ваши действия должны быть направлены на то, чтобы повысить легкость чтения контента для ваших читателей.
4 факта о чтении, которые должен знать веб-дизайнер
1) После двадцати лет качество зрения у людей снижается, в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.
2) У 9% американцев есть проблемы со зрением, а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.
3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.
4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства, это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.
16px текст на 24′ мониторе и 12pt текст в книге
16px текст на 15,4′ мониторе и 12pt текст в книге
Плохие шрифты снижают посещаемость сайта
Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.
Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.
Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?
Скорее всего, это не так: каждый из десяти ваших читателей будет просто не в состоянии различить 10-пиксельный шрифт, но размер в 16 пикселей будет для них оптимальным. В противном случае даже людям с отличным зрением придется ближе придвинуться к монитору, чтобы разобрать мелкий шрифт, а это сильно понижает удобство пользования сайтом. Поза сидящего перед компьютером должна быть максимально естественна и удобна, вы же не хотите, чтобы ваш читатель чувствовал себя неуютно и неловко?
Не напрягайте читателя лишний раз, иначе до него не дойдет смысл прочитанного (если он даже прочитает ваш текст, а не покинет сайт сразу).
Не отпугивайте посетителей неудобными шрифтами, ведь чем больше у вас посетителей – тем выше доход принесет сайт в конечном итоге.
Не заставляйте пользователя думать!
Многие дизайнеры считают, что «проблемы утопающих – дело рук самих утопающих», и если у пользователя возникают проблемы с чтением шрифта на сайте, то он должен обратиться к функции приближения, которая позволяет увеличить текст. Но с точки зрения пользователя, легче поискать необходимую информацию на другом сайте, чем настраивать под себя неудобный интерфейс веб-ресурса. А многие пользователи даже не знают о существовании такой функцией, и, сталкиваясь с текстом, который невозможно прочитать, не долго думая нажимают кнопку «Назад».
Не тратьте деньги ваших клиентов понапрасну, создавая заведомо нерентабельный сайт. То, что кажется красивым вам, не всегда удобно для пользователя. Думайте о том, что интересует пользователя, и вы достигнете цели, какой бы она ни была.
Дизайн печатных изданий отличается от дизайна веб-ресурсов – это очевидно. И если крупные шрифты в полиграфии выльются в дополнительные затраты на каждый миллиметр использованной бумаги, то стоимость создания интернет-издания не зависит от размера шрифта, который вы используете, так что нет смысла ограничиваться компромиссными решениями.
16 px – это удобно
Если вы все-таки не воспринимаете крупный шрифт как приемлемый для сайта с эстетической точки зрения, то подумайте о том, что нет ничего более гибкого, чем вкус дизайнера. В основном, наши предпочтения основаны на том, что мы уже видели раньше. И если вы впечатлились веб-дизайном, выполненным с использованием 10-пиксельного шрифта, это ни в коей степени не отрицает того, что дизайн с 16-пиксельным шрифтом будет привлекательным.
Подумайте, а вдруг именно ваш дизайн станет новым стандартом? Сделать свой сайт более удобным для восприятия – это отличный способ преодолеть конкуренцию и сформировать обширную аудиторию пользователей.
AVEWEB.RU
Вебмастеру
Это интересно
Оптимальный кегель шрифта
Дабы сайт занимал высокие позиции, имел постоянных посетителей и приносил неплохой доход его владельцу, при разработке ресурса, веб-мастер берет во внимание множество факторов. И так как, нашу статью мы начали со шрифта контента ресурса, на этом и остановимся подробнее. Рассмотрим определение, которое напрямую относится к данной теме. Что такое Кегель.
Кегель – это величина площадки, для размещения одного символа. Как правило, определяется кегель в пунктах.
Измеряется шрифт двумя популярными системами, которые распространены как в России, так и за рубежом. Это системы Дидо и Пика. В системе Дидо пункт равен 0,376 мм, в аналогичной ему системе Пика пункт равняется 0,352 миллиметрам.
Количество пунктов в кегле может быть различным. Каждый из них имеет свое собственное название. Кегель с 6 пунктами называется нонпарель, кегель с 8 пунктами – петит, кегель имеющий 9 пунктов имеет название боргес и т.д.
Практически всех веб-мастеров, дизайнеров, оптимизаторов волнует вопрос о размере шрифта. Какой шрифт оптимальнее всего использовать на сайте.
Специалисты утверждают, что шрифт должен благоприятно влиять на зрение пользователя. При чтении текста, не должны уставать глаза. Цвет текста не должен быть слишком большим и жирным. Использовать выделение рекомендуется лишь в заголовках.
Ученые определили, что наиболее благоприятный шрифт текста это Verdana. При чтении текста с данным шрифтом напряжение глазных мышц снижается.
Шрифт Verdana с 10-12 кеглями отлично отображается как на мониторе компьютера, так и при печати. Что приносит пользу как разработчикам ресурса, так и его пользователям. Verdana имеет увеличенный интервал между строчек, благодаря этому текст не сливается и отчетливо видно слово и отдельно каждый символ. Символы схожего начертания шрифт четко различает.
