Шрифт опен санс какие компании используют
Перейти к содержимому

Шрифт опен санс какие компании используют

  • автор:

Нужно ли загружать на сайт шрифты open-sans, sans-serif?

будет выглядеть так font-family: open-sans, sans-serif; Эти шрифты предустановлены в ОС, так что нужно ли их всё равно грузить через @font-face?

Отслеживать
задан 23 янв 2018 в 12:21
1,698 2 2 золотых знака 20 20 серебряных знаков 59 59 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Не только этот, но и любой другой @font-face надо описывать так, чтобы он в начале искал шрифт в самой системе. Гугл-шрифты так и делают, кстати:

@font-face < font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; >

А Open Sans, кстати, предустановлен не в любой ОС, потому да, его необходимо описывать в @font-face .

Отслеживать
ответ дан 23 янв 2018 в 12:27
Sasha Omelchenko Sasha Omelchenko
12.8k 4 4 золотых знака 32 32 серебряных знака 62 62 бронзовых знака
а как же sans-serif, его тоже через @font-face?
23 янв 2018 в 12:31

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

WordPress.com перешёл на свободный шрифт Open Sans

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

Всего голосов 60: ↑28 и ↓32 -4
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
По моему стало «легче». Читабильность повысилась.
Всего голосов 49: ↑35 и ↓14 +21
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
А по мне так эта «воздушность» слишком «воздушна». Предыдущий вариант более скомпонованее, ИМХО.
Всего голосов 24: ↑12 и ↓12 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

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

Всего голосов 15: ↑9 и ↓6 +3
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Не буду минусовать субъективное мнение (да и нет возможности).
Всего голосов 6: ↑4 и ↓2 +2
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Да, текст стал более разреженным, но это дело привычки.
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
К тому же судя по картинке bold 300 жирнее bold 400
Всего голосов 1: ↑1 и ↓0 +1
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Да там не bold, там Book 300 жирнее.
Всего голосов 1: ↑1 и ↓0 +1
Ответить Добавить в закладки Ещё
Ещё кто-то вздумал диктовать пользователю какие шрифты он должен видеть
Всего голосов 19: ↑3 и ↓16 -13
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
То есть до этого вам не навязывали Arial/Helvetica?
Всего голосов 14: ↑14 и ↓0 +14
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Надо учить людей использовать те шрифты, которые им самим нравятся
Всего голосов 14: ↑2 и ↓12 -10
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

Да, и сделать расширение для браузеров, которое добавляет на страницы котяток, gifки и раскрашивает всё в розовый цвет.

Всего голосов 15: ↑14 и ↓1 +13
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий

Надо учить людей

Всего голосов 7: ↑7 и ↓0 +7
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

Замечательная идея! Только не удивляйтесь, если в половине случаев пользовати будут ставить себе Comic Sans 🙂

Всего голосов 2: ↑2 и ↓0 +2
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

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

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

Всего голосов 1: ↑1 и ↓0 +1
Ответить Добавить в закладки Ещё

Кириллица в нём страдает, „ЖКЮ“ ужасны:

Всего голосов 19: ↑14 и ↓5 +9
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Чем именно они ужасны?
Всего голосов 9: ↑6 и ↓3 +3
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

А чем могут быть ужасны буквы? Видом своим и нарушенными правилами 🙂

У Ю очень длинная перекладина, у Ж и К типичная ошибка западных дизайнеров, которые не знают, как эти буквы должны выглядеть в кириллице. Наша К отличается от латинской K.

Всего голосов 14: ↑13 и ↓1 +12
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Спасибо, именно это и интересовало.
Всего голосов 2: ↑2 и ↓0 +2
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий
Ну чем они обычно и грешат 🙂 Хотя попадались и попадаются такие и «местные» русификации.
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Ужасно…
Я смотрю, не заморачивались вообще в этом шрифте)
Всего голосов 2: ↑2 и ↓0 +2
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Спасибо, как раз хотел спросить, что думает народ о кириллице в нем…
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё

На мой вкус, в заголовке «About Us» лучше смотрится Helvetica/Arial, чем Open Sans. Я бы оба этих шрифта использовал.

Всего голосов 9: ↑8 и ↓1 +7
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Заголовок «About Us» не был набран при помощи Helvetica/Arial, они оба рубленые, а там антиква.
Всего голосов 2: ↑1 и ↓1 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Точно, заголовок в первом варианте с засечками. Но во втором варианте уже всё набрано open sans`ом.
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё

Вообщем лучше, но некоторые символы на новом скрине — хуже. Особенно бросается в глаза уродливая большая «О» в «Open source . ». К слову, на моем мониторе все гораздо лучше.

Всего голосов 2: ↑2 и ↓0 +2
Ответить Добавить в закладки Ещё
обожаю этот шрифт.
Всего голосов 9: ↑6 и ↓3 +3
Ответить Добавить в закладки Ещё

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

Всего голосов 6: ↑5 и ↓1 +4
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

Картинка тут: s16.postimg.org/da6tf46ed/opensans.png
Особо ужасны «p» и «k».
Verdana и Tahoma куда приятнее и ЧЁТЧЕ отрисовываются.

Всего голосов 3: ↑3 и ↓0 +3
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Не сглаживать шрифты в наше время — кощунство
Всего голосов 22: ↑21 и ↓1 +20
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий

Почему? На мобилах-планшетах это уже бессмысленно с их dpi > 400. Хочется красивую, но чёткую картинку (на бумаге граница очень чёткая, в чём можно убедиться, взяв в руки увеличительное стекло). А размазанная картинка [моему глазу] мешает закрепиться/сфокусироваться (а субпиксельное вообще превращается в розово-голубой ад, в т.ч. и у некоторых моих знакомых).

Всего голосов 3: ↑2 и ↓1 +1
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
А там и нет сглаживания. А вот на экране компьютера стоит.
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
там это где? 🙂
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий

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

Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
Показать предыдущий комментарий
Открою секрет, на винде есть тонкая настройка субпиксельного сглаживания.
Всего голосов 1: ↑0 и ↓1 -1
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий

А чем достигается отсутствие цветастости на хороших мониторах? Там субпиксели более ровной формы или как?

Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий
С каких ценников начинаются годные TN, IPS,… мониторы?
Комментарий пока не оценивали 0
Ответить Добавить в закладки Ещё
НЛО прилетело и опубликовало эту надпись здесь
Показать предыдущий комментарий

Работал тут на LG IPS 234v за $200. Крутил-вертел настройки сглаживания Win7, так и не смог окончательно избавиться от желтой вертикальной окантовки. Безысходность?

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

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

який шрифт обрати для інтернет-магазину?

Читайте также: Методы UX-исследований: что это такое, преимущества и недостатки

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

Роль шрифтов в онлайне

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

  • читабельность
  • разборчивый с любого устройства
  • использовать не более 2-3 сочетаемых шрифтов.

Лучшие шрифты для Ecommerce сайтов

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

Roboto

Ecommerce сайти дизайн

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

Шрифт сочетается с Roboto Slab, Lato, Poppins, Playfair Display, Dosis, Open Sans.

Lato

дизайн Ecommerce сайту

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

Сочетается с другими шрифтами, такими как Playfair Display, Open Sans, Roboto та Montserrat.

Montserrat

дизайн сайту електронної комерції

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

Шрифт хорошо сочетается с Roboto, Open Sans, Lato.

Oswald

дизайн сайтів Ecommerce

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

Хорошо сочетается с Roboto, Merriweather, Open Sans, Quicksand.

Merriweather

шрифти для сайтів

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

Хорошо сочетается с Lora, Oswald, Roboto, Open Sans.

Playfair Display

де знайти шрифти для сайту?

Шрифт с засечками является популярным вариантом для названий и заголовков, также рекомендуется для короткого содержимого. Microsoft часто использует его. Playfair Display красивый, выглядит эстетично. Этот шрифт хорошо сочетается с сайтами ecommerce, которые сосредоточены на женской аудитории из-за его нежности, легкости. Playfair Display SC — универсальная версия этого шрифта, имеющая полукурсив. Также есть версия со строчными буквами.

Хорошо сочетается с Roboto, Lato, Montserrat, Open Sans, Oswald або Arvo.

Open Sans

де знайти шрифти для сайтів?

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

Open Sans сочетается с Roboto, Lato, Montserrat.

Poppins

шрифти для оформлення сайтів

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

Сочетается с Lora, Playfair Display, Raleway, Open Sans.

Подпишись на горячие
Маркетинг-новости

Подпишись на ежемесячный
Дайджест новостей

Raleway

шрифти для інтернет-магазинів

Популярный шрифт для веб-сайтов электронной коммерции. Его основные преимущества — уникальность, стильный вид и отличная читабельность. Это шрифт без засечек. Raleway имеет современный и элегантный дизайн, исполненный в минималистическом стиле. Универсальный шрифт хорошо работает в разных контекстах дизайна, от заголовков до основного текста. Raleway имеет 18 стилей шрифта (обычный, светлый, полужирный, жирный и экстражирный, а также светлый, тонкий, средний и т.п.). Хорошо сочетается с Cinzel, Roboto, Merriweather, Open Sans, Bitter.

Berkshire swash

як оформити інтернет-магазин веб дизайн

Изящный «женский» шрифт, который хорошо подходит для компаний, ориентированных на женскую аудиторию. К примеру, интернет-магазины с косметикой, ювелирными изделиями и украшениями, сладостями. Стиль Berkshire помогает создать эмоциональную связь с клиентами и повысить лояльность бренду, что делает его мощным инструментом для компаний. Женский оттенок шрифта придает ощущение тепла, при этом передает чувство уверенности и силы. Berkshire swash хорошо сочетается с Raleway, Oswald, Open Sans.

Cinzel

веб дизайн для екомерс

Шрифт с классическими пропорциями и учетом римских писаний I века. При этом сохраняет современный вид благодаря тонким линиям. Рекомендуем выбирать Cinzel для заголовков. К Cinzel подойдет также с Raleway, це Playfair Display, Poppins.

Alegreya

веб-дизайн для ecommerce

Динамический шрифт, создающий приятное чувство во время чтения. Alegreya берет начало в каллиграфии, поэтому считается эстетически привлекательным. Стиль Alegreya подходит как для заголовков, так и для основного текста. При том, что он кажется простым, чаще шрифт используют дизайнеры для разработки сайтов с ювелирными украшениями, нижнего белья для предоставления «роскоши». Alegreya хорошо сочетается с Lato, Source Sans Pro, Open Sans, Roboto Slab.

Читайте также: Лучшие функции Google Ads для e-commerce

Bitter

шрифти для веб-дизайну

Шрифт разработан с учетом удобства чтения на разных устройствах, что делает его идеальным вариантом для всех видов электронной коммерции. Хорошо сочетается с Raleway, Roboto, Open Sans, Source Sans Pro.

Amatic SC

шрифті для Ecommerce

Выбор для смелых. Шрифт выделяется рукописным (скриптовым) видом, потому отличается от многих других. Это создает свежее и бодрое ощущение, при этом оставляет послевкусие творческого и свободного полета. Amatic SC — это один из лучших шрифтов электронной коммерции для продажи веселого, беззаботного и живого искусства. Он легок, поэтому обычно сопровождается яркими цветами. Хорошие пары шрифтов для Amatic SC — Roboto condensed, Josefin Sans тощо.

Где скачать шрифты для Ecommerce?

  • Google front
  • FontSpace
  • 1001 Free Fonts
  • Font Squirrel
  • FontStruct
  • Urban Fonts
  • Abstract Fonts
  • Creative Market

як вибрати шрифт для інтернет-магазину?

Читайте также: 15 идей для фотографии товара, которые помогут увеличить продажи в интернет-магазине

Резюме

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

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

Семейство шрифтов Open Sans

Наверно один из самых распространенных шрифтов в интернете, разработанный дизайнером Стивом Метисоном.

Существует 13 вариантов шрифта с различными параметрами.

Прежде всего это 5 версий для обычного начертания:

  • 300 Light — OpenSans-Light.ttf
  • 400 Normal — OpenSans-Regular.ttf
  • Semi-Bold 600 — OpenSans-Semibold.ttf
  • Bold 700 — OpenSans-Bold.ttf
  • Extra Bold 800 — OpenSans-ExtraBold.ttf

Далее существуют те же 5 версий для курсива:

  • 300 Light — OpenSans-LightItalic.ttf
  • 400 Normal — OpenSans-Italic.ttf
  • Semi-Bold 600 — OpenSans-SemiboldItalic.ttf
  • Bold 700 — OpenSans-BoldItalic.ttf
  • Extra Bold 800 — OpenSans-ExtraBoldItalic.ttf

И помимо всего этого 3 шрифта Open Sans Condensed:

  • 300 Light — OpenSans-CondLight.ttf
  • 300 Light — OpenSans-CondLightItalic.ttf
  • Bold 700 — OpenSans-CondBold.ttf

Эта гарнитура существует с 2010 года, находится под лицензией Apache License 2.0.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *