Взгляд в лучшую типографику для современных сайтов

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

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

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

Отличия в современном интернете

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

Теперь полностью возможно включить ваши собственные шрифты с CSS @ Шрифт-лицо имущество. Вы можете использовать любой TrueType(.ttf) или OpenType(.otf) и храните копию локально на вашем сервере. Затем с помощью магии CSS3 включите семью в любом месте на вашей веб-странице!

Только по этой методике можно увидеть, насколько развит наш современный Интернет..

И с ростом популярности jQuery с каждым днем ​​неудивительно, что мы можем создавать поразительные анимационные эффекты в сочетании с пользовательскими шрифтами. В качестве альтернативы методу, описанному выше, плагин TTFGen для jQuery позволяет включать любой шрифт TrueType на веб-страницу..

Этот метод немного более надежен, так как вам не нужен современный браузер, поддерживающий стандарты CSS3, чтобы он работал. Но, конечно, устаревшие браузеры, такие как Internet Explorer 6, будут изо всех сил пытаться сделать правильно.

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

Цель цифровой типографии

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

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

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

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

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

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

Заголовки веб-страниц

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

в

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

Несмотря на то, что стандартная спецификация HTML5 включает в себя до 6 различных стилей заголовков, я бы рекомендовал использовать 3-4. Не обязательно включать их всех на своих страницах. И очень маловероятно, что вы найдете применение для 6 различных заголовков. Когда вы впервые садитесь за свои стили, попробуйте составить несколько примеров заголовков, чтобы увидеть, что вам нравится.

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

Например, ваш

теги должны выделяться больше всего среди всех заголовков вашей страницы.

а также

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

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

Создание уникальных гиперссылок

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

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

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

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

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

Построение стилизованных списков

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

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

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

Как создавать цитаты на странице

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

Веб-сайт HTML5 Doctor содержит увлекательный ресурс для обсуждения именно этой темы. Они обсуждают использование контента внутри кавычек как внутреннее в структуре документа. Таким образом, вы также можете включать заголовки, абзацы и даже списки и нижние колонтитулы. Основное использование