Шрифтовая схема сайта: Памятка дизайнеру сайтов / Habr

где найти и как выбрать

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

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

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

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

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

Material Color Tool — сервис специально был создан в помощь дизайнерам пользовательских интерфейсов. Главная особенность в том, что выбранную цветовую палитру можно сразу применить к схеме веб-страницы и оценить, насколько удачным получится результат.

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

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

Colourcode — во многом сервис похож на Colordot, но с более гибкими настройками и возможностью выбрать комбинацию оттенков по триадным, монохромным, аналоговым и другим стилям цвета.

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

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

Конструктор сайтов Nubex | Шрифты и цветовые схемы в ассортименте

Алена СавчукКонтент-менеджер

Очень часто мы слышали от клиентов две просьбы:

• «А поменяйте нам шрифты на сайте, чтобы нам нравилось!»
• «А давайте сделаем другой цвет текста (листа, фона, меню, виджетов)!»

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

Игры со шрифтами

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

В конструкторе сайтов мы, как правило, используем три вида шрифтов:

• для основного текста
• для заголовков
• для навигации

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

Чтобы настроить шрифты на своем сайте, зайдите в раздел «Оформление» и выберите пункт «Шрифты». В нем выделите подходящую шрифтовую схему, и она автоматически активируется на сайте.

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

Сам себе колорист

Настройки цветовой гаммы сайта тоже изменились. Теперь вы не просто можете выбрать одно из 27 готовых цветовых решений, но и можете самостоятельно отредактировать его. Любой цвет в выбранной вами цветовой схеме теперь можно заменить.

Для этого откройте «Пользовательские настройки цветов» и выберите там все нужные оттенки. Админка автоматически сохранит значения всех выбранных вами цветов.

Не забывайте и про возможности фона. Для него вы можете подобрать фотографию в подходящей цветовой гамме.

Форматирование публикации — Создание публикаций, визиток, календарей с помощью Publisher

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

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

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

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

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

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

Модульная сетка

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

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

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

Что такое модульная сетка?

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

Модулем можно назвать единицу измерения, создаваемую для придания соразмерности и пропорциональности.

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

Плитка в ванной комнате, тоже, вся стена модульная сетка (при условии, что вся плитка одного размера), а одна плитка это модуль или единица измерения как в нашем случае.

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

Для чего нужна сетка, и какие задачи она выполняет?

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

• Ускоряет процесс разработки. Нам требуется гораздо меньше времени на подборку места для блоков в макете.
• Помогает в позиционирование. Все элементы выравниваются относительно друг друга по сетке, и позиционирование занимает минимум времени.
• Позволяет шаблонизировать. Разработав модульную сетку, мы создаем шаблонную основу для всего проекта, как при разработке, так и для решений на будущее. А также предоставляем возможности быстрой модификации.
• Исключает ошибки. Сетка позволяет избежать ряда самых обычных ошибок с позиционированием, структурированием, размерами и отступами между блоков.
• Является единой системой пропорций. Благодаря модулям все элементы в макете пропорциональны и соизмеримы между собой.
• Структурирует и упорядочивает. Благодаря модульной сетке макет становится более структурированный и упорядоченный, дизайн воспринимается более комфортным.
• Приводит к более эстетичному виду. Четкая и логическая структура получаемого сайта придает более эстетичный вид.
• Помогает в дальнейшей разработке другим участникам проекта. Дизайн, построенный посредством модульной системы верстки, верстать значительно легче, нежели макет, построенный без сетки. Сетка дает верстальщику стандартизацию решений, ускоряет процесс верстки. Позволяет легче работать большой команде над масштабными проектами. А так же позволяет гораздо быстрее разобраться в макете новым разработчикам участникам проекта. Что в свою очередь приводит к получению более целостного результата работы.

Строим модульную сетку

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

Минимальным разрешением чаще всего принимаются разрешения монитора в 1024х768 и 1280х720 пикселей. Конечно, могут быть выбраны и другие разрешения, все как всегда зависит от стоящей перед Вами задачи. Исходя из этих параметров, нам и придется создавать размеры макета сайта. Из них нам наиболее важна ширина, так как она зачастую фиксирована у сайтов, а высота наоборот варьирует из-за наполнения сайта.

В данном случае я создам холст с шириной в 1000 пикселей под минимальное разрешение в 1024х768 пикселей. Контентную часть сделаю в 960 пикселей, по 20 пикселей отступы по краям (ширина наших полей).

Создаем шрифтовую сетку

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

Межстрочный интервал ( в css line‑height) можно рассчитать двумя способами:

1. Размер основного шрифта для контента (16пт.) / 2 + размер основного шрифта для контента (16пт.) = 24пт.
2. Размер основного шрифта для контента (16пт.) x 1.5 = 24пт.

Строим вертикальное членение или колоночную сетку

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

