Шрифт на экране. Часть 1 — Дизайн на vc.ru

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

7196
просмотров

Доцифровые и первые цифровые шрифты

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

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

А это деревянные литеры для печати афиш и плакатов. Айпод слева и кнопки справа — для масштаба 🙂

На самом деле ещё в начале 1990-х годов встречались типографии, в которых большими тиражами печатали книги с металлических литер.

Литеры в XX веке, конечно, делались уже не так, как во времена Гутенберга или Гарамона, а механическим способом. Но тем не менее, это были физические объекты. То есть и процесс изготовления шрифта, и процесс его использования ещё 30–40 лет назад мог происходить без участия компьютера.

Это книга 1992 года издания (ниже — фото выходных сведений). По выпуклым следам на незапечатанных местах страницы видно, что она напечатана методом высокой печати — с металлических литер под давлением. 

Гарнитура Литературная, печать высокая. А с фотополимерных форм из последней строки напечатана обложка.

При этом те же 40 лет назад будущие основатели Adobe уже работали над языком PostScript и одноимённым шрифтовым форматом. А ещё тогда шрифты могли храниться в виде фотографий или цифровых растровых изображений.

Это исходник для фотонаборного шрифта — стеклянная пластина с прозрачными буквами

А это большая редкость — шрифты для цифрового фотонабора (Demos и Praxis Герарда Унгера, середина 1970-х, взято из книги «Великие шрифты»). Шрифт хранился в памяти ЭВМ в виде растрового изображения, а для печати эти изображения засвечивали на фотоплёнке.

А способ делать и хранить шрифты в векторной форме разработал и представил в 1975 году профессор Петер Каров из компании URW.

Это был IKARUS — программный пакет для автоматизированного проектирования шрифтов.

«Практически первой гарнитурой, спроектированной в 1979 году с помощью пакета IKARUS, был замечательный шрифт ITC Galliard Мэтью Картера в 8 начертаниях. <…> Дизайнеры, с которыми работала [студия] ITC, рисовали только основные буквы латинского алфавита, цифры и знаки препинания в нескольких основных начертаниях (обычно самых светлых и самых жирных), а остальные несколько сот знаков латиницы и промежуточные начертания гарнитуры разрабатывали сотрудники Карова. <…>

Расцвет IKARUS продолжался до широкого внедрения персональных компьютеров и настольных издательских систем, до изобретения сегодняшних шрифтовых форматов PostScript и TrueType. Пакет IKARUS оказался слишком дорогой и сложной системой для персональных компьютеров». (В. Ефимов. Предисловие к русскому изданию книги П. Карова «Шрифтовые технологии. Описание и инструментарий» М. Мир, 2001)

Фотография интерфейса IKARUS 

Тут важно понимать, что даже когда программы для разработки шрифтов начали работать на персональных компьютерах, а не только на больших промышленных, речь шла именно о разработке шрифта на экране, а не о его использовании на том же экране. Векторные шрифты, похожие на современные, были нужны для последующей печати (или, например, плоттерной резки). А для использования на экране, например, в интерфейсе, они не слишком подходили. У компьютеров Apple 1980-х были монохромные дисплеи 512×342 или 640×480 пикселей.

В их интерфейсе использовался пиксельный шрифт. Его высота от верха выносного элемента буквы b до низа выносного элемента буквы g составляла 12 пикселей, из них на строчную букву типа n или x приходилось 7 пикселей.

Этот шрифт называется Chicago, его спроектировала Сьюзен Кэр (Susan Kare) и он оставался системным шрифтом Apple до 1997 года.

Превращение векторного шрифта в пиксельный. Режим Black&White

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

Пиксели на ранних монохромных электронно-лучевых трубках были округлыми, довольно крупными и неделимыми.

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

Когда векторная буква в режиме Black&White накладывается на растровую сетку экрана, алгоритм отображения по умолчанию такой: пиксель, центр которого оказался внутри контура буквы, становится чёрным, а пиксель, центр которого оказался снаружи — белым. Если контур совпал с растровой сеткой удачно, получится что-то вроде пиксельного шрифта. А вот если неудачно, то даже не всегда получится узнать букву.

Иллюстрации из статьи на сайте Microsoft:

