Размер шрифта на сайте: Адаптивный веб-дизайн: как выбрать размер шрифта

7. Нарушение привычных принципов дизайна

И последний, самый тяжкий грех — отказ от стандартов дизайна.

Стив Круг (Steve Krug) пишет об этом в своей книге «Не заставляйте меня думать». Он особо подчеркивает, что посетители сайтов и лендингов привыкли к определенным функциям в определенных местах. Например к тому, что логотип и слоган находятся в левом верхнем углу сайта, а меню — в правом верхнем. Также посетители привыкли обращаться к странице «О нас», если хотят узнать подробнее о компании, и открывать страницу «Контакты», если нужно узнать адрес, телефон или представительства в социальных медиа. Это означает, что все перечисленные «привычные» функции стоит реализовать на своем ресурсе. Или дважды подумать перед тем, как нарушить основные принципы дизайна.

Иногда владельцы сайтов, в стремлении к новым и креативным решениям, делают необычное меню: например, вместо привычного правого верхнего угла страницы пункты меню «вырастают» на ветках дерева, служащего фоновой картинкой сайта (и множество других изобретательных вариантов реализации меню).

Случается, что эти смелые решения срабатывают, но чаще всего происходит обратное. Гораздо эффективнее следовать привычным принципам дизайна лендинга, не сбивая с толку свою аудиторию, чем выбирать нестандартные решения, которые могут быть очень эффектными, но непонятными для посетителя.

Заключение

Надеемся, что перечисление семи смертных грехов дизайна прошло для вас с пользой. Многие из этих правил кажутся вполне очевидными, но нарушаются они гораздо чаще, чем можно подумать.

Помните, любые изменения в дизайне следует предварительно тестировать, дабы воочию увидеть, как они отразятся на посещаемости и конверсии вашей посадочной страницы. Проверить свои гипотезы и выбрать наилучший с точки зрения конверсии дизайн лендинга вы можете уже сегодня с помощью нашей платформы.

Высоких вам конверсий!

По материалам: jamesclear.com,

06-12-2014

Наиболее полное руководство по размерам шрифта в дизайне интерфейсов

Что это за руководство?

Чаще всего начинающие дизайнеры интерфейса задают мне следующий вопрос: Какой размер шрифта я должен использовать для своего проекта? Иногда они спрашивают о веб-сайте, иногда об Android-приложении, иногда о проекте на iPhone / iPad. Material Design дает хорошие рекомендации, но они на 50 страниц. iOS … ну, у них нет хороших рекомендаций! А по веб-дизайну все еще хуже. Может быть, внезапно появится какая-нибудь статья, которая рассказывает вам, какие размеры шрифта использовать на основе темной магии с золотым сечением. Да ладно, люди.

Три разных платформы, три разных набора проблем и два противоположных языка дизайна?

Вы когда-нибудь хотели, чтобы кто-то скомпилировал все правила в одном месте?

Приветики, UI дизайнеры Земли. Вам захочется добавить эту страницу в закладки. Сюда вы захотите вернуться, чтобы выяснить, какой размер шрифта использовать для вашего нового проекта. Эту статью можно условно разбить на три части:

1. Платформы: рекомендации для различных типов платформ, а именно:
2. Принципы (ссылка): более общие правила при выборе размеров шрифтов
3. Ресурсы (ссылка): список полезных сайтов по типографике

Примечание по терминологии

Распространение HD экранов вызвало абсолютный хаос в терминологии дизайна. «Пиксель» теперь означает примерно 3 разных вещи. Если не указано иное, я всегда буду «говорить @ 1x», т.е. я буду говорить о размерах шрифтов, используя число, которое вы указали в поле «Размер шрифта» в Sketch / Figma и т.д. В iOS это называется «pt» (читается: «point», означает «точка»). В Android это называется «sp» (читается: «sip», означает «масштабируемый пиксель»). В Интернете это называется «px» (читается: … погодите, вы ведь знаете это, верно?)

Давайте начнем.

iPhone

Проектируете приложения для iPhone и не уверенны, какие размеры шрифта использовать? Вот краткое резюме размеров шрифтов, предполагающее, что (а) вы используете шрифт Apple по умолчанию San Francisco (или аналогичный) и (b) вы хотите соответствовать стилю iOS:

Давайте разберем элемент за элементом и рассмотрим иллюстрированные примеры. Мы рассмотрим не только фактические размеры шрифтов, но также и то, что Apple думает о стилях текста.

Заголовки

В iOS 10 есть несколько больших по размеру, но коротких заголовков, таких как «Inbox» ниже – в размере 34pt. Это самый большой текст, который вы увидите на iPhone.

Но при скроллинге, заголовки уменьшаются до 17pt – размер по умолчанию для текстовых действий.

Обратите внимание, что заголовок сокращается до того же размера, что и текст по умолчанию, но они используют более тяжелый вес и размещение сверху по центру, чтобы показать, что это заголовок. Это было небольшим откровением для начинающего дизайнера Эрика, поскольку я всегда ожидал, что заголовки будут больше обычного текста (а не просто жирнее).

Вид списка

Списки – это хлеб и масло мобильных приложений. Вы никогда не знаете, сколько вещей на самом деле будет в списке, пока вы не начнете показывать их на вытянутом тонком экране. Давайте посмотрим на следующее.

В представлении списка – в этом конкретном примере с электронными письмами – iOS обрабатывает имя отправителя как текст обычного размера (17pt), а тему письма и предварительный просмотр – как вторичный, меньший текст (15pt). Я думаю, это стоит отметить, потому что, опять же, как дизайнер, инстинктивно хотел сделать наоборот: сделать основной текст размером по умолчанию, а имя отправителя еще больше. Заметили здесь тренд? iOS не устанавливает размеры шрифта так, как вы могли наивно ожидать.

На странице настроек сами параметры записываются в текстовом стиле по умолчанию, хотя заголовки разделов (например, «AirDrop») меньше (ничего себе!). Но заметьте, что, хотя, заголовок меньше, это более толстый шрифт, а значит вы все равно можете распознать его как заголовок. Опять же: ненавязчиво.

Примечание ниже настроек («AirDrop позволяет вам мгновенно делиться …») написано шрифтом 13pt, что является наименьшим размером во всех рассмотренных примерах интерфейса.

