Разные подчерки текста: Красивые шрифты онлайн | Написать текст и скопировать

Если же целевая аудитория сайта — пожилые люди, то лучше использовать максимальный размер указанного диапазона — 72 px.

Используя различные размеры, можно указывать на степень приоритета кнопки. Например, использовать для кнопок с максимальным приоритетом размер 72 px, а с минимальным — 42 px. Также стоит устанавливать оптимальное расстояние между кнопками, которое вычисляется исходя из их размера:

• 12-24 px (10-13 мм) — для больших кнопок;
  
• 24-36 px (6-10 мм) — для средних;
  
• 36-48 px (3-6 мм) — для маленьких.

Для кнопок с текстом используются аналогичные стандарты высоты (42-72 px), ширина при этом будет варьироваться. Расстояние между такими кнопками для оптимального визуального разделения должно быть минимум 12 px.

Помимо этого, стоит располагать конверсионные кнопки в центральной части экрана так, чтобы они были хорошо заметны:

Размер кнопок для мобильной версии

Какие выбрать шрифты для мобильной версии

Специалисты рекомендуют использовать стандартные системные шрифты для основного текста и кнопок. Например, Book Antiqua:

Шрифты семейства Book Antiqua

Еще одно популярное семейство шрифтов, отличающееся лаконичным стилем и разборчивым начертанием, — Helvetica:

Шрифты семейства Helvetica

Для подчеркивания индивидуального стиля компании стоит выделить заголовки брендовыми шрифтами, например, использовать Avenir Next:

Шрифт Avenir Next

Также для заголовков и выделения больших чисел подойдет шрифт Geogrotesque:

Шрифт Geogrotesque для заголовков

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

Как изменить размер шрифта на сайте

Чтобы изменить размер шрифта определенного фрагмента текста, можно использовать встроенные стили в HTML-коде, например, установить размер 16px с помощью такой записи:. Еще один вариант — задать тексту класс, а затем прописать для него CSS-стили. Для CMS, например WordPress, доступно изменение шрифтов в редакторе записей.

Как определить размер шрифта на сайте

Чтобы определить размер шрифта какого-либо текста на сайте, выделите данный фрагмент в браузере и нажмите сочетание клавиш Ctrl+Shift+I или «Просмотреть код» в контекстном меню. Затем в открывшемся коде найдите атрибут font-family и посмотрите, какой размер шрифта там задан.

Какого размера кнопки должны быть на сайте

Чтобы кнопки были комфортными для нажатия, можно ориентироваться на минимальный размер 40px на 40px, при этом в них должен использоваться шрифт не меньше 16 px.

Заключение

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

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

Для мобильной версии шрифты должны быть разборчивыми и читабельными, минимальный размер основного текста — 16 px.

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

Размер кнопок на мобильных устройствах должен находиться в диапазоне от 42 до 72 пикселей. При этом кнопки с максимальным приоритетом делаются крупнее остальных.

Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

4.13 из 5 на основе 19 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

Рекомендуемые статьи

How-to

Анастасия Сотула

Что такое CDN и как его настроить

How-to

Анастасия Сотула

Как провести юзабилити-аудит сайта

How-to

Анастасия Сотула

Как создать внутренний поиск по словам на сайте

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Как использовать кастомные шрифты в вебе и не сойти с ума / Хабр

Бывало ли так, что вы видите на веб-странице картинки и оформление, но не видите текста — он появляется на пару (десятков) секунд позже? Это загружаются кастомные веб-шрифты. Объясняем, почему это происходит и как этого избежать.

Классический вопрос на собеседовании ops-инженеров и программистов: вы написали в адресной строке браузера habr.com и нажали Enter. Что произойдет? (Ответ на 10 страницах)

Ок, мы указали для своего текста font-family: PFRegal, «Times New Roman». Что произойдет?

Браузер посмотрит, есть ли для PFRegal объявление font-face. Если оно есть, то начнется загрузка файла шрифта. Что будут видеть читатели те секунды (десятки секунд на 3G), пока происходит загрузка?

В Chrome и Firefox 3 секунды прозрачного текста, далее используется системный fallback font.

В IE сразу покажется fallback font.

IE не так уж и плох!

Все три подхода соответствуют стандарту: „in cases where textual content is loaded before downloadable fonts are available, user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.“

