типографика. Следует ли также выделить жирным шрифтом пробелы вокруг жирного текста?
спросил
Изменено 6 лет, 11 месяцев назад
Просмотрено 5к раз
На следующем изображении верхний текст содержит обычные пробелы вокруг жирного слова bar , а нижний текст содержит пробелы, выделенные полужирным шрифтом:
Я добавил красные вертикальные маркерные линии, чтобы было легче увидеть, что слова не совпадают идеально. Для некоторых шрифтов это не имеет значения, однако для других (например, Avenir) имеет значение.
Есть ли общее правило, которому я должен отдать предпочтение? Если я сделаю слово жирным шрифтом , должен ли я также выделить оба пробела вокруг него жирным шрифтом?
(и если это не слишком расширяет вопрос, как насчет курсив
- типографика
- текст
9
Нет, пробелы не должны быть жирными, потому что это было бы плохой семантикой.
Слово или последовательность слов можно выделить жирным шрифтом, но пробелы вокруг слова нельзя.
Это отдельно от любых мыслей о визуальном дизайне и независимо от какой-либо реализации. Семантика исходит от писателя. Им не до дизайнера. У дизайнера есть инструменты визуального дизайна для визуального оформления. Опять же, в любой реализации.
В вашем примере писатель написал:
foo **bar** baz
У автора нет причин выделять пробелы жирным шрифтом, потому что нет семантической причины выделять пробелы жирным шрифтом. Жирный текст исходит от мысли писателей. Они выделяют слово (или ряд слов) жирным шрифтом, а не пробелы.
Итак, HTML — пример в HTML, потому что ваш пример в HTML, но это применимо к любой реализации — из приведенного выше Markdown:
foo bar baz
… и это после , когда начинается визуальный дизайн.
Если вам по какой-то причине нужно дополнительное пространство вокруг выделенного жирным шрифтом текста — и вы работаете в HTML, как следует из вашего примера — вы используете CSS или JavaScript для изменения DOM, вы не разрушаете семантику HTML. Если вы работаете в InDesign, Illustrator или любой другой среде визуального дизайна, то же самое.
Если вы посмотрите на пример с реальным письмом, то станет яснее:
Опасно Не ешьте содержимое пакета.
… это слово «Опасность» выделено жирным шрифтом. Ничего больше.
11
Честно говоря, я не думаю, что это имеет значение. Любая разница в интервалах будет незначительной и незаметной. Тем не менее, это то, что я обычно делаю.
Любая разница в интервалах будет зависеть от шрифта. Если есть разница, дизайнер шрифта принял сознательное решение сделать это различие, так что используйте его.
Жирный шрифт по определению шире, чем его аналог обычного веса, поэтому любой интервал, который, вероятно, был тщательно рассчитан, чтобы соответствовать шрифту, естественно, должен быть одинаково шире. Дополнительное пространство (теоретически) повысит разборчивость и сбалансированность текста.
Помните, что нужно быть последовательным. Если вы используете жирный пробел с одной стороны, используйте его и с другой. В противном случае текст может выглядеть несбалансированным. Во многих программах, если вы дважды щелкните, чтобы выбрать слово, оно выделит слово и завершающий пробел, поэтому, если вы дважды щелкните и измените шрифт на полужирный, вы получите обычный пробел перед и полужирный пробел после.
Другие отмечают, что это семантически неверно. Это верно, если вы работаете с исходным кодом или разметкой, которые должны быть такими же правильными, как и визуальный вывод, но это не относится к делу.
Подводя итог — маловероятно, что кто-либо когда-либо заметит, но если вам не все равно — используйте шрифт так, как задумал его дизайнер, используйте жирные пробелы и используйте их последовательно.
2
На самом деле это имеет значение, и это хороший вопрос. У меня был опыт работы с некоторыми устройствами, когда пустое пространство не создавалось принудительно как сущность с содержимое отображалось бы неправильно, если бы пространство существовало в чем-то вроде тега span.
Например, foo bar отображается как foobar при кодировании как:
foo bar
Некоторые приложения, например InDesign, в HTML и CSS экспортируют его как:
Это пятница
В целом, это может быть на усмотрение разработчика, но это должно быть принято в рабочем процессе для обеспечения четности. Я бы посоветовал вам проверить, как это будет обработано на готовом продукте, поскольку это может сыграть важную роль в вашем развитии. Итак, чтобы ответить на ваш вопрос, когда я разрабатываю с использованием HTML, я не включаю конечные или начальные пробелы в свои теги span, поскольку у меня был опыт их игнорирования механизмом рендеринга с нескольких устройств.
foo bar
С точки зрения разработки следует учитывать поведение синтаксического анализа и удобство использования. Например, если вы разрабатываете словарь и планируете анализировать определенные элементы, которые могут быть включены в конкретный раздел, если вы включаете начальный и конечный интервалы в чем-то вроде тегов span или в элементе, это может иметь серьезные последствия для окончания.
После понижения
Вы можете понизить голосование, если считаете это уместным, но факт остается фактом: это не может быть указано в качестве предпочтения. Несколько устройств на рынке игнорируют то, как выполняется интервал, и цель моего ответа состояла в том, чтобы упомянуть, что путь, по которому будет просматриваться контент, должен быть фактором при принятии решения и о том, как он создается. Лично я, когда разрабатываю контент, учитываю, как он просматривается в приложении, распечатывается или находится на сайте, и ОП также должен это учитывать.
После того, как мне сказали, что это не для Интернета, это все еще сводится к среде, в которой будет создаваться проблема. Если нет, то сделайте это в любом случае, но примите паритет. Если да, то делайте это так, чтобы получилось правильно.
8
Это зависит от дизайнера, но в большинстве случаев имеет очень мало значения.
С точки зрения дизайна, не имеет большого значения, выделены жирным шрифтом или нет пробелы, предшествующие жирным (или курсивным) разделам. Единственный эффект, который это имеет, — это расстояние между словами (я полагаю, что терминология дизайна все еще 9).0023 интервал между буквами , но мне нравится называть его интервал между словами ). Количество места влияет на «частоту» (см. эту статью) печати. Однако в большинстве случаев эта разница, возникающая только в пробелах перед жирным шрифтом или курсивом или в конце, настолько незначительна, что ее можно смело игнорировать.
Занимает ли жирный пробел больше места, чем нежирный пробел, зависит от используемого шрифта. Некоторые шрифты делают их одинаковыми по размеру, другие делают жирные пробелы немного шире. Вам нужно будет протестировать, чтобы увидеть, что делает шрифт, который вы используете (если вам это небезразлично).
Я думаю, что единственный случай, когда это действительно может иметь значение, — это действительно большой размер шрифта, например, в заголовках. В этом случае величина разности может быть более значительной из-за большего масштаба. Тем не менее, с такими большими текстами дизайнеры все равно должны просмотреть его и при необходимости внести коррективы.
Я рекомендую использовать то, что проще, но самое главное оставаться последовательным . Стремитесь добавить больше места (включая их жирным шрифтом).
С учетом сказанного, если вы используете какой-либо язык разметки, такой как HTML, более семантически правильно добавить эту дополнительную комнату, предшествующую или завершающую полужирный раздел, используя язык стилей, такой как CSS, вместо того, чтобы включать пробел внутри тега, который сделал жирным.
Хорошо, я думаю, теперь я понял, и это интересный, хотя и сложный вопрос, поэтому ответы повсюду. Надеюсь, в моей безграничной мудрости (читай: лишенном сна разуме) я смогу прояснить
Разметка, HTML, LaTeX — это имеет значение но теперь как вы думаете о них в данный момент.
Например, у нас было бы, как вы использовали в своем первоначальном примере:
- HTML:
кошка умерла прошлой ночью! - Разметка:
**кот** умер прошлой ночью! - BBCode:
[b]кошка[/b] умерла прошлой ночью!
Или вы могли бы:
- HTML:
кошка умерла прошлой ночью! - Наценка:
** кот ** умер прошлой ночью! - BBCode:
Кошка[b][/b]умерла прошлой ночью!
Теперь вы говорите, что спрашиваете не о HTML, а только о дизайне. Но вот где это немного сбивает с толку, поэтому я попытаюсь объяснить.
Жирный шрифт — это функция семантики (как Саймон тоже пытается объяснить). Независимо от того, какую систему вы используете, что-то должно быть указано жирным шрифтом.
Что вы действительно хотите спросить: Нужно ли увеличивать пространство при использовании более сильного шрифта?
Итак, Следует ли увеличивать отступ при использовании более толстого шрифта?
Это на усмотрение дизайнера. Разверните набор букв в выбранном вами приложении и расположите их так, как считаете нужным. Строгого правила на этот счет нет.
Смотрите, жирных пробелов нет, потому что здесь вообще нет пробелов, есть просто буквы, разбросанные по странице:
Чуть ближе, чуть дальше, то же самое… и все вплоть до дизайнера.
Ширина каждого глифа (включая пробел) определяется дизайнером шрифта внутри гарнитуры. В случае с Avenir дизайнер решил увеличить ширину пробела, чтобы сохранить относительный интервал между двумя словами при увеличении веса, но дизайнер почти наверняка разработал шрифт , а не со смешанными весами в одном предложении.
Итак, правильного ответа нет; пробел — это ширина, которая позволяет смотреть прямо между словами одного и того же веса шрифта. Вам придется использовать свое собственное суждение о том, что делать в вашем конкретном случае, потому что типограф сделал это не за вас. Единственное, что вы обязательно должны сделать, это использовать жирные пробелы между жирными словами.
Может быть уместно представить себе использование двух совершенно разных шрифтов, каждый с очень разным интервалом; вы можете сказать, что на самом деле нет четкого правильного ответа о том, какие показатели шрифта использовать между двумя словами.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
Text — UIkit
Набор служебных классов для оформления текста.
Объедините этот компонент с компонентом «Заголовок», чтобы стилизовать содержимое.
UIkit предлагает различные текстовые утилиты для оформления текста.
| Класс | Описание |
|---|---|
.uk-text-lead | Добавьте этот класс для выделения текста, например, в подзаголовках статей. |
.uk-текст-мета | Добавьте этот класс к абзацу, содержащему метаданные о статье или подобном. |
Следующие классы изменят размер шрифта вашего текста.
| Класс | Описание |
|---|---|
.uk-text-small | Добавьте этот класс, чтобы уменьшить размер шрифта. |
.uk-текст-по умолчанию | Добавьте этот класс, чтобы установить размер шрифта по умолчанию. |
.uk-text-large | Добавьте этот класс, чтобы увеличить размер шрифта. |
Добавьте один из следующих классов, чтобы изменить толщину шрифта текста.
| Класс | Описание |
|---|---|
.uk-text-light | Добавьте этот класс, чтобы применить толщину шрифта 300 . |
.uk-текст-обычный | Добавьте этот класс, чтобы применить толщину шрифта 400 . |
.uk-текст-жирный | Добавьте этот класс, чтобы применить толщину шрифта 700 . |
.uk-текст-зажигалка | Добавьте этот класс, чтобы применить более легкий шрифт. |
.uk-текст-жирнее | Добавьте этот класс, чтобы применить более жирный шрифт. |
Добавьте класс .uk-text-italic для создания курсивного текста.
Следующие классы преобразуют текст в символы верхнего, верхнего или нижнего регистра.
| Класс | Описание |
|---|---|
.uk-text-capitalize | Добавьте этот класс, чтобы преобразовать текст в заглавные буквы. |
.uk-текст-верхний регистр | Добавьте этот класс, чтобы перевести текст в верхний регистр. |
.uk-текст-нижний регистр | Добавьте этот класс, чтобы перевести текст в нижний регистр. |
Добавьте класс .uk-text-decoration-none , чтобы удалить любое украшение текста из ссылки.
Используйте один из этих классов, чтобы применить другой цвет к текстовым элементам.
| Класс | Описание |
|---|---|
.uk-текст-приглушенный | Добавьте этот класс для отключения звука. |
.uk-текст-выделение | Добавьте этот класс, чтобы выделить текст. |
.uk-текст-первичный | Добавьте этот класс, чтобы выделить текст основным цветом. |
.uk-текст-вторичный | Добавьте этот класс, чтобы выделить текст дополнительным цветом. |
.uk-текст-успех | Добавьте этот класс, чтобы указать на успех. |
.uk-текстовое предупреждение | Добавьте этот класс, чтобы указать предупреждение. |
.uk-текст-опасность | Добавьте этот класс для обозначения опасности. |
Чтобы применить к тексту градиент или фоновое изображение, добавьте класс .uk-text-background к элементу внутри текстового элемента. Стили, которые не определяют background-image , будут применять основной цвет.
Добавьте один из этих полезных классов для выравнивания текста.
| Класс | Описание |
|---|---|
.uk-текст-левый | Выравнивает текст по левому краю. |
.uk-текст-справа | Выравнивает текст по правому краю. |
.uk-текстовый центр | Центрирует текст по горизонтали. |
.uk-текст-выравнивание | Выравнивает текст. |
- Предварительный просмотр
- Наценка
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-текст-левыйLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-текст-правоLorem ipsum dolor sit amet, consetetur sadipscing elitr.
.uk-текстовый центр<раздел uk-grid> <дел> <дел> <дел> Lorem ipsum dolor sit amet, consetetur sadipscing elitr..uk-text-left
uk-text-truncate 