Чтобы избежать этого эффекта, шрифтовые технологи встраивают в шрифт специальные инструкции для операционной системы — хинты (hints). Хинтинг улучшает отображение шрифта на экране в мелких размерах или при низком разрешении, когда размер пикселя сопоставим с размером буквы. Реально хинтинг помогает, когда высота строчной буквы (типа х или а) от 5 до 30 пикселей — мельче всё равно не прочитать, а крупнее операционная система справится сама.

В режиме хинтинга Black&White приходится для каждого размера букв контролировать положение пикселей вручную.

Размер букв при хинтинге ещё называют ppem — pixels per em, то есть количество пикселей на кегль — от верха выносных элементов в буквах типа h до низа выносных элементов в буквах типа g. На картинке пиксели расставляются для ppem 12, на основную часть буквы приходится шесть пикселей и ещё по три — на выносные элементы.

Когда Мэтью Картер проектировал шрифты Georgia и Verdana для Windows 95, он сразу учитывал и то, как буквы будут выглядеть на мониторе.

На этой фотографии 1993 года видны сразу три важные вещи: векторный контур буквы, то, как она будет отображаться на экране в режиме Black&White в 14 ppem и интерфейс MacOS с пиксельными шрифтами.

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

Откуда берётся эта разница?

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

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

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

Автор статьи в шапке с логотипом. Для чего бы ещё было это писать? 🙂

Иногда современные шрифты делаются с расчётом на то, чтобы хорошо ложиться на пиксельную сетку, как Input Mono Дэвида Джонатана Росса.

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

Где сейчас используются пиксельные шрифты или режим растрирования Black&White или Bitmap?

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

Обратите внимание на разницу между относительно старыми шрифтами (Calibri, Baltica), которые были к нему адаптированы, и новыми, которые в режиме Black&White уже никто не обрабатывал.

Продолжение следует

Лучшие экранные шрифты для создания впечатляющих дизайнов

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

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

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

Рекомендуем также посмотреть:

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

1. Berg – Free Layered Font Family

Вдохновленный старинными рисунками на вывесках, постерами и этикетками, Berg представляет собой семейство из 7 шрифтов – Regular, Extrude, Inline, Shadow, Ornament, Western и Rough (потертый текстурированный шрифт), которые можно использовать вместе для создания привлекающих внимание текстовых эффектов.

Это семейство старинных экранных шрифтов, разработанное Brosnes Design Co., можно бесплатно загрузить в формате TTF.

Скачать

2. Polar Vertex –  Decorative Font

Декоративный шрифт с причудливым ощущением, Polar Vertex имеет элементы морского, небесного и геометрического узоров в своих символах. Созданный Кэтрин Ховард, он придаст уникальность названиям групп, брендам и заголовкам в журналах (архитектурных, технологических, художественных, дизайнерских и т. Д.).

Он содержит прописные и строчные буквы, цифры, а также основные символы и знаки препинания. Формат шрифта: OTF.

Скачать

3. Antre –  Contemporary Script Typeface

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

Скачать

4. Roska –  Stencil шрифт

Roska is an all caps stencil font with round edges from Uppertype. A display sans, it includes numerals and punctuations and can be downloaded in TTF format.

Скачать

5. Metropolis –  Art Deco шрифт

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

Скачать

6. Higher –  Blocky Display Typeface

Higher, студенческий проект графического дизайнера Марисы Пассос, представляет собой узкий высокий шрифт. Он содержит полный набор символов верхнего регистра (A – Z) и цифр (0–9).

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

Скачать

7. Cheque – шрифт Display Font

Check – это великолепный бесплатный дисплейный шрифт, разработанный Мирелой Беловой из Fontfabric. Основанный на геометрических формах, шрифт имеет стильный винтажный вид.

Он поставляется в двух стилях: Check Regular, это стиль контура, показанный на изображении выше, и Check Black, его версия с заливкой. Шрифт содержит символы как латиницы, так и кириллицы. Вы можете скачать его в формате .otf.

Скачать

8. Glamor – Stylish шрифт

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

Glamour – это семейство из 24 шрифтов от светлого до полужирного, которые полностью бесплатны для коммерческой работы. Разработанный Хенриком Рональдесом, он доступен для загрузки в форматах TTF и OTF.

Скачать

9. Cheque –  Display шрифт