Как бороться с «прозрачным текстом» в Safari и Chrome?

Есть несколько способов:

1. Сделайте отдельный css-файл с инлайном шрифта, подключайте его после html кода с текстом. HTML документ обрабатывается (и отображается на экране) от начала файла к концу, по мере загрузки. Это дает возможность управлять шрифтами даже без использования JavaScript. Важно сделать именно инлайн, а не подключение внешнего файла шрифта. Способ не работает в Desktop Safari и может не сработать, если между запросом на рендеринг текста текстом и подключением css-шрифта нет достаточного промежутка по времени, экспериментируйте.
2. Используйте javascript-хак с invalid media type. Этот способ позволяет сразу же показать текст fallback-шрифтом, но на наших тестах fallback-шрифт висит чуть дольше, чем при первом способе. У этого подхода есть проблемы в IE и FF, но в остальном он кажется самым логичным на сегодняшний день.
3. Используйте Font Loading API, это позволяет начать неблокирующую загрузку шрифта сразу при открытии страницы. Это новое js-API и оно поддерживается только Chrome и самым последним Safari. 

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

Теперь оно моргает при рефреше!

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

Мы в Медузе оптимизируем главную страницу для людей, открывающих ее по закладке в браузере: первое открытие медленное, последующие — мгновенные без моргания. Страницы материалов в основном открываются из соцсетей на телефонах, где кеша нет, и мы оптимизируем время появления текста на экране при первой загрузке.

Важно не забыть некоторые системные вещи:

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

Как проверить, что все работает нормально? У меня слишком быстрый интернет

1. Используйте встроенные средства Google Chrome.

   
   Возможность сэмулировать плохой интернет. Good 3G — наш выбор для отладки Медузы

   
   Сброс кеша по правой кнопке мыши (работает только если открыты Developer Tools)

   А также суперзнание, как заблокировать загрузку определенного адреса или даже маску адресов в Хроме: включите Developer Tools Experiments в chrome://flags → Откройте Chrome Developer Tools → Настройки (спрятаны в трех точках в правом верхнем углу) → Experiments → Нажмите Shift 6 раз → Поставьте галочку Request blocking. 

   
   Теперь вы можете сделать вот так
   
   

2. Для отладки в Desktop Safari потребуется установить Network Link Conditioner (для скачивания необходим Apple Developer Account). Для отладки iOS Safari и iOS Webview используйте Network Link Conditioner в настройках вашего устройства ( Settings → Developer → Network Link Conditioner). Учтите, настройки ограничения скорости применятся на всю систему, а не только на Safari.

Как насчет нового стандарта?

Всегда пожалуйста. Вот свойство font-display, доступное в Chrome Canary. Оно решает все проблемы, перечисленные в статье. Ещё года 2–3 и можно будет вздохнуть спокойно. 

Я перфекционист, есть ли что еще улучшить?

Конечно! Сожмите файл шрифта, настроив его под себя. Вырежьте глифы, которые вы не используете в текстах (у Регала их по умолчанию более 800). Отключите лишние Open Type Features. Для всего этого вам потребуется специальный софт [1], [2] или [3] и понимание того, как устроены шрифты.

Вывод?

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

Как использовать подчеркнутый текст для улучшения взаимодействия с пользователем — Smashing Magazine

• 10 минут чтения
• UX, Удобство использования, Доступность
• Поделиться в Twitter, LinkedIn

Об авторе

Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он работал в индустрии программного обеспечения, специализируясь на… Больше о Ник ↬

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

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

Исторический контекст

Текст подчеркивался задолго до изобретения Интернета. Он использовался полиграфистами для выделения важных частей текста:

Он использовался в рекламе:

Мы находим его даже в ближайшем окружении. :

Сегодня дизайнеры обычно не подчеркивают текст, потому что такое оформление считается отвлекающим.

Больше после прыжка! Продолжить чтение ниже ↓

Когда Тим Бернерс-Ли впервые представил концепцию Всемирной паутины в 1991 году, он заявил: «[Всемирная паутина] состоит из документов и ссылок». С тех пор ссылки стали фундаментальным элементом онлайн-опыта, связующим звеном, скрепляющим сеть.

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

Подчеркнутые ссылки имеют несколько основных преимуществ:

• Знакомство
  Подчеркивание является одним из наиболее широко известных соглашений в Интернете. Подчеркивание дает сильно воспринимаемую возможность кликабельности — подавляющее большинство пользователей понимают, что подчеркнутый текст — это ссылка.
• Scannabilty
  Подчеркнутый текст — отличная визуальная подсказка, гарантирующая видимость ссылки при сканировании текста. Когда мы сканируем страницы по вертикали, любая горизонтальная линия пересекает линию нашего обзора. Подчеркивание направляет пользователей к важной информации при беглом просмотре.
• Специальные возможности
  Когда для различения кликабельных элементов используется только цвет, у некоторых групп пользователей (например, у дальтоников) могут возникнуть проблемы с идентификацией ссылок. Согласно WCAG 2.0, цвет не должен быть единственным визуальным индикатором потенциального действия. Если вы хотите, чтобы ваш веб-сайт был доступным, вам придется добавить к ссылкам еще одну визуальную подсказку, и подчеркивание является логичным выбором.

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

• Удобочитаемость
  Прерывистый характер подчеркивания отлично подходит для беглого просмотра, но может повлиять на удобочитаемость. Исследование Гамбургского университета показывает, что подчеркивание отрицательно влияет на читабельность текста. Основываясь на исследовании, избегайте подчеркивания, когда основной целью содержания является понимание.
• Эстетика
  Подчеркивания добавляют визуальный шум к тексту и общему дизайну. Большое количество подчеркиваний, разбросанных по всему блоку текста, может создать перегруженный вид.

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

Не подчеркивайте текст, который не является ссылкой

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

Будьте краткими

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

Сделать текст привязки осмысленным

Текст привязки — это интерактивный текст в ссылке. Оно должно быть описательным — пользователи должны иметь возможность предсказать, что они получат, когда нажмут на ссылку. По этой причине избегайте якорного текста, такого как «нажмите здесь», потому что он почти ничего не говорит о содержании ссылки и заставляет пользователей искать дополнительную информацию о том, на что именно они будут нажимать. Ссылки «Нажмите здесь» также делают веб-сайт менее доступным для людей, использующих программы чтения с экрана. Большинство программ чтения с экрана пишут «ссылка» перед каждой ссылкой. Например, ссылка «автомобили» будет прочитана JAWS как «ссылка на автомобили». Таким образом, вы можете ожидать, что JAWS будет читать ссылку «нажмите здесь» как «ссылка, нажмите здесь», что совершенно неинформативно.

Согласно «Руководству для начинающих поисковых систем» Google, размещение слов, предвосхищающих целевую страницу, в начале текста ссылки имеет решающее значение.

Создание ссылок последовательно

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

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

Тем временем CNN Sport использует цвет для визуального различения ссылок:

Избегайте сбоев дессендера

Сбой дессендера, пожалуй, вторая по значимости проблема, вызванная подчеркиванием (после беспорядка). Это происходит, когда символы, содержащие нисходящие элементы (например, строчные p, g, j, y и q), не учитываются, а подчеркивание касается форм букв. Это может привести к загромождению, некрасивому виду и сделать текст менее разборчивым.

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

Как предотвратить проблему сбоя спускаемого аппарата. Ссылки в Интернете оформлены с помощью свойства CSS text-decoration: underline по умолчанию. К сожалению, это свойство не принимает во внимание потомки.

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

Свойство text-decoration-skip пока не поддерживается во всех браузерах. Альтернативы (например, box-shadow ) стоит изучить, если ваш текст трудно читать без него.

Обновление : 8 ноября 2017 г. свойство было переименовано/заменено на text-decoration-skip-ink: с auto в качестве начального значения в Chrome 64.

Цвет

Цвет — мощный инструмент в арсенале дизайнера. Его можно использовать, чтобы отличать ссылки от другого текста.

Избегайте окрашивания неинтерактивного текста

Избегайте окрашивания текста, если это не ссылка, поскольку посетители могут легко спутать цветной текст со ссылкой.

Должны ли ссылки быть синими?

