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





Если дизайнер заботится о видимости написанного текста поисковыми системами, он наверняка будет использовать элемент amp и пытаться подбирать более-менее безопасную гарнитуру.

Здесь и далее примеры идут с весьма крупным кеглем. Использование тех же амперсандов на 12pt выглядит намного менее впечатляюще.

Для красоты используется обычно курсивный амперсанд. Так уж получилось, что в большинстве гарнитур именно курсивный амперсанд является более красочным.





Часто антиквенный амперсанд используют с рублеными гарнитурами (обратное явление автором не наблюдалось).



Хорошие амперсанды бывают даже там, где их совсем не ждешь.



Для веб-типографики шрифтов с красивым амперсандом действительно мало. Автор для красивого амперсанда на веб-странице использует нечто подобное:

.amp
{
 font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
 font-style:italic;
 font-weight:normal;
 line-height:inherit;
}

Это, кстати, весьма известный стиль, и много сайтов именно его используют. Вот примерная иллюстрация того, во что этот стиль может обернуться:



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

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


Если вы например генерируете заголовки на стороне сервера как PNG, или используете другую технологию замещения (sIFR, SVG, экзотика), то вы можете использовать абсолютно любой амперсанд который у вас имеется. Тут можно создать нечто презентабельное даже без особого воображения:



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


Почитать про то что такое амперсанд и почему он нафиг не нужен в нашей родной типографике можно у Лебедева. Также эту тему освещает сайт Adobe. В типографических курилках тема встречается часто—можно найти много интересных ссылок, например тут. А вообще рекоммендую гуглить. Например вот тут есть хороший список красивых амперсандов, в т.ч. и в бесплатных шрифтах. Автор сам утянул себе парочку – так, про запас.

Вот пока и все. Кажется мой редактор справился с автогенерацией картинок. Ура, товарищи!