Элементы управления

Давайте быстро рассмотрим несколько элементов управления.

Теперь это должно казаться довольно понятным. Единственный сюрприз – сегментированная кнопка размером 13pt (кажется слишком маленькой). Мне кажется, поскольку Apple знала, что некоторые из этих кнопок имеют множество опций, поэтому они просто сделали меньший размер текста для элемента управления по умолчанию, даже если есть только два варианта.

Поиск использует размер и вес по умолчанию, хотя цвет немного светлее, до того, как вы начнете вводить текст.

Модальные окна

Это маленькое всплывающее окно является наглядным примером того, как Apple создает дизайн текста.

• Заголовок имеет размер по умолчанию. Вы можете подумать, что этого, будет недостаточно, но что мы видели раньше? Тяжелый вес шрифта, чтобы компенсировать его размер.
• Пояснительный текст – 13pt. Я бы подумал, что это будет 15pt, как основной текст электронной почты, но, возможно, они просто хотели, чтобы он уместился в одну строку?
• Ввод пароля составляет 13pt, что было бы слишком мало для обычного ввода текста, хотя, мне кажется, что вы увидите только кучу черных кружков, это не обязательно будет размер по умолчанию.
• «ОК» и «Отмена» имеют размер по умолчанию, но поскольку кнопка «ОК» надеется, что вы ее нажмете, Apple привлекает к ней немного больше внимания, сделав ее толще.

Эти размеры шрифта следуют четкому шаблону, и они иллюстрируют несколько трюков со стилем текста, однако, есть некоторые странные несоответствия.

Панель действий

Наконец, у нас есть панель действий в нижней части экрана. Это самый маленький текст, который я мог найти во всем интерфейсе – 10pt. Я бы избегал использовать такой небольшой размер, насколько это возможно.

iPad

На момент написания этой статьи (весна 2018 года), iPad обычно имеет меньшую плотность пикселей, чем iPhone. Это означает, что элемент будет немного больше на iPad. Из-за этого подавляющее большинство размеров шрифтов остаются неизменными для iPhone и iPad. Поэтому, если вы разрабатываете приложение для iPad, начните с чтения раздела по iPhone выше.

Исход из этого, больше всего различий с заголовками. Поскольку у вас есть рабочая область большего размера, идеальный размер шрифта для основного текста остается прежним, но у вас гораздо больше места для заголовков большего размера.

Поэтому, хотя, некоторые приложения по-прежнему используют заголовки 17pt в стиле iPhone…

На iPad они больше.

В нескольких нативных приложениях используется самый полужирный вес шрифта SF – тяжелый. На мой взгляд, это настоящая «iPad-версия» полужирных заголовков на iPhone, но Apple странно непоследовательна в ее использовании.

Выше я также указываю неправильную нижнюю панель вкладок приложения «Музыка» (с текстом 17pt). В большинстве нативных приложений для iPad сохраняется размер панели вкладок 10pt в стиле iPhone, но я думаю, что это лучший «перевод» дизайна на экран большего размера.

Итак, в целом, для iPad вы будете использовать множество стилей iPhone, но у вас будет немного места для творчества в заголовках.

Примечания по шрифту SF

Шрифт iOS по умолчанию – San Francisco. Вы можете бесплатно скачать San Francisco. Нет необходимости использовать San Francisco при создании приложения iOS, но, если вы хотите, чтобы у вашего приложения был вид iOS по умолчанию, тогда SF – ваш новый лучший друг.

Apple хотела бы, чтобы вы соблюдали несколько дополнительных правил при использовании шрифта San Francisco

Во-первых, используйте SF Pro Display при размерах шрифта 20 или выше. Используйте SF Pro Text только для основного текста и меньше.

Во-вторых, Сан-Франциско спроектирован так, чтобы иметь различный интервал между символами при разных размерах шрифта. Поэтому, если вы хотите идеально подражать «iOS по умолчанию», у вас есть несколько вариантов:

1. Ручная настройка интервала между символами в зависимости от размера шрифта в соответствии с приведенной ниже таблицей
2. Используйте текстовые стили непосредственно из библиотеки Apple iOS UI Design Sketch (или Photoshop или XD)
3. Используйте этот удобный Sketch плагин для автоматического выбора расстояния между символами шрифта SF, в зависимости от его размера.

Или просто игнорируйте тот факт, что Apple советует вам изменять расстояние между символами до сотых пикселей. Живи свободным или умри, мужик.

San Francisco – шрифт по умолчанию для iPhone и iPad. Поэтому, если вы используете его, лучше знать об этих ограничениях. Тем не менее, вы можете проектировать приложения iOS с любым шрифтом. Будьте осторожны, другие шрифты даже в том же размере могут оказаться крупнее или меньше, или менее разборчивыми.

Material Design – Mobile

Итак, вы разрабатываете приложение в стиле Material Design и хотите узнать (примерно), какой размер шрифта использовать? Отлично. Вы пришли в нужное место.

Все размеры шрифта, перечисленные ниже, относятся к Roboto. Другие шрифты могут казаться большими или меньшими, даже с одинаковым размером. Единицы, которые я использую в этом разделе, являются «sp». Произносится как «sips», и обозначает масштабируемые пиксели. Но, как дизайнер, все, что вам нужно знать, это число, которое вы вводите в поле «размер шрифта», когда проектируете.

Теперь давайте рассмотрим элемент за элементом с (a) визуальными эффектами и (b) заметками о том, как Google ловко использует эти стили шрифтов. Без шуток, народ. Надеюсь, вы прочитаете этот раздел и подумаете: «Кто бы ни придумал размеры шрифта Material Design – это умный человек». Я так думаю.

Заголовки

Заголовки в мобильных приложениях Material Design составляют 20sp.

Основной текст

Размер основного текста в Material Design составляет 14sp. Вы должны расценивать это как нормальный размер шрифт, а все остальное в большинстве своем его вариации.

Например, в то время, как 14sp является размером текста по умолчанию, когда текст может быть довольно длинным. Однако, когда есть только небольшое модальное окно с небольшим количеством текста, это 16sp!

