РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Подбор шрифта и верстка текста


Подбор шрифта и верстка текста

1. Для чего это нужно

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

2. Термины

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

Шрифт - гарнитура определенного кегля и начертания. (упустим межсимвольные интервалы и интерльяж. Они нам не пригодяться)

Кегль - размер гарнитуры подобранный для данного шрифта. Измеряется в пунктах.

Начертание - стиль написания гарнитуры. Например - полужирный, италик (наклонный) или одновременно и то и другое.

Гарнитура - совокупность литер (символов), обедененных одним стилем и общей идеей. Например Times или Arial.

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

С терминами техническими разобрались, теперь определимся с описанием гарнитур. Все они деляться на гарнитуры с засечками и без них. Теперь не трудно догадаться, что значат непонятные serif и sans serif, так часто виденные вами после названия гарнитуры(взгляните на MS Serif и на MS Sans Serif и вы поймете о чем я). Вот в принципе и все теперь переходим к изучению азов шрифтового дизайна.

3. Уместное использование

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

Гарнитуры с засечками намного более функциональны. Благодаря именно своим засечкам, они позволяют набирать тексты небольшого размера (в 10-12 пункиов) с потерей читабельности равной нулю. Но к огромному сожалению такие шрифты в своем большинстве не выразительны. Для заголовка лучше выбирать рубленый шрифт. Ну, а если, какие-то неведомые силы (в виде стилиста например) не позволяют вам менять шрифт, тогда стоит прибегнуть к какому-нибудь приему выделения, о каторых я раскажу чуть ниже.

Существует еще и третий вид гарнитур. Декоративные. При работе с ними будте предельно осторожны! При всей своей красоте и изящьности у них есть один сильный недостаток - их трудно читать. Чаще всего декоративные шрифты используются в логотипах и для создания внутреннего настроения на веб-странице (например страницы с древне-русской тематикой используют старославянские гарнитуры и т.д.).

Теперь проведем маленький, но очень наглядный эксперимент, который продемонстрирует особенности таких известных гарнитур, как Times (с засечками) и Arial (рубленый).

Заголовок Times Заголовок Arial
текст этой ячейки набран гарнитурой Times при размере в десять пунктов и при нормальном начертании. текст этой ячейки набран гарнитурой Arial при размере в восемь пунктов и при нормальном начертании.

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

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

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

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

Пример выворотки

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

Теперь я немного расскажу о приемах выделения текста на общем фоне публикации. Их немного. Это отчасти обусловленно тем, что менять гарнитуру или кегль посреди текста, а потом возвращать обратно просто противопоказанно! При выделении текста мы будем пользоваться лишь начертаниями.

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

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

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

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

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

4. Верстка в колонки

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

Наиболее популярным типом верстки HTML страниц на сегодняшний момент является табличная верстка. На самых известных новостных сайтах мы видим, что текст разбит на колонки. Причем одна колонка отводиться для основного текста, а другая для так называемых "приманок". "Приманкой" - называется краткая анотация статьи. Например при входе на этот сайт вы наверное видели краткое описание этой статьи, а возможно именно из за приманки вы ее сейчас и читаете. Ладно, я отвлекся. Второе применение малой колонки (если приманок нет или они попросту ненужны) сводиться к становлению навигации сайта. Там могут распологаться ссылки, новости, а с приходом новых стандартов от RLE еще и баннеры. Вопрос, как построить эту колонку многих ставит в тупик. Однако существуют старинные правила верстки текста. Итак, если вы отводите малую колонку под текст ее размер вышитывается следующим образом. Выбираете гарнитуру, кегль, начертание и пишите следующую фразу:

abcdefghijklmnopqrstuvwxyzabcdefghijklm

Именно такая ширина является оптимальной для данного шрифта. Однако при размере стандартной страницы в 620 пикселей это слишком много. Если вас это не устраивает возьмите самое длинное слово вашего текста и напечатайте его полтора раза (как в случае с алфавитом).

При использовании колонки для размещения ссылок держите ее ширину от 130 до 150 пикселей. Немного, но и немало.

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

Подбор шрифта и верстка текста | | 2011-05-13 11:40:55 | | Статьи Web-мастеру | | 1. Для чего это нужно О шрифтах, их особенностях и об их разработке написанно немало, однако такая тема, как их уместное использование - осталась в тени. И вполне незаслуженно. Правильно подобранный | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации


Услуги интернет компании Редлайн

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

Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ

Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

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

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

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

Что нужно сделать, чтобы заказать создание сайта у нас?

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

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

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

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

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

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

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

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

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

Адаптивный дизайн сайтов и веб-приложений

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

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

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

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

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×