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

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

Неудачно выбранные или некрасивые шрифты делают мир уродливым. Подобранные же с умом и вкусом - являются уважением ко всем, кто увидит вашу работу.

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

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


Вот эти сайты: Typewolf и Awwwards.

Ну или вот такие пробники несомненно пробудят в вас чувство прекрасного...



Ну что, согласны, что шрифт может сообщить многое? Передать настроение, тон, выражение описываемого в тексте?

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



Смоленск, бывший Заднепровский универмаг, Колхозная площадь, скриншот из Google Maps.

Если вас испугало то, что вы сейчас увидели, то самое время перейти к рекомендуемому материалу.

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

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

Скачайте (через Скачать шрифт - Скачать оригинал) и установите на компьютер такие шрифты, как Lato, Raleway, PT Sans, Anglecia, Cormorant, Forum, а затем смело используйте в своих проектах. Вы сами заметите, как меняя гарнитуру (гарнитура - это синоним шрифта) вы можете подчёркивать и выделять различные смысловые части в тексте. Вы же пользуетесь жирным и наклонным начертанием шрифта, чтобы что-нибудь выделить? А можно менять и сам шрифт!

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

Уверен, что вы последуете советам, данным в этих материалах и качество ваших работ преобразится. Да и в целом, в хороших местах ценят людей, разбирающихся в типографике. Это я вам точно говорю.
Читать далее
Хотя Google обещал запустить их 9 ноября, я обнаружил работающими их только сегодня. Функционально сайты не поменялись, сменив наконец внешний вид на более современный. Но вот их возможности, похоже, сильно урезаны. И это не радует.
Чтобы воспользоваться новой версией сайтов, нажмите на ссылку:
Читать далее
Хорошие веб-девелоперы борятся за высокую скорость загрузки сайтов. И если минификация и оптимизация стилей, скриптов и html-кода знакома всем, то оптимизация шрифтов - дело менее известное. Я расскажу о том, какими способами это можно осуществить.


Делаем шрифт компактным

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

CSS-свойство unicode-range

Наиболее современный, уместный и простой способ сделать загрузку шрифтов экономичной. Браузер действительно выбирает из файла только нужную часть и тем экономит ресурсы. Это свойство, прописываемое в медиазапросе @font-face поддерживается уже всеми браузерами практически без проблем. При этом для разных селекторов можно задавать свои наборы символов, что позволяет нам прикреплять к ресурсам тяжёлые шрифты, не внося в них никаких изменений. Интервалы для современной русской кириллицы (без редких символов) задаются следующим набором:
unicode-range: U+0400-04FF;
Между тем, порой шрифты требуют модификации.

Настройка на WebFont

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

Мы попадаем в интерфейс настройки и вольны выбрать как целые диапазоны (это лишнее), так и конкретно по буквам.
Я использую кастомный набор символов, поскольку не все из них есть в предлагаемых диапазонах. Внимание следует обратить на знаки валют, кавычки-«ёлочки» и другие востребованные спецсимволы.
0123456789
!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~¢
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдежзийклмнопрстуфхцчшщъыьэюяё
–£¥©«®´»—‘’“”•…€₽™
Скачиваем, и наш оптимизированный шрифт готов.

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

Но что делать, если мы получили платный шрифт и хотим (если позволяет лицензия и совесть) его облегчить? В дело вступает редактор шрифтов. Я использую FontForge, поскольку, в отличие от онлайн-сервисов, он позволяет производить более глубокие манипуляции, в частности - объединение.

Облегчение шрифтов в FontForge

Установка на Ubuntu тривиальна: sudo apt install fontforge.

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


Чтобы скрыть места под пустующие глифы, выбираем Encoding -> Compact.
Теперь мы видим, что у нас есть, и сразу понимаем, что хотим удалить. Удаляются глифы выделением ЛКМ и выбором команды контекстного меню Clear.

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

Создание иконочного шрифта

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

Объединение

Наконец, самая интересная часть. А что, если нам надо ровно три иконки? Не подключать же ради этого отдельный шрифт в три символа? А если наш посетитель сидит на спутниковом интернете с полусекундными пингами? Можно сделать inline-font, то есть сконвертировать в base64 и вставить прямо в CSS-файл. А можно шрифты и объединить.
Для этого в FontForge надо выбрать Element -> Merge Fonts. Иконочные шрифты, как правило, занимают неиспользумые глифы, поэтому конфликтов с заменами возникнуть не должно.

Проблемы

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

Юникод и глифы

Вообще, ставить глифы иконочных шрифтов на пустые или экзотические места не так уж продуктивно. Если шрифт по каким-то причинам не загрузится или отключён в браузере, как мы обеспечим обратную совместимость? Я решаю этот вопрос переносом иконок на места наиболее похожих символов в Юникоде. Данные о Юникод-символах я беру из Unicode Table, разумеется. Чтобы не мучиться с переносом иконок в FontForge, уже в IcoMoon можно (и нужно!) задавать для иконки соответствующий глиф. Например, для знака ВКонтакте я использую эмодзи "Морда собаки" 🐶, для остальных можно придумать другие изобретательные варианты.


Знак рубля

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

В FontForge мы, во-первых, копируем заглавную "Р". Находим клетку U+20bd, вставляем туда глиф. Два раза щёлкаем и открываем редактор.
В панели инструментов выбираем инструмент и добавляем четыре точки. Потом добавляем ещё по одной, вытягиваем углы в стороны, и ещё две, чтобы довести силуэты до прямоугольников. Далее, меняем инструмент на обычный указатель, выделяем соответствующие пары точек и перемещаем их клавишами влево-вправо-вверх-вниз, добиваясь адекватного внешнего вида. Отображение глифа меняется в основном окне, так что можно контроливать, как будет выглядеть символ в уменьшенном виде.







Ничего сложного!

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

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

Читать далее