Обратите внимание, что этот текст немного легче, чтобы компенсировать увеличение размера шрифта. Это будет повторяющаяся тема в стилях Material Design.

Элементы списка

Многие простые списки будут показывать каждый элемент в размере 16sp.

Фактически, это размер «элемента списка» по умолчанию в Material Design.

Это было для меня неожиданностью – в конце концов, список простых предметов очень похож на основной текст. Почему он будет больше? Я думаю об этом так: важность на слово намного выше, чем у основного текста. Поэтому он должен быть больше.

Также обратите внимание, что наличие более крупных названий элементов списка означает, что у вас может быть четкий контраст между заголовком элемента списка и дополнительным описанием, которое меньше и легче.

Но более плотные списки, например, на боковых панелях, равны 14sp – и на один вес тяжелее, чтобы компенсировать (это немного похоже на более крупный размер шрифта модального окна, который легче, чтобы также компенсировать).

Элементы управления

Теперь давайте взглянем на кнопки и текст вводимых данных.

Единственным сюрпризом здесь, на мой взгляд, является то, что размер текста ввода 16sp. Почему не размер основного текста по умолчанию? Поскольку значение слова больше, чем у основного текста по умолчанию, и в отличие от кнопки (у которой есть текст 14sp), странно делать текстовое поле со средним или полужирным шрифтом.

Для дополнительной информации ознакомьтесь с Material Design руководством по типографике от Google.

Material Design – Desktop

Несмотря на то, что все примеры, показанные выше, из мобильных приложений, размеры шрифтов немного отличаются в планшетных и десктопных приложениях. Ниже приведен краткий обзор изменений в типографике, предоставленный Google:

Если вы разрабатываете приложение Material для больших экранов, вам также стоит ознакомиться с разделом Desktop web ниже.

Mobile Web

Если вы разрабатываете веб-сайт или приложение, которое можно просматривать на мобильных устройствах, существует только одно жесткое правило:

• Используйте размер шрифта для текста ввода не менее 16px Если вводимый текст имеет меньший размер шрифта, то iOS-браузеры будут увеличиваться в левой части ввода текста, часто затеняя правую сторону и заставляя пользователя вручную уменьшать масштаб после использования текстового поля.

Вот пример:

Вот, что еще я могу сказать о размерах мобильных веб-шрифтов:

• Используйте размер шрифта основного текста около 16px. Вы хотите, чтобы текст основного текста на вашем телефоне (когда он находился на естественном расстоянии) был таким же читаемым, как текст в хорошо отпечатанной книге (которую держат на естественном – обычно чуть дальше – расстоянии)
• Для вторичного текста, несущественных меток и подписей используйте размер поменьше – например, 13px или 14px. Я не рекомендую уменьшать только на один размер шрифта, поскольку тогда слишком легко спутать его с обычным текстом. Когда текст менее важен, вы хотите его стилизовать так, чтобы четко понимать его меньшее значение.
• Золотой стандарт – просматривать свои проекты на самом устройстве. Так как ощущение дизайна мобильного приложения на экране вашего ноутбука отличается от того, когда вы смотрите его на мобильном. Как начинающий дизайнер, я был потрясен почти каждый раз, когда открывал на смартфоне страницу, созданную на компьютере. Размер шрифта, расстояние … все отличалось. Поэтому используйте Sketch Mirrorили Figma Mirror или любое другое приложение, но просмотрите свои дизайны на устройстве.
• Наконец, по любым другим вопросам, касающимся размеров шрифтов мобильного веб-сайта, см. рекомендации Material Design, которые являются ясными, последовательными и изобретательными (хотя и не краткими). Чем больше у меня опыта, тем больше я убежден, что даже несмотря на то, что у Apple есть дизайн авторитет, Google в настоящее время утерла им нос. Но не говорите снобам, что я так сказал.

Desktop Web

При выборе базового размера для десктопного веб-сайта или веб-приложения вы можете разбивать большинство проектов на один из двух типов:

1. Страницы, перегруженные текстом. Статьи, блоги, нов

основной текст в 16px / Хабр

Для основного текста все, что меньше 16 — ужасная ошибка

Юзабилити-эксперт Оливер Рейхенштейн (Oliver Reichenstein) в статье «The 100% Easy-2-Read Standard» сказал:
«16 пикселей — не много. Это размер текста в браузере по умолчанию. Браузеры были предназначены показывать этот размер… На первый взгляд кажется многовато, но как только вы попробуете, вы сразу поймете, почему все разработчики браузеров выбрали этот размер текста по умолчанию.»

В этой статье я объясню, почему 16 пикселей — минимальный размер для основного текста в современном веб-дизайне. Если вы не измените свое мнение, то прошу высказывать свои доводы в комментариях.

Видите ли, в большинстве случаев, если вы создаете веб-сайт с размером шрифта между 10 и 15 пикселей, вы тратите деньги клиента. И вот почему.

Читатели это доход

Может быть, продать товар напрямую, или предложить услугу, или просто для получения кликов. В любом случае, это бизнес-актив, и в конечном итоге он должен окупить ваши инвестиции. Он должен приносить доход.
Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст — потому что текст убеждает посетителей сделать то, что вы хотите.
Подумайте об этом. Если вы не объясните, что люди должны делать, и почему они должны это делать, то они, конечно, и не станут этого делать. И единственный способ, чтобы сказать им это — текст. А текст подразумевает прочтение.

Важные факты о чтении

1. В 40 лет только половина света проходит к сетчатке, в отличие от 20 лет. Для 60-летних — всего лишь 20%.
   
2. Почти 9% всех американцев жалуются на слабое зрение(я не удивлюсь, если у нас в России этот показатель хуже), то есть их зрение не может быть полностью исправлены с линзами.
   
3. От расстояния, на котором мы можем читать символы, зависит разборчивость и скорость чтения. Чем больше расстояние, тем выше понимание. Самый важный фактор, который определяет, насколько это расстояние может увеличиться — размера шрифта. Вспомните биллборды, например.
   
4. Большинство людей находятся на расстоянии около 50 сантиметров от экрана компьютера. На самом деле, рекомендуемое расстояние — 60 сантиметров, потому что на этом расстоянии можно избежать чрезмерного напряжения глаз. Это гораздо больше, чем расстояние, на котором мы читали напечатанный текст — большинство людей не держат журнал на расстоянии вытянутой руки!
   
5. 16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге или журнале. Так как мы читаем печать довольно близко — часто всего лишь на расстоянии в несколько десятков сантиметров — там как правило, шрифт задан около 10pts. Если бы вы читали на расстоянии вытянутой руки, то это был бы такой же размер, как 16 пикселей на всех экранах:

   
   16px текст на 24′ мониторе и 12pt текст в книге

   
   16px текст на 15,4′ мониторе и 12pt текст в книге

6. В 2005 году был проведен опрос по поводу проблем веб-дизайна, и плохой шрифт получил почти в два раза больше голосов, чем остальные проблемы, две трети опрошенных жаловались на маленький размер шрифта. Если вы думаете, что ситуация с тех пор улучшилась, подумайте еще раз. Я сделал случайную выборку некоторых дизайнов SiteInspire и обнаружил, что средний размер шрифта для основного текста — жалкие 12 пикселей. Некоторые проекты даже использовали и того меньше — 10 пикселей. Ни один из шрифтов не превышал 14 пикселей. Аналогично, если вы сделаете случайные выборки из популярных сегодня Elegant Themes and ThemeForest, то обнаружите, что текст каждой выборки будет размером в 12 или 13 пикселей.

Факт: Большинство пользователей ненавидят «обычный» размер шрифта

«Но пользователи могут увеличить текст»

Веб-дизайн — это не только то, что нравится дизайнерам. Речь идет о том, чего хотят пользователи, и что поможет вам достичь целей наших клиентов.

Если цель веб-сайта — получение дохода, то наша роль в качестве дизайнеров — придумать что-то для как можно более эффективного достижения этой цели. Выбирая размер шрифта, который затруднит чтение, вы приведете к сокращению читательской аудитории, поэтому не нужно экономить на размере шрифта за счет конверсии.
В дизайне печатных изданий, шрифт 8 размера будет являться идеальным компромиссом между легкостью прочтения и стоимостью, потому что вы должны платить за каждый миллиметр бумаги. В Интернете вы ничего не платите за использование места — при условии, что читателям понравится ваш текст.
Итак, вопрос в том, готовы ли вы тратить деньги ваших клиентов ради того, что нравится только вам?

16 пикселей — это не много

Теперь взгляните на футер и проверьте, не приходится ли вам наклоняться вперед к экрану, щуриться или морщиться, чтобы рассмотреть текст. Ведь его размер 11 пикселей. Если после всего этого я вас все еще не убедил, объясните мне причины в комментариях.

Подбор типографики для сайта / Хабр

Выбор типографики для сайта почти настолько же важен, как сам дизайн. Он не только помогает посетителю лучше понять содержание вашего сайта, а также создает определенное настроение. Так как в этом плане подбор шрифта — вещь очень субъективная, существует много «правильных вариантов». Но на самом деле выбор типографики не так сложен, как может показаться!

С середины девяностых, когда Netscape представил тег

<font size="5" color="black">Black text</font>

На протяжении всей истории интернета и по мере появления новых технологий, можно выделить несколько стадий развития типографики. Сначала использовались обходные пути, например картинки вместо текста, постепенно это сменилось решениями на Flash и CSS, а также Javascript.

В настоящее время доступны разные инструменты и технологии, например шрифты Google (бесплатно) или Adobe Typekit (доступно по подписке), которые намного упрощают внедрение пользовательских шрифтов на сайт. Более того, существуют онлайн-конструкторы и редакторы, такие как Breezi, Squarespace и Moonfruit, которые могут сделать всю работу за вас, сгенерировать код и предоставить вам готовое решение.

Читаемость шрифта превыше всего

Первое, на что стоит обратить внимание — читабельность шрифта, который вы выбираете. Может возникнуть искушение выбрать шрифт по его внешнему виду, и, конечно, внешний вид важен, но вы всегда должны помнить основную причину, зачем вы публикуете материал на сайте — посетители должны быть в состоянии прочитать то, что вы опубликовали.

Поэтому, если шрифт сложно прочитать, нет смысла его использовать. Цель публикации, которая содержит в себе текст — доставить сообщение читателю. Если появятся какие-то трудности, сообщение не будет доставлено. Лучше отказаться от стильного, но нечитаемого шрифта, чем рискнуть, что ваши посетители не смогут понять, что вы хотите сказать.

Начните с типографики основного контента

Вероятно, часть страницы, на которой будет сосредоточено внимание пользователей — это текст основного материала. Там они потратят наибольшее время, читая вашу статью, или что-либо другое, просто потому, что это самый длинный текст на данной странице.

Поэтому, советуется не использовать сложный, нестандартный шрифт. Подойдет любой sans serif, «безопасный для web» (об этом чуть ниже). Основной текст это как раз то место, где предыдущий пункт — читабельность — является наиболее важным.

Также стоит подумать о размере шрифта. Каждый шрифт может иметь разные значения и вариации размеров, поэтому нельзя утверждать, что есть размер, который подходит для каждого шрифта, но примерно 14-16 размер может сработать отлично.

Шрифт для заголовков

Заголовки также важны, потому что они будут начальной точкой для больших объемов текста. Так происходит потому, что люди «сканируют» страницы в интернете, а не читают каждую строчку с начала и до конца.

И заголовки, которые показывают, что будет говориться дальше, и маленькие блоки текста, не предъявляют так много требований к типографике, следовательно у вас есть больше свободы для действий. Для заголовка вы можете позволить себе более искусный и сложный шрифт.

Еще, крупный шрифт проще прочитать, у вас будет больше свободы в выборе шрифта, если вы используете шрифт покрупнее.

Также, если вы используете нестандартный шрифт, вам может понадобиться как-то указать правильный шрифт для ваших заголовков. Например, если вы используете решение на Javascript для отображения шрифта на вашем сайте (например Google Fonts, Adobe Typekit или Cufon), это замедлит скорость загрузки вашего сайта. И чем больше шрифта Javascript должен будет отрисовать, тем медленнее станет ваша страница. Это еще одна причина, почему стоит избегать нестандартных шрифтов в основном тексте.

Как уже упоминалось, для шрифтов не существует стандартных размеров, но если хотите, можете попробовать 32-34 размер для h2, и снижать этот параметр для заголовков следующих уровней, потому что не должно быть текстов больших, чем основной заголовок.

Еще нужно упомянуть, что вы должны подчеркивать иерархию, так что заголовки должны выделяться из обычного текста. Это можно сделать разными способами, но самый простой, используемый наиболее часто, и рекомендуемый — сделать их крупнее обычного текста. Вы также можете выделить их жирным шрифтом, другим цветом, добавить фон или картинку и так далее.

Двух шрифтов хватит!

Если вы используете слишком много разных шрифтов, есть опасность сделать сайт непоследовательным. Такой сайт может больше запутывать, чем разъяснять что-то. Возможно, у такого стиля и есть какая-то цель, но если вы не сможете грамотно реализовать ее, лучше просто избежать такого.

Конечно, «правила придуманы, чтобы их нарушать», и вы можете попробовать воспользоваться тремя или больше шрифтами, и у вас будут хорошие результаты. Но, в общем, всего двух шрифтов может быть достаточно практически для любой цели.

Например, один шрифт может быть использован для стандартного текста, а другой для заголовков или других выделенных элементов.

Категории шрифтов

Гарнитуры можно разделить на две основные категории: с засечками (Serif) и без засечек (Sans serif). Засечки представляют собой небольшие элементы на концах штрихов букв.

Также существуют другие категории, например «Script», «Blackletter» или «Mono», но они не используются так же широко, как предыдущие.

Шрифты, «безопасные для web»

«Безопасный для web» — это термин, используемый для описания доступных элементов, или, другими словами, «безопасный» для использования в интернете. Он применяется не только к шрифтам, но в этом контексте особенно, он относится к шрифтам, которые установлены на большинстве компьютеров (PC и Mac).

Они могут применяться на вашем сайте без каких-либо хаков, методов замены или скриптов и будут правильно отображаться на всех компьютерах (как минимум тех, которые подключены к интернету).

Приведу небольшой список «безопасных» шрифтов:

Без засечек:

• Helvetica
• Arial
• Tahoma
• Impact
• Lucida Sans
• Verdana
• Geneva

С засечками:

• Times New Roman
• Georgia
• Garamond
• Palatino Linotype
• Book Antiqua
• Courier
• Monaco

Другие заметки

Также доступны другие способы форматирования текста, которые вам нужно учитывать, настраивая шрифт. Даже если у вас есть очень хороший шрифт, легко читаемый и отлично подходящий к вашему дизайну,, все впечатление от сайта может быть испорчено, если не настроено расстояние между буквами или высота строки.

Эти две характеристики могут сделать текст более читаемым. Они также могут быть использованы для достижения определенного эффекта, например сделать буквы более сжатыми, что может улучшить ваш дизайн. Пока они остаются читаемыми, это приемлемо.

Примечание относительно длины строк в блоках с текстом: советуется (хотя это и не строгое правило), чтобы на каждой строке было по 45-75 символов. Если строка будет слишком короткая, это замедлит скорость чтения текста. Если строка содержит слишком много знаков, становится очень легко потерять строку, которую читаешь, переходя к следующей.

Выводы

Из всех правил, перечисленных выше, наиболее важное — читаемость текста. Как подчеркивалось на протяжении всей статьи, никакое из остальных привил не должно считаться нерушимым. Вы можете пробовать экспериментировать или спрашивать отзывы у дизайнеров или любого обычного пользователя.

Перевод статьи Choosing the Right Typography for Your Website

Типографика в вебе / Хабр

Типографика — сильнейший инструмент для выражения посыла в веб-дизайне. С его помощью вы можете объединить текстовую и визуальную составляющие, что поможет вам достучаться до посетителя. Правильное использование типографики поможет избежать типичных ошибок, допускаемых дизайнерами при создании очередного шедевра. Постараемся понять, что же мы делаем не так, и как избежать ошибок в будущем.

Для начала давайте разберемся с терминологией. Наверняка большинство терминов вам знакомы, но еще разок ознакомиться с определениями не будет лишним. Возможно, это дополнит ту информацию, которой вы уже обладаете.

Типографика — свод законов, правил и норм оформления текста, основанных на изучении восприятия набора читателем. Знание и понимание типографики превращают текст в инструмент построения композиции, делают его живым, придают характер и способность передать идею не только при помощи содержания, но и графически.

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.

Гарнитуры можно разделить на две основные категории:

• Антиква — шрифты с засечками.
• Гротеск, соответственно, — шрифт без засечек.

Шрифт с засечками, как бы держит строку, а соответственно повышается удобочитаемость. Часто шрифты с засечками создают ощущение профессионализма и авторитетности предоставляемой информации, выражают уважение, подчеркивают стабильность и консерватизм в лучшем понимании этого слова. Шрифты без засечек, как правило, акцентируют рациональность, следование стилю, молодость и современность. Помогают создать пространство между буквами, а также отделить один знак от другого.

Кегль — высота буквы, включающая в себя нижние и верхние выносные элементы. Измеряется в типографских пунктах (обозначается как pt). Например, текст набранный 14 кеглем, будет равен 14 pt по высоте.

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

Кернинг — расстояние между буквами. Основная суть кернинга — подбор различных интервалов между различными парами конкретных букв для увеличения удобочитаемости.

Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?

Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

Не знаем какого размера должен быть шрифт

Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор — в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.

Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование — Установки — Основные. Далее — Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».

Длина строки — разве это важно?

Длина строки не должна превышать 600 px. Это оптимальный размер для комфортного перемещения взгляда с одной строчки на другую. Очень широкую контентную часть тяжело читать — часто просто теряешь ту строчку, на которую собирался перейти после прочтения длинной предыдущей строки. Если все-таки необходимо растянуть текстовый блок на 1000 px и более по ширине, можно попробовать разбить текст на две или более колонок. Другой вариант — сделать межстрочное расстояние чуть больше обычного, чтобы визуально сильнее отделить строки друг от друга. Не забывайте разделять текст абзацами, это также поможет сделать его легко читаемым.

Интерлиньяж соответствует размеру шрифта

Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.