Check – это великолепный бесплатный дисплейный шрифт, разработанный Мирелой Беловой из Fontfabric. Основанный на геометрических формах, шрифт имеет стильный винтажный вид.

Он поставляется в двух стилях: Check Regular, это стиль контура, показанный на изображении выше, и Check Black, его версия с заливкой. Шрифт содержит символы как латиницы, так и кириллицы. Вы можете скачать его в формате .otf.

Скачать

10. Accent –   минималичтичный шрифт

Сверхлегкий и минималистичный, Accent – экспериментальный шрифт Нельсона Балабана, сочетающий тонкие линии и смелые геометрические формы в формах букв. Этот красивый тип дисплея был разработан для коротких слов и заголовков. Accent бесплатен для личного и коммерческого использования и доступен в формате TTF.

Скачать

11. Fakedes –  Rounded Serif шрифт

Fakedes от Кирилла Михайлова – это шрифт с закругленными засечками, предназначенный для демонстрации. Он имеет контур, полые символы и бывает обычного и жирного шрифта. Формат шрифта: OTF.

Скачать

12. Ocean Six –  Bold Brush

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

Скачать

13. Gorgeous –  Display Sans Serif

Gorgeous by Rajesh Rajput – это семейство дисплейных шрифтов без засечек с 12 степенями плотности, от ультратонких до очень жирных. Каждый шрифт включает в себя маленькие и заглавные буквы, цифры, знаки препинания и акценты.

Его сжатые буквы с высоким контрастом между горизонтальными и вертикальными штрихами придают ему гламурный вид и делают его идеальным для использования в модных журналах, баннерах и крупных заголовках. Это семейство модных шрифтов бесплатно для личной работы и доступно для загрузки в формате True Type (. ttf).

Скачать

14. Ansley Display – Slab Serif Font

Ansley Display, шрифт с засечками, черпает вдохновение из прошлого и современной ретро-типографики. Шрифт, разработанный для заголовков и большого дисплея, представлен в 6 различных стилях: светлый, обычный, полужирный, черный, встроенный и контурный. Шрифт создан Kady Jesko и доступен в формате .ttf.

Скачать

15. Big John & Slim Joe

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

Эти отображаемые шрифты без засечек доступны для бесплатной загрузки в форматах .OTF и .TTF. Шрифты включают все заглавные латинские алфавиты, числа и глифы. Шрифт разработан Ионом Лучином.

Скачать

Премиум шрифты

1.

Old Spirits – Bold Display

Old Spirits – это смелая витрина в американском стиле от Vintage Type Company. Он оснащен набором символов верхнего регистра, который включает прописные буквы со шпорами и чистые строчные буквы. Загрузка также включает 2 бонусных текстурированных шрифта с различной степенью эффекта штампа для аутентичной эстетики состаренного шрифта. Шрифты предоставляются в формате Open Type.

Скачать

2. Sortdecai Display

Sortdecai Display от Swistblnk Design Studio объединяет в своем дизайне сущность винтажных и современных надписей. В шрифте более 370 глифов, включая стилистические наборы, лигатуры и контекстные альтернативы. Загрузка включает два шрифта: Sortdecai Display и Sortdecai Display Handmade в форматах OTF.

Скачать

3. Nectar – Thin Sans Serif

Nectar от Tugcu Design Co. – это минималистичный и тонкий дисплейный шрифт без засечек, который бывает обычного и жирного шрифта. Он отлично подходит для шикарных названий, элегантных приглашений и стильных логотипов. Нектар доступен для покупки в формате OTF.

Скачать

4. Java Heritages – Vintage Decorative Typeface

Коллекция Java Heritages, вдохновленная винтажными вывесками, представляет собой семейство многослойных декоративных шрифтов. Он поставляется с 4 стилями шрифта – Regular, Drop Shadow, Inner Shadow и Inline, которые можно накладывать вместе для создания различных украшенных текстовых эффектов.

Он включает в себя полный набор символов A – Z, цифр, знаков препинания и многоязычных символов. При покупке вы получаете бонусные украшения в форматах AI, EPS, PNG вместе с файлами шрифтов OTF и TTF. Созданный Heybing Supply Co., Java Heritages идеально подходит для логотипов, плакатов, фирменных бланков, буквиц и заголовков.