1. Если на сайте планируется присутствие блока с постоянной величиной (баннера, видео, иллюстрации и т.д.). Эти блоки имеют фиксированные размеры и зачастую включают в себя несколько модулей. Таким образом, зная их размер, мы можем с легкостью определить ширину модуля, достаточно понимать, что блок должен находиться в пределах ширины модулей.
2. Второй способ это когда у Вас есть конкретные задачи, на которые можно опираться. Например, по задаче стоит расположить в линию на всю ширину тела сайта определенное количество блоков, скажем 6. Тогда, зная этот параметр, мы можем прикинуть, что один такой блок включает в себя два модуля по ширине. Соответственно нам подойдет 12 колоночная сетка.

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

Таким образом, у нас получается ширина модуля равная 63,5 округлим до 63 пикселей. У нас остается по 0,5 пикселей на каждый модуль их у нас 12 итого 6 пикселей, раскидаем их на поля по 3 пикселя, тем самым наши поля увеличатся и станут равные 23 пикселям, а не 20, соответственно и контентная часть станет равная 954 пикс.

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

Делаем горизонтальное членение

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

Создаем прототип макета

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

Оформляем, детализируем, прорабатываем

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

А вот так макет выглядит уже без модульной сетки в итоге после всей проделанной работы.

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

И еще немного в этой статье: https://ruseller.com/lessons.php?rub=29&id=1180

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

Сетка бутстрап 4: https://yadi.sk/d/MJk6o62iNTWR5g

Пред. урок
След. урок

Дизайн культурно-просветительского сайта «Эстетика» Текст научной статьи по специальности «Компьютерные и информационные науки»

ДИЗАЙН КУЛЬТУРНО-ПРОСВЕТИТЕЛЬСКОГО САЙТА «ЭСТЕТИКА»

© Аббасов И.Б.1, Гривцов В.В.2, Павлов К.В.3

Инженерно-технологическая академия Южного федерального университета, г. Таганрог

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

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

Постановка проблемы

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

Развитие проекта в сети интернет позволяет вести диалог с посетителями, иметь быструю обратную связь и удобную аналитику предпочтений и интересов [1, 2]. Основное предполагаемое преимущество сайта «Эстетика» над аналогичными проектами — это отсутствие рекламы (полностью некоммерческий, образовательный характер) и максимально удобные пользовательские интерфейсы, стирающие грань между просмотром картины в музее и на экране монитора. Конечно, электронная картинка не может сравниться с впечатлением от реальной работы, но именно она может подтолкнуть зрителя посетить реальный музей, узнать больше о понравившемся авторе или даже начать самому заниматься творчеством.

1 Заведующий кафедрой Инженерной графики и компьютерного дизайна, доктор технических наук, профессор.

2 Доцент кафедры Инженерной графики и компьютерного дизайна, кандидат технических наук, доцент.ШАг!» (http://wikiart.org/ru) (рис. 1, слева). Положительными моментами являются: богатая коллекция художников и их работ, удобная система сортировки, быстродействие системы. Из недостатков можно отметить: слабо продуманный интерфейс, малый дополнительный функционал, низкая взаимосвязь материалов.

КАРТИНКИ НЕДЕЛИ 06.ВЗ

Картинки недели. 28.02 — 06.03

2Б лет «Фотошопу», Ники де Сен-Фалль с ружьем, Рембрандт перед смертью, библиотечный танк и конский скелет: самые яркие новости недели в картинках.

книги 04.03

Игорь Голоышток. Занятие дли старого городового. М.: Редакции Елены Шубиной, 2015

Мемуары советско-британского искусствоведа.

Рис.ШАТ», «АртГид»

Онлайн-путеводитель по художественной жизни Москвы «АртГид» (http://www.artguide.com/) (рис. 1, справа) имеет продуманный пользовательский интерфейс, качественный подбор иллюстративного наполнения, но большинство материалов локальны, и сайт ориентирован на новостной характер записей.

Хотелось бы отметить ресурсы, которые не рассматриваются в рамках данной работы в качестве прямых аналогов, но отдельные идеи или приемы которых послужили мотиватором для улучшения конечной формы разработки, привнесли свежесть в поисковый процесс проектирования. К ним относятся онлайн-журналы w-o-s.ru и lookatme.ru, которые стали хорошим примером реализации интересных интерактивных новшеств в статических ресурсах.

Анализ постановки задачи

Сообщество «Эстетика» было основано одним из авторов 4 января 2012 года в виде сообщества в социальной сети Вконтакте (http://vk.com/old_art). За

более чем четырехлетнюю историю развития в проекте было опубликовано более 850 записей об истории изобразительного искусства, произведениях мировых мастеров живописи и графики, тематических подборок. Сообщество получило широкую огласку и популярность среди любителей истории искусств: на сегодняшний день у него насчитывается более 87 000 подписчиков (76 % из России, остальные — из стран СНГ, ближнего и дальнего зарубежья).

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

Разработка дизайна сайта

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

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

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

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

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

В качестве основы для расположения материалов сайта были рассмотрены преимущества и недостатки двух современных парадигм построения интерфейсов — Metro (Microsoft) и Google Material Design. После анализа преимуществ и недостатков каждого из методов была сформирована новая концепция компоновки записей сайта в единое целое, базирующаяся на мозаичном принципе. Из достоинств разработки можно отметить как эстетически приятный вид, так и интуитивно понятный, не перегруженный дополнительными элементами интерфейс взаимодействия.

Рис. 2. Композиционная основа построения блоков сайта

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

Рис. 3. Итоговый вариант дизайна главной страницы сайта «Эстетика»

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

Материалы сайта включают в себя, в том числе, большое количество статей или текстов по общей тематике. Эта часть должна стать гармоничным дополнением к изобразительному материалу, не мешая образу художественных произведений. Таким образом, для сайта была продумана и создана оригинальная шрифтовая схема, включающая в себе гарнитуру PT Sans в качестве основной, а также PT Serif для отдельных подписей / выделительных надписей. Предусмотрены размеры шрифтов для любого возможного типа печатаемой информации, что позволяет достичь стилевого единства сайта [5, 6].

Разработка дизайн-макетов для предварительного тестирования было проведено в онлайн среде Invision. Средствами программного обеспечения Adobe Photoshop и After Effects были созданы анимированные визуализации динамических эффектов, применяемых на сайте, включая анимацию главного слайдера, эффекты наведения курсора на блоки, прокрутки экрана, появления всплывающих элементов (меню, интерактивные подсказки и т.

Рис. 4. Дизайн-концепция мобильной версии

Адаптивный веб-дизайн обеспечивает корректное отображение сайта на различных устройствах динамически подстраивающийся под заданные размеры окна браузера. Для удобного просмотра с различных устройств по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств [7,8].

Для адаптивных версий была продумана привязка к тактильным жестам (свайп для слайдера, питч для увеличения картинки и т.д.). Учтены вопросы эргономики, при проектировании были приняты во внимание так называемые «комфортные зоны» нажатия, что отразилось на расположении контрольных элементов управления мобильного интерфейса сайта (рис. 4).

Выводы

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

Список литературы:

1. Алипатов М.В., Орехов В.В., Зезюкина К.А. Графические аспекты дизайна сайта «Три склянки» // Наука и современность. — 2015. — № 37-1. -С. 43-48.

2. Волощенко В.Ю., Ли В.Г., Никипелов М.В. Дизайн сайта «Дизайн. Четверг». Графические аспекты // Наука и современность. — 2015. — № 37-1. -С. 58-64.

3. Маркотт И. Отзывчивый веб-дизайн. — М.: Манн, Иванов и Фербер, 2013. — 176 с.

4. Буковецкая О.А. Дизайн текста: шрифт, эффекты, цвет. — М.: ДМК Пресс, 2006. — 278 с.

5. Сидерхолм Д. CSS3 для веб-дизайнеров. — М.: Манн, Иванов и Фербер, 2013. — 125 с.

6. Кит Д. HTML5 для веб-дизайнеров. — М.: Манн, Иванов и Фербер. 2013. — 180 с.

7. Function Reference / bloginfo [Электронный ресурс]. — Режим доступа: http://codex.wordpress.org/.

8. Справочник HTML [Электронный ресурс]. — Режим доступа: http://htmlbook.ru.

«WE ARE ON THE SIDE OF THE PEACE»

СПЕЦИАЛЬНЫЙ ПРОЕКТ В КОНТЕКСТЕ ПОЛИКУЛЬТУРНОГО ОБРАЗОВАНИЯ ДИЗАЙНЕРОВ

© Барвенко В.И.1

Институт радиотехнических систем и управления Южного федерального университета, г. Таганрог

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

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

Миграционные процессы в последнее время приобрели вид переселения народов. Особенно очевидно, что приграничные области России, например, Юго-восток Украины, который граничит с Ростовской областью, где

1 Доцент кафедры Инженерной графики и компьютерного дизайна.

ДИЗАЙН WEB-ИНТЕРФЕЙСА

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

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

Задача ДИЗАЙНА WEB-ИНТЕРФЕЙСА – придание оптимального внешнего вида интерфейсу сайта согласно проработанного и утверждённого функционала.

Дизайн web-интерфейса – следующий этап разработки пользовательского интерфейса после проектирования.

ДИЗАЙН WEB-ИНТЕРФЕЙСА – разработка внешнего вида интерфейса: точная разметка сетки для страниц, выбор цветовой схемы, шрифтовых решений, оформления элементов управления и декоративных элементов сайта

На этапе дизайна web-интерфейса решаются следующие задачи:

• выстраивание модульной сетки для страниц сайта;

• точное позиционирование функциональных элементов сайта в привязке к модульной сетке;

• комплексное шрифтовое оформление макета сайта;

• разработка внешнего вида управляющих элементов сайта.

Итогом решения задач дизайна web-интерфейса являются графические файлы – финальные макеты экранов сайта.

Результатом работы по дизайну web-интерфейса является тестовый прототип (финальный макет интерфейса), отражающий точное расположение и оформление элементов на экранах

Финальный макет интерфейса может быть использован для реализации последующих этапов разработки:

• постановка задачи по разработке кода сайта – в процессе написания кода наглядный иллюстративный материал является весьма полезным подспорьем;

• обсуждение функционала с Заказчиком – удобнее проводить анализ функционала на иллюстративном материале, нежели «осваивать» многостраничные текстовые документы;

• тестирование юзабилити – при наличии интерактивного прототипа провести тестирование и устранить проблемы юзабилити.

Проект ИНФОРМДИЗАЙН постоянно работает над улучшением качества и расширением
спектра предоставляемых услуг. Мы постоянно отслеживаем самые современные мировые
тенденции в развитии информационного дизайна, используем в своей практике наиболее
передовые и эффективные приёмы подачи информации.

Проект ИНФОРМДИЗАЙН рад предложить Вам современный сервис по всему спектру
предоставляемых услуг в области информационного дизайна. Мы обеспечиваем высокие
стандарты качества выполнения работ и в каждом случае гарантируем профессиональный
результат для решения Вашей задачи.

Как выбрать шрифт для сайта

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

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

Как люди читают в интернете

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

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

Когда выбрал неподходящий шрифт

Разновидности шрифтов для сайта

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

1. Шрифты с засечками. Они облегчают чтение печатных изданий, визуально очерчивая строки. Но в веб-дизайне они скорее усложняют восприятие и рассеивают внимание читателя. Основное назначение таких шрифтов – использование в логотипах, выделение заголовков и важной информации на странице.
2. Рубленные. Шрифты нейтрального характера, без засечек. Подходят для заголовков, параграфов, основного текста.
3. Декоративные. Они выглядят оригинально, ярко. Такие шрифты отлично подойдут для молодежных сайтов и любой тематики, связанной с творчеством. Но применять их нужно очень осторожно: текст, написанный декоративным шрифтом, сложный для чтения. Чаще всего их используют для создания логотипов и выделения заголовков.

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

Какие шрифты актуальны в 2020-х

В оформлении сайтов дизайнеры используют шрифты, собранные в коллекции Google Fonts.

• Коллекция обширная и включает только качественные бесплатные шрифты.
• С ними не возникает проблем при верстке — легко подключить библиотеку и подтягивать из неё любой шрифт.
• Библиотека Google Fonts поддерживает разные виды сортировки содержимого.

В Google Fonts есть шрифты для латиницы, кириллицы, иероглифического письма, иврита и арабского. Находить нужные удобно при помощи фильтров, а отобрать топовые можно в один клик — выбрав сортировку по популярности.

Рейтинг самых популярных шрифтов Google Fonts начала 2020-х выглядит так:

1. Roboto. Легко читается даже в маленьком размере и прекрасно работает в паре с другими кириллическими шрифтами Google Fonts.

Roboto был взят за основу при разработке веб-студией «Бизнес Сайт» интернет-магазина «Мир клея».




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

В дизайне страниц сайта веб-студии Business Site мы используем Ubuntu — приятный, понятный, читабельный, стильный

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

Характер и настроение шрифта

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

• Юмористические зарисовки, оформленные гарнитурой Times, посчитало смешными на 10% больше читателей, чем при оформлении Arial.
• Текст, напечатанный Baskerville, по сравнению с этим же самым, напечатанным Comic Sans, признали более убедительными

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

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

Если в этой паре соединить противоречащие друг другу гарнитуры, внимание читателя сосредоточится на самих шрифтах, а не на содержании страницы. Например, если заголовок выполнен в Franklin Gothic (элегантный, солидный, мужественный стиль), а основной текст в Souvenir (легкомысленный, игривый), в результате получится противоречивое сочетание, которое мешает гармоничному восприятию статьи. А если заменить шрифт заголовка на Futura Bold, картина полностью изменится: эти два шрифта дополнят друг друга благодаря схожести элементов и не создают ненужного напряжения.

Ищем правильные сочетания шрифтов для сайта

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

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

Задача дизайнера — проработать все эти факторы, выдерживая дресс-код тематики сайта.

Секреты правильного подбора шрифтов для сайта от дизайнеров

• Не использовать больше 3 шрифтов для оформления сайта. Большее количество будет отвлекать внимание посетителей. К тому же, на подгрузку шрифтов нужно больше времени, а даже доли секунды замедления скорости загрузки страницы отрицательно сказываются на эффективности поискового продвижения и лояльности пользователей.
• Следите за читабельностью. Когда текст не читается, всё остальное — не важно, просто меняйте шрифт.. Чтобы пользователь не покинул страницу в первые же секунды после перехода, важно убедиться, что текстовый контент легко читается и выбраны правильные параметры: цветовое сочетание, размер, начертание и пр.
• Используйте типографику логично. Для этого применяются разные гарнитуры или один и тот же шрифт, но с разными параметрами насыщенности, размера, начертания. Но так, чтобы в выборе была логика —- заголовки не были мельче подзаголовков, а основной текст не сливался с подложкой. Это помогает посетителю сориентироваться на странице.
• Следите за сочетанием шрифтовых пар и меняйте при возникновении малейших сомнений. Классические варианты: шрифт с засечками + рубленый, сочетание шрифтов разного класса, контрастная насыщенность шрифта в заголовке и в основном тексте, сочетание шрифтов различной тональности, яркое + нейтральное. Оценить гармоничность типографики можно приемом «бокового зрения»: направить взгляд левее или правее текста, чтобы воспринимать картинку в целом, не читая текст.

Полезные инструменты в работе со шрифтами

Подберите удачные сочетания шрифтов для сайта при помощи онлайн-сервисов:

• Google Type: большое количество шрифтовых пар, подобранных дизайнерами.
• Type Genius: вводите основной шрифт и получайте подходящую пару.
• Font Combinator , простой в использовании сервис, позволяет выбирать и гарнитуру и тип шрифта для заголовков и основного текста среди гармонирующих между собой вариантов.
• Font Pair: подбирайте шрифтовую пару по выбранным в фильтре характеристикам и скачивайте их на свой компьютер.
• The Art of Mixing Typefaces – таблица-шпаргалка по сочетаемости шрифтов для веб-дизайнеров.

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

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

Как выбрать правильный шрифт для своего веб-сайта

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

Некоторые из самых известных шрифтов с засечками включают Times New Roman и Georgia. Шрифт Times New Roman, в частности, подпадает под категорию классических веб-шрифтов . В целом, вы не ошибетесь, выбрав типы шрифтов по умолчанию, такие как этот, поскольку они обычно легко читаются и существуют уже давно, поэтому многие пользователи Интернета привыкли к ним.Тем не менее, если вы предпочитаете более смелый подход, мы рекомендуем попробовать такие шрифты, как Noe Display, Freight Text или Коллекция Portrait. Конечно, всегда есть шрифты с засечками Google, которые вы можете использовать бесплатно, например Playfair Display, Cormorant Garamond или Crimson Text и многие другие.

Шрифты Sans не имеют засечек на буквах (слово «sans» по-французски означает «без»), и они известны своим современным и чистым дизайном по сравнению с их аналогами с засечками.Helvetica, Tahoma, Verdana, Futura и Arial — все это примеры широко используемых шрифтов без засечек. Что касается бесплатных шрифтов, мы предлагаем попробовать следующие для бесплатной библиотеки шрифтов Google Fonts: Roboto, Source Sans Pro, Poppins, Heebo или Montserrat.

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

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

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

При выравнивании текста следует также обратить внимание на Длина строки (расстояние между левой и правой стороной текстового блока). Самый эффективный способ измерения длины строки — среднее количество символов в строке. Оптимальная длина строки от 45 до 80 символов , включая пробелы.

7 Идеальное сочетание шрифтов для вашего веб-сайта электронной торговли

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

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

Сочетание двух разных шрифтов может помочь вам достичь поставленной цели и увеличить число читателей.

Давайте узнаем больше о сочетании шрифтов и о том, как оно работает.

Что такое пара шрифтов?

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

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

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

Почему шрифт вашего сайта так важен?

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

Согласно недавнему исследованию, онлайн-пользователи читают только 26% слов на странице. Этот процент может варьироваться в зависимости от стиля шрифта, который вы используете, и от того, насколько интересным является ваш контент. Большинство пользователей проводят на вашей веб-странице около 15 секунд; это означает, что ваше «каждое слово должно быть заметно».

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

Психология шрифта

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

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

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

Выбор правильных шрифтов

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

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

Почему следует использовать комбинации шрифтов?

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

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

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

7 Идеальное сочетание шрифтов для электронной коммерции

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

Montserrat Bold и Roboto Regular

Здесь мы создали font-weight, чтобы создать больший контраст между двумя шрифтами без засечек, поскольку они не могут быть одинаковыми.Montserrat Bold — довольно тяжелый шрифт, чем Roboto Regular. Он отлично работает с зажигалкой Roboto Regular. Этот стиль шрифта можно использовать для магазинов электронной коммерции, таких как электроника или промышленные детали.

Crimson Text Regular с Source Sans Pro Regular

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

Oswald Medium и Roboto Bold

Oswald Medium можно использовать для создания сильного шрифта заголовка, поскольку он передает качество жирным шрифтом и четкими линиями. Вы можете комбинировать этот стиль шрифта с Roboto Bold. Google создал его как системный шрифт для своей мобильной операционной системы Android.

Подходит для бизнеса, фитнеса и высоких технологий.

Raleway и Roboto Slab

Шрифт

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

Эта пара — отличный выбор для чистой типографики.

Оверлок и Nunito

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

Это сочетание шрифтов подходит для сайтов, продающих одежду.

Playfair Display and Source Sans Pro

Дисплей

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

Raleway Bold и исходный код Pro Regular

Пара шрифтов, состоящая из идеального цвета, классификации, размера и веса, а также обычного исходного кода Pro. Невероятная комбинация Raleway Bold и Source Code Pro Regular лучше всего подходит для онлайн-магазинов по продаже мужской одежды.

Советы по выбору правильного дизайна шрифта

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

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

Заключение

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

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

Лучшие шрифты для веб-сайтов и как их выбрать

Последний раз эта публикация обновлялась 17 июня 2020 г.

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

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

В этом руководстве мы обсудим десять лучших шрифтов Google, а также советы по выбору лучших шрифтов для вашего веб-сайта:

10 лучших шрифтов Google для веб-сайтов

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

Lato

Дизайн: Łukasz Dziedzic

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

Forum

Дизайн: Денис Машаров

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

Barlow

Разработано: Jeremy Tribby

Шрифт Barlow без засечек чистый и малоконтрастный, что делает его легко читаемым. Дизайн шрифта был вдохновлен номерными знаками Калифорнии и дорожными знаками.

Caudex

Разработано: Nidud

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

Poppins

Разработано: Indian Type Foundry

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

Questrial

Разработано: Joe Prince

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

Rozha One

Разработано: The Indian Type Foundry

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

Libre Baskerville

Разработано: Пабло Импаллари и Родриго Фуэнзалида

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

Montserrat

Разработано: Julieta Ulanovsky

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

Cormorant Garamond

Дизайн: Christian Thalmann

Этот шрифт с засечками, основанный на шрифтах 16 века, привносит элегантный традиционный вид в веб-дизайн.

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

Как выбрать лучшие шрифты для вашего веб-сайта

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

01. Убедитесь, что ваши шрифты соответствуют тональности вашего бренда.

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

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

02. Оцените шрифты по важности

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

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

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

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

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

Чтобы помочь вам смешивать и сочетать гарнитуры для вашего веб-сайта, вот любимые пары шрифтов наших дизайнеров:

03. Изучите основы классификации шрифтов

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

• Шрифты с засечками: Засечки — это небольшая линия в конце штриха буквы или символа.Шрифты с засечками считаются классическими и элегантными и в основном ассоциируются с печатью. Примеры включают Times New Roman, Georgia и Bodoni.

• Шрифты без засечек: Это шрифты без линий с засечками в конце букв. Гротески чистые, современные и часто нейтральные, что делает их идеальным выбором для веб-дизайна. Примеры включают собственный шрифт Wix Madefor, Helvetica и печально известный Comic Sans.

• Шрифты скриптов: Скрипты, включая курсивные шрифты, моделируются на основе стилей рукописного ввода.Лучше всего ограничить этот стиль только заголовками, поскольку написание основного текста сценарием, скорее всего, станет проблемой для вашей аудитории. Примеры включают рукописный ввод Lobster и Lucida.

04. Применение тем оформления текста

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

Заголовки: 30-70px

Субтитры: 22-30px

Абзац: 16-20px

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

Эта практика не только упрощает процесс проектирования, но также улучшает пользовательский опыт вашего веб-сайта и повышает эффективность вашего SEO.

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

Блейк Стимак

Менеджер сообщества и социальных сетей

Эден Спивак

Эксперт по дизайну и писатель

Измените макет, тему, цвета или шрифты вашего сайта

Сопряжение шрифтов: как выбрать сочетания шрифтов + 30 примеров

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

1.Разборчивость

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

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

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

2. Читаемость

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

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

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

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

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

3. Комфортность

Есть некоторые веб-дизайнеры, которые не хотят использовать такие шрифты, как Helvetica или Times New Roman, из-за их чрезмерного использования. Однако выбор и сочетание шрифтов не о том, как вы относитесь к типографике вашего веб-сайта, а о том, насколько удобно вашим посетителям читать его.

Итак, нет ничего постыдного в выборе классики, если она выполняет свою работу.

4. Стиль

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

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

Не упускайте из виду эти правила, переходя к следующему этапу проектирования с помощью типографики:

Цветовые палитры и шрифты в SharePoint

Лучшие сочетания шрифтов Google и цветовые палитры для женского веб-сайта

Ресурсы для дизайна

Цвета и шрифты… Какой вызов!

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

Нравится…

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

Итак…

Вам может быть интересно:

Как выбрать идеальную комбинацию шрифтов и правильную цветовую палитру для нее?

Как сочетать цвета?

Это хороший, твердый шрифт?

Будут ли эти шрифты и цвета действительно представлять мой бренд?

Понятно.Это сбивает с толку и подавляет.

Так что же вы делаете?

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

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

В этом посте вы найдете 18 сочетаний шрифтов и цветов для женских веб-сайтов, которым можно доверять

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

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

Есть несколько способов создать веб-сайт в «женском» стиле

«Женственный» может означать нежный, элегантный, романтичный, но в то же время яркий, сильный и мощный.

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

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

Как использовать Google Fonts и цветовую палитру на своем веб-сайте

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

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

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

→ Если вы не используете одну из наших тем, вот что нужно сделать, чтобы использовать выбранные вами шрифты:

Шаг 1 : Вставьте шрифты на свой веб-сайт, добавив код внедрения в качестве первого элемента в вашего HTML-документа.

Шаг 2 : Объявите шрифты, которые будут использоваться для текста и заголовков в вашем файле styles.css.

Вы найдете код встраивания и код CSS под каждой комбинацией, так что вы можете скопировать и вставить их в свои файлы.

Вот они:

1. Карла + Мартель

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

Это сочетание, которое вам нужно, если вы ищете чистый, легкий и дружелюбный стиль.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Martel', serif;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Karla', без засечек;
    font-weight: 700;
}

.кнопка {
    семейство шрифтов: 'Karla', без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 2B394A # FDA5A4 # C5D0DD

2. Барлоу + Раса

Этот шикарный и яркий. С монохромной цветовой палитрой и сочетанием современного и традиционного контрастного шрифта.

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

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

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Rasa', serif;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Barlow Condensed', без засечек;
    font-weight: 400;
    преобразование текста: прописные буквы;
}

.кнопка {
    семейство шрифтов: 'Barlow', без засечек;
    font-weight: 600;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 000000 # ffffff # D9E3DA # A7BEA9

3. Raleway

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

* Посмотрите эту комбинацию в действии на этом сайте Artisan для женщины-предпринимателя от Artisan Themes: Coach .

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Raleway', без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Raleway', без засечек;
    font-weight: 700;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 2 пикселя;
}

.кнопка {
    семейство шрифтов: 'Raleway', без засечек;
    font-weight: 700;
    размер шрифта: 12 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 000000 # FC888C # 75858F

Бонус: Загрузите руководство по семи способам создания профессионального веб-сайта и убедитесь, что ваш веб-сайт делает ваш бизнес привлекательным!

4.Дисплей Playfair + Gothic A1

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

Красивый шрифт Playfair Display, написанный заглавными буквами, вместе с черным и розовым оттенками, творит все волшебство.

Используйте его для веб-сайта журнала о стиле жизни или для модного современного бизнеса. Вашей аудитории это понравится.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Gothic A1', без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Playfair Display', serif;
    font-weight: 400;
    преобразование текста: прописные буквы;
}

.кнопка {
    семейство шрифтов: 'Gothic A1', без засечек;
    font-weight: 600;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# F3DCD4 # F2A68D # 000000

5. Work Sans + Merriweather

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

Подходит для солидного, напористого и уверенного бизнеса или блога.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Merriweather', serif;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 800;
}

.кнопка {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 700;
    размер шрифта: 15 пикселей;
    межбуквенный интервал: 1 пиксель;
} 

Цветовые коды

# 000000 # 20C1BD # 3D3D3D

6.Ультра + Work Sans

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

Шрифт Ultra и эти яркие цвета сделают ваш сайт ярким и ярким, а Work Sans сбалансирует все это и сделает ваш сайт ясным и эстетичным.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Ultra', serif;
    font-weight: 400;
}

.кнопка {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 500;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# DF0054 # FFD900 # ffffff

7. Баклан Гарамонд + Хула

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

Придаст вашему сайту изысканный и элегантный вид.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: "Хула", без засечек;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Cormorant Garamond', serif;
    font-weight: 400;
}

.кнопка {
    семейство шрифтов: 'Cormorant Garamond', serif;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 9B9A94 # E0CBC4 # EBE4DE # 131310

8.Playfair Display + Монтсеррат

Два моих любимых шрифта Google вместе, какое удовольствие!

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

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Playfair Display', serif;
    font-weight: 400;
    стиль шрифта: курсив;
}

.кнопка {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 000000 # d2ae90 # 403F47

9. Satisfy + Halant + Montserrat

Теперь о дружественной комбинации.

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

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

Это сочетание радостное и сладкое. Кроме того, он использует Halant для тела и Montserrat для кнопок, чтобы уравновесить уникальное присутствие Satisfy.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: Halant, serif;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: «Удовлетворительно», курсив;
    font-weight: 400;
}

.кнопка {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# DD7564 # 1FA5A6 # B2DEDD # F0EDE6

10. Монтсеррат + Josefin Sans

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

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

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: Josefin Sans, без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 700;
    преобразование текста: прописные буквы;
}

.кнопка {
    семейство шрифтов: Josefin Sans, без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 4F6C6B # 1E292B # F7DDD9 # EDEDED

11. Libre Baskerville + Work Sans

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

Тогда Work Sans пригодится для кнопок. А цветовая палитра придает завершающий штрих классическому и уверенному виду.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Libre Baskerville', serif;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Libre Baskerville', serif;
    font-weight: 700;
}

.кнопка {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 323954 # EA5147 # FEFFFA

12. Танцевальный сценарий + Open Sans

Вот еще одна комбинация с использованием скриптового шрифта. В данном случае: Dancing Script, обычный шрифт с изящными изгибами. Open Sans отлично его дополняет.

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

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

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: «Open Sans», без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: «Танцевальный сценарий», курсив;
    font-weight: 700;
}

.кнопка {
    семейство шрифтов: «Open Sans», без засечек;
    font-weight: 400;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 6B5875 # FFE6A9 # EAE6E1 # 6B686D

13. Karla + Zilla Slab

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

Совместите это с плавными изгибами Zilla Slab, мягкой цветовой палитрой, и вы получите тот изысканный стиль, который вам нужен.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Zilla Slab', serif;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Karla', без засечек;
    font-weight: 400;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 2 пикселя;
}

.кнопка {
    семейство шрифтов: 'Karla', без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 5F6368 # 989BA4 # F2D4D1 # F9F0E7

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

14. Тавирадж + ​​Лато

цветов земли и закругленный шрифт с широкими засечками? Будьте готовы к теплому гармоничному сайту.

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

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Lato', без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Taviraj', serif;
    font-weight: 400;
}

.кнопка {
    семейство шрифтов: 'Lato', без засечек;
    font-weight: 700;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# A5AA93 # F0E5D3 # F3D0B5 # 6A6A6A

15. Баклан SC + Баклан Гарамонд

Бонус: Загрузите руководство по семи способам создания профессионального веб-сайта и убедитесь, что ваш веб-сайт делает ваш бизнес привлекательным!

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

Он использует семейство бакланов в его различных вариантах и ​​чистую и приглушенную цветовую палитру.

* Проверьте эту комбинацию шрифтов в действии на этом сайте Artisan для свадебного сайта.

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Cormorant Garamond', serif;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Cormorant SC', serif;
    font-weight: 300;
}

.кнопка {
    семейство шрифтов: 'Cormorant SC', serif;
    font-weight: 500;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 1 пиксель;
} 

Цветовые коды

# 99ABB9 # B0B0B0 # 60686E # DAE0E6

16. Josefin Sans + Montserrat

Мне нравится эта комбинация. Он свежий, молодой и яркий.

Мы уже объединили Josefin Sans и Montserrat, помните? Но на этот раз, чередуя их роли, используя разные веса и добавляя разные цвета, мы получаем совершенно другой вид.

* Вы можете увидеть этой комбинации шрифтов в действии на этом сайте Artisan от Artisan Themes: Lifestyle .

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: Josefin Sans, без засечек;
    font-weight: 100;
}

.кнопка {
    семейство шрифтов: 'Montserrat', без засечек;
    font-weight: 500;
    размер шрифта: 13 пикселей;
    преобразование текста: прописные буквы;
    межбуквенный интервал: 3 пикселя;
} 

Цветовые коды

# 000000 # 8DE0C6 # FFF8BE

17. Poppins + Work Sans

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

* Посмотрите на эту комбинацию в действии на сайте Artisan Site от Artisan Themes: Deco .

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: "Work Sans", без засечек;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Poppins', без засечек;
    font-weight: 100;
}

.кнопка {
    семейство шрифтов: 'Poppins', без засечек;
    font-weight: 400;
    размер шрифта: 15 пикселей;
    межбуквенный интервал: 1 пиксель;
} 

Цветовые коды

# D5D0CC # F9F4F0 # FFFFFF # 000000

18.Archivo + PT Serif

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

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

* Посмотрите на цветовую палитру в действии на этом сайте Artisan от Artisan Themes: Foodie .

Шрифты

Код для вставки:

Код CSS:

 body {
    семейство шрифтов: 'PT Serif', serif;
    font-weight: 400;
}

h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: 'Archivo', без засечек;
    font-weight: 700;
}

.кнопка {
    семейство шрифтов: 'Archivo', без засечек;
    font-weight: 700;
    размер шрифта: 15 пикселей;
    межбуквенный интервал: 1 пиксель;
} 

Цветовые коды

# FF988D # E2F2D5 # FD2B81

Нашли тот, который вам нравится?

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