Выбираем любой понравившийся шрифт

Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru, если, конечно, заказчик не предоставил вам свой шрифт.

O Lorem, lorem…

Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет — зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» — произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum…» можно вставить прямо из фотошопа (Меню: Текст — Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется — латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.

Ссылки

Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Поэтому необходимо заранее продумать, как будут выглядеть все ссылки на сайте. Допустим, все кликабельные элементы — одного цвета, например красные, а не кликабельные другого — черного. Тогда никто не будет путаться.

Часто встречается такое: заголовок выделен красным цветом (ведь надо его как-то выделить), дальше еще несколько очень важных фраз УТП синего цвета и все это вперемешку с обычным текстом черного цвета. В конце текста кнопочка, тоже красная. Понятно, что надо кликать на кнопку, но, оказывается, кликабельным был еще и текст, окрашенный в синий (он открывал дополнительную информацию). Но кто знал, кто знал…

Выравнивание

Есть текстовые блоки, которые очень часто выравниваются неправильно — это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется — композиционно должно быть именно так) — это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.

Контраст

Контраст — это одно из основных средств выразительности в дизайне. Не нужно бояться больших форм и пустых пространств! Нарочито крупная типографика становится самостоятельным элементом, не требующим дополнительных графических средств оформления. Хороший пример контраста в цветах, формах и размерах всех объектов.

Стили

Нужно всегда думать о том, какую информацию вы пытаетесь донести посетителю. Выбирая шрифт, следует помнить, что счастливые сообщения должны сопровождаться легкими, воздушными и мягкими формами шрифтов, в то время как сообщения каких-то более мрачных тем (например, Хэллоуин) лучше было бы сопровождать шрифтами с более жестким начертанием. С помощью типографики веб-дизайнеры подчеркивают атмосферу и стиль страницы, а также создают благотворную почву для эмоционального отклика.

Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует.

Мобильная типографика / Хабр

При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.

Размер

В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).

Пример сайта с соотношением размеров шрифтов 16/24/72:

Контраст

Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.

Отступы

Выбор шрифта

Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.

Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:

Адаптивный дизайн

Изменение размера шрифта

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h2   { font-size: 2.4rem; } /* =24px */

@media (max-width: 640px) { body {font-size:1.2rem;} } 
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

Отступы и длина строк

@media (min-width: 950px) { .container {width:675px;} } 

@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } } 

Хорошие примеры мобильной типографики

Полезно почитать

Как размер мобильного шрифта влияет на SEO?

1. WooRank
2. Руководства по SEO
3. Как размер мобильного шрифта влияет на SEO?

Мобильные устройства бывают самых разных размеров, поэтому важно, чтобы текст на вашем сайте имел размер шрифта, который можно было бы прочитать на экранах разных размеров.Текст должен быть достаточно большим, чтобы его можно было читать без увеличения, но в то же время не слишком большим, чтобы пользователям приходилось бесконечно прокручивать, чтобы прочитать весь контент.

Размер шрифта, который пользователи могут читать с комфортом, нуждаясь в увеличении или переключении на альбомную ориентацию, дает людям, посещающим ваш сайт с мобильных устройств, гораздо лучший опыт, в чем и заключается дружелюбие к мобильным устройствам.

Каков идеальный размер мобильного шрифта?

Идеальный мобильный сайт имеет текст, который удобно читать, когда пользователь смотрит в свой телефон с удобного расстояния.

Идеальный размер шрифта base для мобильных экранов составляет 16 пикселей. Все, что меньше, пользователям придется щипать и увеличивать, чтобы прочитать. В CSS вашего сайта рекомендуется установить атрибут font-size в ems, чтобы его было легче масштабировать.

Использование ems полезно, потому что оно изменяет текст относительно размера, установленного в документе.

Как сделать текст читаемым на всех экранах

1. Изучите мобильную тему или шаблон

Если вы используете WordPress, Shopify или другую платформу CMS, вы можете просто приобрести мобильную тему или шаблон, которые автоматически сделают ваш сайт адаптивным.Размер текста автоматически изменится в соответствии с используемым устройством.

Прежде чем остановиться на теме или шаблоне, обязательно прочитайте отзывы веб-дизайнеров, которые использовали его ранее , и просмотрите сайты, которые используют конкретную тему или шаблон, чтобы увидеть, нравится ли он вам.

Большинство тем предоставляют живую демонстрацию перед покупкой, так что вы можете протестировать тему на своем рабочем столе и нажать «Проверить элемент», чтобы просмотреть макет шаблона сайта на основе нескольких размеров экрана:

Независимо от того, используете ли вы тему или собственный веб-дизайн, вам необходимо указать мобильное окно просмотра.

2. Реализация адаптивного дизайна для мобильных устройств

Вы можете использовать CSS для управления размером шрифта вашего сайта на разных устройствах. Процедура очень проста:

Размер шрифта может использовать различные единицы измерения, чтобы указать, насколько большим должен быть ваш текст:

• пикселей (px)
• балла (pt)
• EM (EM)
• процентов (%)

Общая рекомендация — использовать браузер по умолчанию: 1.2em, 12pt, 16px или p {font-size: 120%;}.

Вот список преобразований для каждого показателя:

Выберите разумный размер шрифта для каждого типа: заголовок, заголовки, абзацы. 16 пикселей — это настройка CSS по умолчанию. Большинство тем, которые вы установили для своего сайта, будут иметь дополнительные настройки тем, чтобы упростить вам изменение размера в зависимости от вашего сайта и потребностей посетителей.

Вот пример параметров темы Muffin Builder:

Не используйте слишком большой размер [размер 20 или больше].Оставьте это для заголовков и заголовков. Большой размер шрифта означает, что пользователям придется дольше прокручивать страницу, что неудобно.

Практическое правило:

Классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.

Отрегулируйте этот размер шрифта в зависимости от особенностей используемого шрифта.

При выборе размера шрифта учитывайте базовый размер. Это связано с тем, что контент будет просматриваться на устройствах разного размера, и вы хотите быть уверены, что отношения размеров шрифта всегда будут одинаковыми, независимо от устройства, на котором просматривается контент.

3. Размер шрифта по высоте

