Подивіться на кращу типографію для сучасних веб-сайтів

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

Багато професійних веб-дизайнерів написали на цю тему, включаючи оновлені функції та послуги. Ви повинні розглядати кожну веб-сторінку як єдиний документ, який розриває ваш кореневий макет. З цієї точки зору легко зрозуміти, як типографіка може витікати з сторінки на сторінку і запропонувати унікальний вихід для творчості. І це стає особливо очевидним створенням унікальних класів для ваших абзаців і заголовків.

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

Відмінності в сучасному Інтернеті

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

Тепер цілком можна включити власні шрифти з CSS @ font-face власності. Ви можете використовувати будь-який TrueType(.ttf) або OpenType(.otf) файл і зберігати копію локально на вашому сервері. Тоді з деякими CSS3 магії включити сім'ю в будь-якому місці на вашій сторінці!

Тільки за цією методикою можна побачити, наскільки розвинений наш сучасний Інтернет.

І з jQuery зростає популярність щодня, це не дивно, що ми можемо створити вражаючі ефекти анімації в поєднанні зі спеціальними шрифтами. В якості альтернативи методу вище TTFGen плагін для jQuery дозволяє включати будь-який шрифт TrueType на вашу веб-сторінку.

Цей метод є трохи більш надійним, оскільки вам не потрібен сучасний браузер, що підтримує стандарти CSS3, щоб він працював. Але, звичайно, попередні браузери, такі як Internet Explorer 6, будуть боротися за візуалізацію.

Але слава богу, більшість користувачів перейшли на нові програми для перегляду, які підтримують ці стандарти! І коли ви розробляєте для веб, ви повинні розглянути, хто саме ваш ринок для. Ви не можете радувати всіх весь час, але ви можете бути впевнені, що намагаєтеся наблизитися.

Мета цифрової типографії

Начебто дивної ідеї розглянути, але що є реальною метою цифрового тексту? Передати інформацію, поділитися джерелами та запропонувати свою думку світові користувачів Інтернету. Текст є найпростішою формою ЗМІ для обміну думками та ідеями. Але це також дуже складний і містить основні деталі, які фотографії / відео просто не можуть використовувати.

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

Якщо ви пишете статтю або підручник, вам потрібно використовувати ясну мову. Його так само важливо, як виглядає текст вашої сторінки і якість вашого вмісту. Чим більше текст з'являється, тим простіше читати та шукати ключові слова. А оскільки пункти будуть містити більшість вмісту, ви повинні витрачати багато часу на створення прототипів для правильного підбору. Параметри використовуються для передачі вашого повідомлення в шматки розміром біта, розбиті на пропозиції. Зрозумійте, як ви пишете і плануєте заздалегідь, щоб отримати відповідний макет сторінки.

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

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

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

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

Одним з найважливіших засобів для веб-типографіки є теги заголовків. Якщо ви не знайомі з заголовками HTML від

до

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

Незважаючи на те, що стандартна специфікація HTML5 містить до 6 різних стилів заголовків, я рекомендую використовувати між 3-4. Не обов'язково включати їх на свої сторінки. І навряд чи ви знайдете використання для 6 різних заголовків. Під час першого засідання, щоб створити свій стиль, спробуйте скласти кілька прикладів для заголовків, щоб побачити, що вам подобається.

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

Наприклад, ваш

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

і

є найбільш популярними тегами та рекомендовані Google для сканування вмісту сторінки. Використання дизайнерських ефектів, таких як напівжирний шрифт, підкреслення, пунктирні межі або різні кольори, допоможе вашим заголовкам зійти з сторінки.

Інтервал також важливий коли йдеться про заголовки або будь-який фрагмент вашого вмісту. Переконайтеся, що ви додаєте додаткові поля між заголовками та основним вмістом. Якщо ви зробили свій шрифт достатньо великим, кожен заголовок повинен виділятися як його власний блок. Цей вигляд ідеальний, якщо ви хочете привернути увагу читачів чітким повідомленням.

Створення унікальних гіперпосилань

Є багато чого сказати на тему посилань на сторінки. Так чи інакше вам доведеться використовувати гіперпосилання у вашому коді. Вони надзвичайно важливі як головний інтерфейс навігації між різними сторінками вашого сайту. Ви також можете перейти за посиланням на інші блоги або навіть на архівні публікації блогу для довідки пізніше.

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

Коли ви збираєтеся стилювати свої посилання, вам слід розглянути наступне - як виглядатимуть зміни у налаштуванні сторінки, який тип кольору фону ви працюєте, і який колір є текстом для контрасту?

Посилання повинні відображатись незрозуміло, як елементи, які можна натиснути - адже це їхня функція. Ось чому старий синій з ефектом підкреслення працює так добре. Але якщо ви виявите, що альтернативний колір працює краще, ви повинні спробувати його. Існує не один-розмір-підходить-все рішення для дизайну посилання. Просто перегляньте веб-сторінки трохи, і ви, безумовно, зібрати щось видатне.

Однією з цікавих моментів є кілька особливостей, які ви повинні спробувати уникнути. Такі речі, як зміна сімейства шрифтів тексту або розмір шрифту може бути дуже дратує. Це призведе до спотворення та переміщення тексту, що може поставити курсор миші прямо з зони зв'язку. Подібним чином слід уникати додавання додаткових полів / доповнень до ваших посилань або ефектів наведення. Вони працюють набагато краще, коли ви залишаєтеся простими. Зміна кольору або додавання підкреслення є великим у користуванні.

Побудова стилізованих списків

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

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

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

Як створювати котирування на сторінці

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

Веб-сайт HTML5 Doctor містить захоплюючий ресурс для обговорення цієї точної теми. Вони обговорюють використання вмісту всередині блоковихцитат, що з'являються в структурі документа. Таким чином, ви можете також включати заголовки, абзаци і навіть списки і колонтитули. Основне використання a