Скачать

5. Quirk – Fun Display Font

Quirk – это забавный дисплей без засечек. Его строчные буквы представляют собой вариации прописных букв. Варианты верхнего и нижнего регистра могут быть объединены вместе для получения интересных результатов. Разработанный The Routine Creative, его можно скачать в формате OTF.

Скачать

6. Blackhawk Brush Font

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

Пакет загрузки включает 3 файла шрифтов – Blackhawk normal, Blackhawk italic и Blackhawk swashes в форматах TTF и OTF.

Скачать

7. Quas – Stylish Serif Typeface

Quas – это элегантный и стильный шрифт с засечками, идеально подходящий для заголовков и логотипов. Он доступен в 3 стилях – обычный с сопутствующим жирным шрифтом, минималистичный стиль трафарета и потрепанный стиль Corroded. Заглавный шрифт Quas можно приобрести в Creative Market. Шрифт предоставляется в формате OTF и разработан Мехметом Рехой Тугку.

Скачать

8. Banthers – Monoline Vintage Display Typeface

Banthers – это монолинейный винтажный дисплейный шрифт, сочетающий в своем дизайне стили классической типографики и современные рукописные надписи. Он содержит прописные и строчные буквы, цифры, знаки препинания, акценты и включает стилистические наборы, лигатуры и контекстные альтернативы. Шрифт разработан студией Swistblnk Design, вы можете скачать его в формате OTF.

Скачать

9. Drone Ranger – Geometric Display Font

Drone Ranger – это семейство геометрических дисплеев, состоящее из 9 шрифтов в различных стилях. Он включает в себя версию Sans, версию Serif и декоративный шрифт, все со своими чистыми, наклонными и изношенными, потрепанными стилями с чернилами.

Полужирный шрифт в верхнем регистре, многоязычный шрифт. При покупке вы получите бонусный набор значков кочевников вместе с файлами шрифтов TTF. Шрифт разработан Vintage Type Co.

Скачать

10.

Heartland – Handcrafted Vintage Font Family

Heartland – это семейство шрифтов ручной работы, которое представлено в 4 вариантах: Regular, Rough, Spurs и Spurs-Rough. Он включает в себя множество стилистических альтернатив, которые вы можете использовать для создания декоративных элементов в стиле винтажной американской типографики.

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

Скачать

Узнать больше интересного:

Шрифты для принтера и экрана

Шрифты для принтера и экрана

Как/Работа со шрифтами

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

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

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

[Верх]

Увеличение размера текста и приложений

Windows 11 Windows 10 Больше…Меньше

Трудно видеть текст или приложения на экране компьютера? Есть простые способы упростить просмотр в Windows.

Увеличение размера текста на экране

Если размер текста кажется слишком маленьким при навигации по Windows, вы можете увеличить текст. Это влияет, например, на строки заголовков, меню и тексты значков.

org/ItemList»>

1. Чтобы перейти к настройкам Специальные возможности  на вашем компьютере, нажмите клавишу с логотипом Windows + U или выберите Пуск  > Настройки > Специальные возможности .

2. Выберите Размер текста .

3. Перетащите ползунок Размер текста вправо, чтобы увеличить размер образца текста.

4. Если вас устраивает размер текста, выберите Применить . Windows увеличивает размер всего текста.

Увеличение изображений и приложений на экране

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

1. Чтобы открыть Settings на компьютере, нажмите клавишу с логотипом Windows+I или выберите Start  > Settings .

2. Выберите  Показать .

3. В разделе Scale & layout разверните меню Scale и выберите нужный вариант.

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

См. также

Специальные возможности Майкрософт

Увеличьте размер текста на экране

Если размер текста кажется слишком маленьким при навигации по Windows, вы можете увеличить текст. Это влияет, например, на строки заголовков, меню и тексты значков.

1. Чтобы перейти к настройкам Ease of Access на вашем компьютере, нажмите клавишу Windows+U.

2. В разделе Увеличить текст на вкладке Отображение перетащите ползунок вправо, чтобы увеличить размер образца текста.

3. Если вас устраивает размер текста, выберите Применить . Windows увеличивает размер всего текста.

Увеличение изображений и приложений на экране

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

1. Перейти к Простота доступа на вашем компьютере, нажмите клавишу Windows+U.