Не забудьте оставить достаточно места между строками и абзацами, чтобы страница не выглядела слишком тесной. Хотя на настольном сайте можно обойтись малой высотой строки и плотным текстом, пользователю будет практически невозможно прочитать такой текст на устройстве с маленьким экраном без масштабирования, что создает довольно неприятные ощущения.

Для ссылок вам нужно будет оставить еще больше места между строками текста для готовности экрана касания.

В трех приведенных выше примерах абзаца, предоставленных css-tricks, высота строки установлена ​​на 150%, 200% и 250% или 30 пикселей, 40 пикселей и 50 пикселей.

Google рекомендует использовать по крайней мере высоту строки браузера по умолчанию 1,2, что означает, что промежутки между строками текста как минимум в 1,2 раза превышают размер самого текста.

4. Медиа-запросы для разных размеров экрана

Размер текста вашего сайта определяется медиа-запросами, объявленными для экранов разного размера.Вы можете настроить каждый размер шрифта в зависимости от размера экрана в вашем файле CSS. Например:

  html {font-size: 100%;}

@media (min-width: 60em) {html {font-size: 100%}}
  

Есть несколько различных элементов, по которым вы можете запросить: min-width , max-width , min-height и max-height .

Вот несколько правил медиа-запросов, основанных на рекомендации Google:

• Когда размер браузера составляет от 0 пикселей, до , 640 пикселей, пикселей, макс. - 640 пикселей.css применяется.

• Когда ширина браузера составляет от 500 пикселей, до , 600 пикселей, пикселей, применяются стили в пределах @media .

• Если размер браузера 640 пикселей или больше , применяется min-640px.css .

• Когда ширина браузера больше высоты , применяется landscape.css .

• Когда высота браузера больше ширины , книжная.css применяется.

Чтобы избежать чрезмерного усложнения, не используйте слишком много шрифтов и размеров шрифтов на одной странице, так как это может затруднить контроль читаемости текста на разных устройствах. Макет вашей страницы также будет беспорядочным, а текст может быть даже нечитаемым на устройствах с маленькими экранами.

5. Создавайте разные версии своего сайта для разных устройств

Создание отдельного мобильного веб-сайта — это вариант , если по какой-то причине вы не можете создать адаптивный дизайн.Использование отдельного мобильного сайта — не лучший вариант (для создания и поддержки требуется больше работы), но для некоторых сайтов это сработало.

Наиболее распространенный способ сделать это — использовать так называемые «m-точки». «M-точка» — это совершенно новый сайт, предназначенный для мобильных устройств, а затем размещенный на субдомене, обычно «m.example.com». Отсюда и термин «m-точка».

Затем вы перенаправляете мобильных пользователей на мобильную версию своего сайта.

Дополнительные ресурсы о мобильности

Размер шрифта может показаться мелочью, но это жизненно важный элемент SEO, ориентированного на мобильные устройства.Вышеупомянутые стратегии помогут сделать ваш шрифт легко читаемым на мобильном устройстве. Прочтите другие наши руководства, чтобы сделать свой сайт более удобным для мобильных устройств:

CSS Font-Sizing: A Definitive Guide

Размер шрифта в CSS звучит так, как будто это должно быть легко. Пока вы не попробуете. Многие разработчики используют силу; они возятся со свойством font-size до тех пор, пока оно не выглядит правильным, только чтобы найти его в другом браузере. Небольшое понимание может иметь большое значение…

Свойство font-size

Свойство font-size можно установить для любого тега HTML (даже если он обычно не содержит текстового содержимого, например br ).Ему могут быть назначены различные параметры абсолютного, относительного или длины.

Элемент наследует размер шрифта своего родителя, если вы его не переопределите. Это особенно важно при указании относительных размеров.

Ключевые слова абсолютного размера шрифта

Доступно несколько ключевых слов с абсолютным размером шрифта. Размер шрифта определяется предустановкой браузера, и элемент не наследует размер своего родителя.

• размер шрифта: xx-small;
• размер шрифта: x-small;
• font-size: small;
• размер шрифта: средний;
• font-size: large;
• font-size: x-large;
• font-size: xx-large;

Хотя большинство браузеров поддерживают эти ключевые слова, точные размеры будут отличаться.Это довольно грубый метод определения размера шрифта, которого большинство разработчиков обычно избегает.

Ключевые слова относительного размера шрифта

Доступны два ключевых слова относительного размера шрифта. Размер шрифта соответствует его родительскому элементу:

• размер шрифта: меньше;
• font-size: больше;

Например, если родительский элемент имеет размер шрифта «средний», значение «больше» установит для элемента значение «большой». Другие шрифтовые единицы обычно меняются примерно в 1 раз.2, но, опять же, стандарта нет, и результаты браузера будут отличаться.

Абсолютные длины

Свойству font-size можно присвоить абсолютную длину:

• мм : миллиметры, например 10мм.
• см : сантиметры, например 1 см (= 10 мм).
• в : дюймы, например 0,39 дюйма (~ = 10 мм).
• pt : точка, где 1pt обычно принимается равным 1/72 дюйма, например 12pt.
• pc : pica, где 1pc — 12pt
• пикселей : пиксель, e.грамм. 14 пикселей.

В общем, со всеми этими единицами измерения есть проблемы. Миллиметры, сантиметры и дюймы являются неточными для носителя на основе экрана. Точки и картинки ненадежны, поскольку системы могут использовать разные настройки dpi и . Пиксель кажется наиболее подходящим, но это может привести к проблемам с доступностью, поскольку размер текста нельзя изменить в IE.

Относительная длина

Свойству font-size можно присвоить единицу измерения относительно размера шрифта его родителя:

• em : 1em эквивалентно текущему размеру шрифта, поэтому 2em вдвое больше.
• % : 100% эквивалентно текущему размеру шрифта, поэтому 200% в два раза больше.
• ex : 1ex эквивалентно высоте буквы «x» в текущем шрифте.

Немногие разработчики используют ex, но это может быть полезно в некоторых ситуациях, когда вам нужны мелкие размеры шрифта, например 1ex, а не 0.525em.

