Приветствую всех!
Меня зовут Семичев Олег, и на этой неделе я буду вашим проводником в мир веб в
контексте работы с шрифтами и текстом, расскажу вам,
с какими проблемами вы можете столкнуться и как их решить.
В сегодняшнем видео вы узнаете о том, что такое шрифт,
чем отличается шрифт из реальной жизни и компьютерный шрифт,
а также познакомитесь с несколькими понятиями, которые помогут нам в будущем.
Поехали!
Что же такое шрифт?
«Википедия» нам подсказывает, что шрифт — это графический рисунок начертаний
букв и знаков, составляющих единую стилистическую и композиционную систему,
набор символов определенного размера и рисунка.
Данное определение справедливо для типографики.
Что же важно для нас?
А для нас важно, что компьютерный шрифт — не более чем файл,
который содержит в себе набор символов и соответствующих им кодов.
Символы же сами по себе могут быть различными по назначению.
Это могут быть языковые знаки, цифровые символы, графические либо специальные.
Но шрифт, как и любая другая технология, не стоит на месте,
и с чего-то все начиналось.
Так вот, самым главным различием между старыми и новыми шрифтами
является характеристика их вывода, а именно: изначально были растровые шрифты,
затем появились векторные.
Поговорим о растровых шрифтах.
Данные шрифты были распространены в эпоху матричных принтеров
и экранов с очень маленьким разрешением и представляли собой
просто набор растровых изображений каждого символа в виде битмапа.
То есть такие картинки с черными и белыми пикселями, которые вырисовывали символ.
Самый наглядный пример — это игры, особенно старые.
На скриншоте видно, что в данной игре символы шрифта состоят из
белых пикселей, и это очень хорошо заметно.
Но сейчас эпоха векторных шрифтов.
Вообще, векторная графика основана на математических формулах геометрических
объектов.
То есть всё в векторной графике описывается математикой.
То же самое применяется и к шрифтам.
Современные шрифты описывают символы с помощью этих самых формул,
математических формул, которые позволяют их масштабировать без какой-либо потери
качества, как и любое, в принципе, другое векторное изображение.
Хочу задать вам вопрос: сделана ли данная презентация с использованием
векторного шрифта?
Вообще, дам подсказку — презентация сделана в браузере.
В современных браузерах используются векторные шрифты.
Поэтому ответ: да.
И как вы видите, после масштабирования не появилось никаких пикселей,
никаких зазубрин и ничего, что выдавало бы этот шрифт как растровый.
Вообще, шрифты — это обширная тема, и рассматривать ее можно со многих сторон.
Но я возьму себе в помощь определение гарнитуры шрифта из типографики.
Данное определение выглядит так.
Из всего этого определения для нас в контексте веба очень важны три
параметра: размер, начертание и плотность,
наличие или отсутствие засечек на концах линий, пропорциям символов.
Прежде чем мы перейдем к каждому из этих пунктов,
я бы хотел вам рассказать о некоторых понятиях из типографики.
Назовем это «Анатомия шрифта для чайников».
Первое важное понятие — базовая линия.
Это такая воображаемая прямая линия, проходящая по нижнему краю прямых
знаков без учета свисаний и нижних выносных элементов,
таких как у буквы g в английском алфавите или у буквы «у» в русском алфавите.
Следующими двумя важными понятиями являются высота прописных знаков и высота
строчных знаков.
Первое — это расстояние от базовой линии до верхней линии прописных,
а второе — от базовой линии до верхней линии строчных,
то есть это просто высота маленьких и заглавных букв.
Следующим понятием является интерлиньяж, или межстрочный интервал.
Это просто расстояние между двумя базовыми линиями двух строк.
В вебе данный термин чаще всего называют высотой строки.
Так мы и будем ее называть далее.
И, пожалуй, самое важное понятие — это кегельная площадка: верхняя прямоугольная
часть ножки литеры, на которой расположено выпуклое изображение знака.
Но не нужно бояться этого определения, ведь каждый знает,
как выглядит пишущая машинка и как она работает.
Так вот, у пишущей машинки каждая буква находится на своей маленькой площадке,
ударом которой символ переносится на бумагу.
В цифровом шрифте кегельная площадка важна как прямоугольник,
в который вписывается изображение знака.
На картинке вы можете заметить,
что два разных шрифта находятся в одной и той же кегельной площадке,
и несмотря на разницу их размеров, ничего страшного не происходит.
Но если сравнить два других шрифта, можно заметить,
что одна и та же кегельная площадка может родить некоторые проблемы, и размер шрифта
может отличаться значительно, так же, как и расстояние между буквами.
Итак, в этом видео вы узнали, что такое шрифт с точки зрения типографики и что
такое компьютерный шрифт, а также понятия, которые их объединяют.
В следующем видео я расскажу вам о том, как с помощью веб-технологий
можно менять параметры шрифта, а если быть точным — его размер.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
