Поменяли шрифт сайта на Open Sans

Шрифт для сайта — как выбрать или поменять шрифты

Поменяли шрифт сайта на Open Sans

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

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

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

Как поменять и настроить шрифт для сайта на Тильде

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

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

В настройках сайта, на вкладке шрифты вы увидите шрифтовые пары — это сочетания двух шрифтов, подобранные нашими дизайнерами. Пролистайте их, возможно, вы найдете то, что вам нужно. Нажмите кнопку «Выбрать» и «Сохранить изменения». Шрифты на вашем сайте поменяются.

Если вы пролистаете страницу ниже, вы увидите настройки размера, насыщенности и цветов. Параметры, которые вы укажете тут, будут применены ко всем страницам сайта. Если в каких-то отдельных блоках вам нужно будет их поменять, это можно будет сделать в редакторе для конкретного блока.

Что такое насыщенность шрифта

Насыщенность (начертание, font weight) определяет толщину каждой буквы. Обычно мы привыкли называть текст нормальным (normal) и жирным (bold).

У шрифтов могут быть так же дополнительные варианты толщин — от очень тонких (super light) до очень жирных (super bold). На Тильде поддерживаются 5 основных значений: light, normal, medium, semi-bold, bold.

Не все шрифты имеют все градации насыщенности, многие имеют только два начертания: нормальное и жирное.

Семь вариантов насыщенности шрифта Avenir.

Каким должен быть размер шрифта на сайте

Размер зависит от количества текста. Если текста очень мало, и он используется, по сути, только для подписей и комментариев, сделайте его крупнее — 22px (по умолчанию в настройках 20px). Так он будет выглядеть более презентационно. Если текста достаточно много, наoборот, уменьшите до 18px, так он будет легче читаться.

Настройка параметров шрифта для разных типов проекта

Начнем с самого простого: какой у вас тип проекта — это статья, пост в блоге, рассказ, в общем, что-то, где текст — это главное? Или у вас сайт, лэндинг, фотоистория, — проект, в котором текста не так много? Назовем два типа проектов условно: статья и сайт.

Настройка шрифтов для сайта в зависимости от тональности

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

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

Полужирный заголовок и нормальный текст

Semi-Bold+Normal

Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента. Для каких сайтов подойдет: для любых. В настройках сайта задайте следующие параметры: Text font weight — Normal

Headline font weight — Semi-Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Страница вакансии. В примере используются: Open Sans (для заголовков) и Roboto (для текста).

Жирный заголовок и нормальный текст

Bold+Normal

Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия. Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д. В настройках сайта задайте следующие параметры: Text font weight — Normal

Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Сайт коворкинга. В примере используются: Ubuntu (для заголовков) и PT Sans (для текста).

Жирный заголовок и тонкий текст

Bold+Light

Более необычное сочетание, выглядит эффектно за счет контраста.

Уместно в случае, когда вам нужно сочетать и драйв, и стиль

Для каких сайтов подойдет: Например, такое сочетание мы использовали на лэндинге нашего курса «Интернет-маркетинг с нуля».

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

В настройках сайта задайте следующие параметры: Text font weight — Light

Headline font weight — Bold

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Страница дизайн-студии. В примере используются: Noto Sans (для заголовков) и Open Sans (для текста).

Тонкий заголовок и тонкий текст

Light +Light

Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов.

И красивые фотографии. Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

В настройках сайта задайте следующие параметры: Text font weight — Light

Headline font weight — Light

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Лэндинг мобильного приложения для обработки фотографий.

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

Как подобрать шрифт для статьи

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

Но если у вас фотоотчет, и текст — это, в основном, подписи к фотографиям, то размер можно оставить 20px или увеличить до 22px.

В настройках сайта задайте следующие параметры:Text font weight — NormalHeadline font weight — Bold / Semi-Bold

Text font size — 18px

Настройки сайта > Шрифты и цвета > Размер и насыщенность

Пример

Страница поста в блоге о моде.

Пример

Корпоративный блог.

Пример

Статья о контент-маркетинге.

Оранжевые частицы на изображении слева — это засечки. Цитата Массимо Винелли на картинке слева набрана шрифтом Baskerville Regular, справа — Helvetica Light.

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

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

Современные дисплеи одинаково хорошо отображают и те, и другие.

Поэтому сейчас выбор «с засечками или без» — вопрос характера сообщения, а не читабельности. Шрифты с засечками могут задавать более формальный тон и быть подходящими для некоторых брендов.

Как подключить шрифт, которого нет в базовом наборе

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

Где купить шрифты или найти бесплатные

На Тильде можно подключить шрифт пятью способами:

Выбрать из тех, которые есть в настройках. Мы отобрали 13 хороших шрифтов из открытых источников.

Загрузить на Тильду свой файл шрифта. В этом случае его нужно где-то взять, например, купить на:
MyFonts.com Цена примерно $19/29/49 за одно начертание, встречаются дешевые по $2, есть такие, которые стоят $89. В некоторых наборах иногда есть бесплатные. Любой шрифт для веба можно протестировать на своем сайте в течение 30 дней.

Fonts.com

Система подписки. Есть бесплатный план (3 000 шрифтов), платные тарифы от $5 до $100 в месяц.

Type.today

Цена 2100-3500 руб.

Подключить через Adobe Typekit. Это библиотека шрифтов. — Бесплатный тарифный план: 940 шрифтов.— Платный стоит $49 в год и дает доступ к 5 660 шрифтам.

— Доступ к тем же 5 660 шрифтам имеют подписчики Adobe Creative Cloud. Если вы платите за Creative Cloud, платить за Typekit дополнительно не нужно.

Загрузить свой CSS файл. Наша инструкция.

Список хороших шрифтов, в которых есть кириллица

Futura. Где купить: myfonts.com/fonts/paratype/futura-book

Proxima Nova. Где купить: myfonts.com/fonts/marksimonson/proxima-nova

Franklin Gothic. Где купить: myfonts.com/fonts/itc/franklin-gothic

Graphik. Где купить: type.today/ru/Graphik

Museo. Где купить: myfonts.com/fonts/exljbris/museo-sans

Gotham. Где купить: typography.com/fonts/gotham

GT Walsheim. Где купить: grillitype.com/typefaces/gt-walsheim

Helvetica Neue. Где купить: myfonts.com/fonts/linotype/helvetica-neue

21 Cent. Где купить: myfonts.com/fonts/letterheadrussia/21-cent

20 Копеек. Где купить: yurigordon.com/ru/shop/fonts/20kopeek

Как обеспечить читабельность текста

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

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

В-третьих, можно у конкретного блока увеличить насыщенность, применяя «инлайновый стиль». Это значит, что вы задаете настройки не для всего сайта, а только для части текста.

Нужно выделить текст и задать параметры через редактор.

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

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

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

Также можно заглянуть на независимый архив типографики http://fontsinuse.com/ — ресурс на котором собраны и рассортированы образцы вебсайтов и печатных изданий по типу использованного шрифта.

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Источник: https://tilda.education/articles-fonts

10 лучших бесплатных кириллических шрифтов с Google Fonts

Поменяли шрифт сайта на Open Sans

Разработка дизайна для сайта или проекта — трудоёмкий процесс, в начале которого важно принять правильные стилистические решения. Дизайнерам есть над чем подумать: от цветовой схемы и логотипа до навигации и вёрстки контента. Но самое сложное всё-таки в том, чтобы объединить все эти составляющие стиля сайта в одну сбалансированную и цельную концепцию.

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

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

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

О лицензии шрифтов google fonts

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

К бесплатным относятся системные шрифты, установленные в персональных компьютерах, а также те, что предоставляет Google Fonts.

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

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

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

С лицензиями разобрались — переходим к подборке. 

Rubik

Rubik — это представитель семейства шрифтов без засечек со слегка закруглёнными углами. Его разработали дизайнеры Филипп Хьюберт и Себастьян Фишер. 

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

Примеры использования: dinoballiana.com, moeamaya.com, genesisblockchain.io.

Cormorant