Размеры в процентах и ​​’em’ эквивалентны, например 50% = 0,5em, 100% = 1em, 120% = 1,2em и т. Д. В некоторых браузерах есть небольшие различия, но это редко является серьезной проблемой.Если вы хотите сохранить каждый байт, вы можете выбрать самое короткое определение, т.е. 50% короче 0,5em, а 1em короче 100%.

Размер текста и масштабирование страницы

Вот где закрадывается дополнительная сложность. Большинство браузеров позволяют пользователю:

1. увеличить или уменьшить базовый размер текста (размеры изображения не меняются)
2. увеличить или уменьшить масштаб страницы, чтобы весь текст и графика изменились соответственно, или
3. позволяет изменять размер текста и масштабировать страницу.

Чтобы еще больше усложнить ситуацию, Internet Explorer не позволяет изменять размер текста для элементов, размер шрифта которых определен в пикселях (px).

Если вы дизайнер, перешедший в Интернет с печатного фона, то дать пользователю столько возможностей — это неприятно. Ваш дизайн может быть испорчен, если пользователь увеличит масштаб на 200%, но уменьшит размер текста до 50%. И — нет — вы ничего не можете сделать, чтобы предотвратить это. И вам не следует.

Рекомендации по размеру шрифта CSS

По общему мнению, лучшим решением в большинстве ситуаций является «em» или «%».Шрифты можно точно масштабировать относительно друг друга, а размер текста браузера поддерживается. Я бы также рекомендовал использовать процентный размер шрифта на теге body; это приводит к лучшему изменению размера текста в некоторых старых браузерах.

Есть еще пара рекомендаций, которые я бы посоветовал при разработке сайта:

1. сбросил размер шрифта и масштаб страницы до значений по умолчанию во всех ваших браузерах перед тестированием (меня это несколько раз ловило!)
2. попробуйте разумное сочетание изменения размера текста и масштабирования страницы в различных браузерах, чтобы текст оставался читабельным.

Вызывали ли когда-нибудь проблемы с изменением размера шрифта? Есть ли у вас другие советы?

Изменить размер шрифта заголовка сайта

Извините, страница https; // staging1.baltimoreaaghs.org

УРА! Извините, я не осознал, что мои RSS-каналы были скрыты в моем Outlook, и не видел вашего сообщения… что было 3 дня назад! Я ненавижу пропускать вопросы поддержки, поэтому приношу свои извинения.

Чтобы изменить размер шрифта для заголовка, добавьте его на вкладку «Дополнительные CSS» в настройщике, а затем отрегулируйте размер шрифта по своему усмотрению:

  # site-title {
размер шрифта: 3rem;
}  

За описание сайта (слоган)

  # site-description {
размер шрифта: 1рем;
}  

Не уверен насчет вашего логотипа, так как мне не удалось получить доступ к вашему сайту.

Спасибо. Так что вы можете проверить логотип. Сайт staging1.baltimoreaahgs.org

Опять же, извините за поздний ответ. Спасибо также за новую ссылку. Я думала, что свяжусь с вами по поводу логотипа, прежде чем отправиться в страну сна (для меня 3:30 утра).

В любом случае, не уверен, что это то, что вы ищете, но для этого потребуется добавить некоторый пользовательский CSS на вкладку Additional CSS в настройщике, так что, надеюсь, это сработает для вас:

  # сайт-брендинг.col-lg-8 {
    положение: относительное;
}
img.custom-logo {
    позиция: абсолютная;
    поле справа: 20 пикселей;
}
p # site-title {
    положение: относительное;
    маржа слева: 160 пикселей;
    минимальная высота: 145 пикселей;
}  

С уважением,
Андре

Привет, Андре,
Большое спасибо. Он отлично работает, за исключением мобильных устройств, где я хочу, чтобы изображение отображалось над заголовком сайта.

У вас больше нет доступа к вашему сайту, но код выше и для адаптивного мобильного устройства, я предполагаю, будет изменен следующим образом:

 
# site-branding {
    выравнивание текста: центр;
}
# сайт-брендинг.col-lg-8 {
    положение: относительное;
}
img.custom-logo {
    положение: относительное;
    маржа: авто;
}
p # site-title {
    положение: относительное;
    маржа: авто;
    мин-высота: начальная;
}

@media (min-width: 992px) {
# site-branding {
    выравнивание текста: начальное;
}
 # site-branding .col-lg-8 {
    положение: относительное;
 }
 img.custom-logo {
    позиция: абсолютная;
    поле справа: 20 пикселей;
 }
 p # site-title {
    положение: относительное;
    маржа слева: 160 пикселей;
    минимальная высота: 145 пикселей;
 }
}  

Первая часть предназначена для маленьких экранов, а вторая часть, следующая за строкой @media, предназначена для больших дисплеев, в которых используется код, который я вам изначально дал.Попробуйте и посмотрите, работает ли это. Опять же, я сделал это, не видя вашего сайта, так что, надеюсь, это сработает.

Почти готово. Выглядит хорошо. Последняя настройка. Как бы вы центрировали описание сайта под логотипом и заголовком сайта для всех точек останова?

Удалось сделать это для ноутбуков и мобильных устройств. Для настольного просмотра шрифт описания сайта намного меньше и не центрирован.

Кажется, я нашел последнюю проблему и исправил ее.Спасибо за всю твою помощь.

CSS свойство font-size-adjust

Пример

Указав свойство font-size-adjust, браузер настроит шрифт размер должен быть одинаковым независимо от семейства шрифтов («вердана» имеет вид значение 0,58)

div {
регулировка размера шрифта: 0,58;
}

Определение и использование

Свойство font-size-adjust позволяет лучше контролировать размер шрифта при первый выбранный шрифт недоступен.

Если шрифт недоступен, браузер использует второй указанный шрифт. Это может привести к значительному изменению размера шрифта. Чтобы предотвратить это, используйте font-size-adjust property.

Все шрифты имеют «значение аспекта», которое представляет собой разницу в размере между строчная буква «x» и прописная буква «X».

Когда браузеру известно «значение аспекта» для первого выбранного шрифта, браузер может определить, какой размер шрифта использовать при отображении текста с второй выбор шрифта.

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Синтаксис

font-size-adjust: номер | нет | начальный | наследование;

Стоимость недвижимости

Связанные страницы

Ссылка на HTML DOM: свойство fontSizeAdjust