Не обязательно. По словам Якоба Нильсена, «оттенки синего дают самый сильный сигнал для ссылок, но другие цвета работают почти так же». Однако, если вы можете свободно выбирать цвет для ссылок, лучше всего подойдет синий. Это по-прежнему цвет с самым сильным восприятием кликабельности — опытный веб-пользователь ассоциирует «синий и подчеркнутый» со ссылками. И у цвета есть одно существенное преимущество перед другими: он наиболее доступен для людей с цветовым дефицитом (его видят люди, страдающие протанопией и дейтеранопией).

Совет. Поскольку синий цвет тесно связан с кликабельностью, избегайте его для текста, не связанного со ссылкой, даже если синий не является выбранным вами цветом ссылки. Синий текст, на который нельзя кликнуть, вызывает разочарование.

Используйте разные цвета для посещенных и не посещенных ссылок

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

Не подчеркивать списки ссылок

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

Рекомендации для мобильных устройств

Сегодня почти 50% пользователей заходят в Интернет с мобильных устройств. Оптимизация работы в Интернете для мобильных пользователей является главным приоритетом для веб-дизайнеров.

Избегайте ссылок в мобильных приложениях

Не используйте подчеркнутые ссылки в мобильных приложениях. Подчеркнутые ссылки являются частью модели веб-сайта, а не модели приложения. В приложениях должны быть кнопки, а не ссылки.

Сделайте ссылки достаточно большими

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

Заключение

Ссылки делают Интернет таким, какой он есть. В своей классической книге по юзабилити Don’t Make Me Think Стив Круг пишет: «Поскольку большая часть того, что люди делают в Интернете, — это поиск следующей вещи, на которую нужно нажать, важно сделать очевидным, что является кликабельным. а что нет». Надежный визуальный дизайн необходим для того, чтобы сделать путешествие пользователя радостным. Хотя подчеркивание имеет свои недостатки, оно остается одним из наиболее явных способов указать на наличие ссылки. Подчеркивание текста делает ссылки удобными для поиска и понимания посетителями.

• «Создание подчеркиваний ссылок в среде», Марчин Вичари, Medium
• «Создание подчеркиваний в Интернете», Джон Джеймсон, CSS-Tricks

Эта статья является частью серии статей о дизайне UX, спонсируемых Adobe. Инструмент Adobe XD создан для быстрого и плавного процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Дизайн, прототип и публикация — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы быть в курсе последних тенденций и идей для дизайна UX/UI.

Как подчеркивать текст в Word, Excel и PowerPoint

В этом руководстве вы узнаете, как подчеркивать текст в Word, Excel и PowerPoint.

Существует три различных способа подчеркивания текста:

1. Ярлык подчеркивания (рекомендуется)
2. Команда подчеркивания
3. Диалоговое окно «Шрифт»

Хотя все они выполняют одну и ту же задачу, диалоговое окно «Шрифт» дает подчеркивание параметров в Word, Excel и PowerPoint. Как вы можете видеть на рисунке ниже, существует 8 стилей подчеркивания в Word, 16 стилей в PowerPoint и 4 стиля в Excel.

Стоит отметить, что в Microsoft Word можно только подчеркивать слова. А в Word и PowerPoint вы можете изменить цвет подчеркивания (по сравнению с вашим текстом), как показано на рисунке ниже.

Как видите, в Microsoft Office Suite существует множество вариантов подчеркивания текста в зависимости от того, в какой программе вы работаете. Ниже я разбил каждый из них на отдельный раздел, чтобы вы могли сразу перейти к подчеркните стиль, который вы пытаетесь создать.

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

1. Ярлык подчеркивания текста

Самый быстрый способ подчеркивания текста в Microsoft Office Suite (или любом другом текстовом редакторе) — Ctrl+U на ПК и Cmd+U на Mac.

Однократное использование сочетания клавиш применяет эффект подчеркивания. Использование сочетания клавиш во второй раз удаляет эффект подчеркивания.

Примечание: Ctrl+U позволяет добавить к тексту только одно сплошное подчеркивание. Если вы хотите дважды подчеркнуть свой текст или создать эффект пунктирного подчеркивания, вам нужно использовать параметры стиля подчеркивания, обсуждаемые ниже.

2. Команда «Подчеркнуть»

Команда «Подчеркнуть» дает вам больше возможностей, чем описанная выше комбинация клавиш Ctrl+U , поскольку она включает в себя область «дополнительные параметры».

Чтобы расширить свои знания и узнать, как двойное подчеркивание текста в Word с помощью сочетаний клавиш, прочитайте наше руководство здесь.

A. Использование команды «Подчеркнуть»

Еще один быстрый способ подчеркнуть текст в Word, Excel и PowerPoint — просто нажать кнопку «Подчеркнуть».0041 на вкладке Home на ленте.

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

B. Использование параметров стиля команды «Подчеркнуть» в Word

Команда «Подчеркнуть» в Word состоит из двух частей. Нажатие кнопки слева подчеркивает ваш текст (обсуждалось выше), а нажатие направленной вниз стрелки справа дает вам дополнительные параметры стиля линии на выбор.

Чтобы выбрать другой стиль подчеркивания в Word, просто выделите текст и выполните следующие действия:

1. Перейдите на вкладку Главная
2. Щелкните стрелку стиля подчеркивания
3. Выберите стиль подчеркивания

Всего в Word доступно восемь стилей подчеркивания, как показано на рисунке ниже. Чтобы увидеть дополнительные параметры в Excel и PowerPoint, вам нужно будет использовать диалоговое окно Font , обсуждаемое далее.

Примечание:  Если вы сначала не выделите текст, выбранный вами стиль подчеркивания будет применен ко всему тексту, который вы наберете в следующий раз. Чтобы перестать подчеркивать текст, просто щелкните команду еще раз или нажмите Ctrl+U на клавиатуре.

3. Подчеркивание текста с помощью диалогового окна «Шрифт»

Существует несколько способов открыть диалоговое окно «Шрифт». Самый простой (и самый быстрый способ) — использовать ярлык диалогового окна «Шрифт». Этот ярлык работает в Word, Excel и PowerPoint, так что это ярлык с тройным ковшом.

Другой способ открыть диалоговое окно Font — щелкнуть диагональную стрелку в углу группы Font. Нажатие на эту стрелку выполняет ту же задачу.

В качестве совета по тренировке скорости — хотя нет никакой разницы между использованием сочетания клавиш и щелчком по диагональной стрелке, поскольку сочетание клавиш значительно быстрее, я рекомендую изучить сочетание клавиш Ctrl+Shift+F .

Как вы можете видеть на картинке выше, внутри диалогового окна Font вы можете:

1. Выберите стиль подчеркивания
2. Выберите цвет подчеркивания

Диалоговое окно «Шрифт» также содержит ряд других текстовых эффектов, таких как зачеркивание, двойное зачеркивание и т. д. Диалоговое окно «Шрифт» также является хитростью для подчеркивания слов только в Microsoft Word.

Чтобы расширить свои знания и узнать, как быстро зачеркивать текст в Word, Excel и PowerPoint, прочитайте наше руководство здесь.

Как подчеркивать только слова в Word

Microsoft Word позволяет подчеркивать только слова. Это означает, что вам не нужно выделять слова по отдельности и применять подчеркивание для создания нужного эффекта.

Чтобы подчеркнуть слова только в Word, просто:

1. Выберите текст
2. Откройте диалоговое окно «Шрифт» (Ctrl+Shift+F)
3. Откройте параметры Стиль подчеркивания
4. Выберите Только слова
5. Нажмите OK

При этом создается эффект «только подчеркивание слов», и вам не нужно делать это вручную. Вы также можете изменить цвет подчеркивания, как вы увидите в следующем разделе.

Примечание: Этот параметр подчеркивания  Только слова не существует в PowerPoint или Excel. Если вы хотите создать такой же эффект в этих программах, вам нужно будет подчеркивать слова по отдельности или делать скриншот текста в Word и использовать его в других программах.

Как изменить цвет подчеркнутого текста

В Word и PowerPoint вы также можете выбрать цвет подчеркивания, отличный от вашего текста. Это не работает в Microsoft Excel.

Чтобы изменить цвет подчеркнутого текста, просто:

1. Выберите ваш текст
2. Откройте диалоговое окно Шрифт ( Ctrl+Shift+F )
3. Откройте Цвет подчеркивания опции
4. Выберите цвет подчеркивания (я выбрал красный)
5. Щелкните OK

При выборе цвета подчеркивания, отличного от цвета шрифта, лучше не выбирать трудночитаемые цвета.