Cormorant — это изящный шрифт с засечками, созданный Кристианом Талманном. Включает пять классических начертаний (Light, Regular, Medium, SemiBold, Bold) и большое количество символов. Посмотрите проект на Behance, чтобы детально изучить его. 

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

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

Примеры использования: sasha-ng.com, readwildness.com/eco, katescott.co/sparhawk.

Alegreya Sans

Alegreya Sans — это рубленый шрифт (без засечек), разработанный аргентинским дизайнером Хуаном Пабло дель Пералом. Представлен в семи начертаниях, в том числе в Italic.

Его рекомендуют для наборного текста или для небольших заголовков в начертании Bold. Alegreya Sans минималистичен и отличается необычными пропорциями, поэтому непрост в работе. Но он сильно недооценён на просторах Google Fonts и поэтому будет выглядеть оригинально.

Примеры использования: cafefrida.ca, shinbyeong.com.

Source Sans Pro

Source Sans Pro — это первый бесплатный шрифт Adobe. Разработан Полом Д. Хантом. Без засечек, предназначен для работы в пользовательских интерфейсах. У дизайна Source Sans Pro классический готический характер, который легко воспринимается зрительно.

Шрифт разработан в шести градациях толщины, в прямом и наклонном начертании. Благодаря его компактности, Source Sans Pro можно удачно использовать не только в интерфейсах, но и там, где много текста (в лонгридах). 

Примеры: whitehouse.gov, owlstudios.co, abyssale.com.

Playfair Display

Playfair Display — один из самых известных шрифтов с засечками. Автор — Клаус Эггерс Соренсен. Идеология этого шрифта основана на изящных каллиграфических формах 18 века. Разработан в 2011 году, но до сих пор не теряет популярности. Контрастный и умеренно широкий, он идеально подходит для любых заголовков.

Этот шрифт будет отличным акцентом в проектах, где вы хотите подчеркнуть изящность, лаконичность, статусность или эстетичность бренда. Playfair Display удачно комбинируется с рублеными шрифтами умеренной ширины, вроде Open Sans. 

Примеры использования: zack.es, sachatourtoulou.com, councl.com.

Montserrat

Montserrat — это один из шрифтов, наиболее удобных для чтения. Без засечек, созданный Джульеттой Улановски в 1989 году — с тех пор невероятно распространённый. В Montserrat есть все варианты начертаний: от ультратонкого до жирного, — а также соответствующие курсивы.

У этого шрифта примерно одинаковое соотношение ширины и высоты, поэтому он удобен практически для всех типов проектов. За исключением, пожалуй, только интерфейсов и мобильных приложений. С 2019 года, когда в моду вошли широкие шрифты для заголовков (например, Druk Wide), Montserrat переживает новую волну популярности.

Примеры: welcometonext.com, melonfashion.ru, userflower.com.

Merriweather

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

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

Примеры: hopesandfears.com, interactive.unwomen.org, scmp.com.

Open Sans

Open Sans — пожалуй, самый известный шрифт без засечек, представленный на платформе Google Fonts. Разработан Стивом Маттесоном, директором шрифтов Ascender Corp. Open Sans стал хитом во всех областях дизайна: от печатных материалов до мобильных приложений.

Секрет его успеха очевиден уже по названию: это открытый, нейтральный и дружелюбный шрифт. Его главные плюсы — разборчивость и универсальность. А он ещё и бесплатный :)

Примеры: noiz.io, cordial.com, designthingy.co.

IBM Plex Sans

IBM Plex Sans — это нейтральный, но в то же время дружественный шрифт в стиле гротеск. Включает Sans, Sans Condensed, Mono и Serif. Остаётся разборчивым в печатных, мобильных и веб-интерфейсах.

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

Примеры: coolstuff.nyc, jasperterra.nl, niteeshyadav.com

Raleway

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

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

Примеры: weddingdronenewyork.com, bellevoye.fr/en, gdovindesigns.com/owed

Источник: https://geekbrains.ru/posts/10-luchshih-besplatnyh-kirillicheskih-shriftov-s-google-fonts

Все HR- сотруднику
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: