Используем необычные шрифты для заполнения макета сайта
23 апреля 2018 | Опубликовано в css | Нет комментариев »
Большинство веб-дизайнеров сталкивались с ситуациями, когда заказчик спрашивал: «Этот текст на латыни… Его же не будет в окончательном варианте, правда?». Есть много альтернатив для привычной «рыбы» lorem ipsum, но ни один из этих генераторов не решает основную проблему: клиенты всегда будут считать заполняющий текст окончательным вариантом. Недавно нам попалось несколько интересных и творческих подходов к этой проблеме: заполняющие шрифты, которые превращают любой текст, включая Lorem ipsum, в нечто совершенно другое, очень подходящее для создания каркаса сайта и макета для клиента.
Шрифт Blokk создает видимость «редактированного» текста, как будто подвергшегося цензуре ЦРУ. Что очень удобно, этот шрифт можно легко встроить в веб-сайт и удобно использовать в макетах. Текст, отображенный в шрифте Blokk, выглядит следующим образом:
Обычно этот шрифт будет выводиться в меньшем размере для каркаса сайта.
Christian Naths, руководствуясь той же мыслью, создал шрифт под названием Redacted и добавил версию рукописного шрифта:
Эти шрифты можно использовать двумя следующими способами:
1) Установить шрифт как системный и использовать в тех инструментах, которыми Вы пользуетесь для создания макетов веб-сайтов, как обычный шрифт. Не забудьте, что Вам может быть нужно сделать результат растровым, чтобы заказчик смог его увидеть, так как у него в системе этот шрифт не будет установлен.
2) Использовать шрифт в макете сайта, находящемся в интернете, встроив его как веб-шрифт:
@font-face { font-family: 'Blokk'; src: url('BLOKKRegular.woff') format('woff'); font-weight: normal; font-style: normal; } p { font-family: Blokk; }
Обратите внимание, что эти шрифты не уничтожают текст, который отображают, — его все еще можно прочесть, если скопировать его и вставить в текстовый редактор или посмотреть исходники веб-сайта в браузере. Так что не стоит писать, используя такие скрывающие шрифты, что-то, что Вы бы не хотели, чтобы заказчик или кто-то другой прочел.
Примечание: К сожалению, оба этих шрифта не сработают на кириллических текстах, но это не влияет на их возможность применения для макета сайта.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193