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

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

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

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

    Нижче я розглядаю деякі фантастичні ідеї для дизайнерів-початківців, зацікавлених у створенні веб-сторінок. Блоги, соціальні мережі та компанії завжди прагнуть оновити свій поточний веб-сайт. Стилі 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

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

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

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

    Використання власних веб-дизайнів

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

    Як альтернатива typekit є фантастичний конкурент, який пропонує безкоштовний план. На вашій сторінці має бути щомісячне переглядання сторінки під 25 тисяч переглядів сторінок і доступ до випробувальної бібліотеки шрифтів. Найвищий доступ до членства - це повна бібліотека, яка коштуватиме $ 49 / рік на необмежених сайтах.

    Я буду ходити вас через швидку установку обох починаючи спочатку з Typekit.

    Тип

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

    Якщо ви хочете перейти на свій сценарій, введіть URL-адресу кореневого домену без http: //. Ви також можете запропонувати localhost, якщо ви будете тестувати на вашому комп'ютері.

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

    Для стилів CSS Typekit автоматично створить селектор. Типово, це тип класу, який включає в себе ім'я шрифту, з яким вставлено префікс “tk-“. Так, наприклад, за допомогою Sovba я б просто включив клас tk-sovba на будь-який вміст сторінки. Ви також можете додати нові селектори, специфічні для таблиці стилів сторінки.

    Все, що вам потрібно зробити, це включити цей клас десь у вашу сторінку. Оновити та переконайтеся, що ви очистили кеш, якщо ніщо не з'явилося одразу. Щоб оновити список, їхні сервери можуть зайняти до 5-10 хвилин. Для всіх користувачів WordPress вони пропонують безкоштовний плагін typekit, що значно полегшує включення шрифтів.

    Шрифти Google Web

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

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

    Постарайтеся обмежитись максимальним використанням шрифтів 1-3, максимум 5. Після вибору шрифтів Google запропонує вам 3 різні стилі вбудовування:

    • Класичний CSS,
    • @import CSS, і
    • Включити JavaScript

    The @import прекрасно працює безпосередньо у вашій основній таблиці стилів. Це дозволить прояснити багато місця у вашому заголовку, особливо, оскільки заява Google включена буде переміщена в іншому місці. Я б не рекомендував код JavaScript, оскільки він дуже тривалий і набагато повільніше, ніж будь-який з стилів CSS. Але зауважте, що Google не створює для вас селектори та класи за умовчанням.

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

    Як приклад, включаючи сімейство шрифтів Varela Round, буде працювати так: сімейство шрифтів: 'Валера Круглий', Helvetica, Arial, sans-serif;

    Це одна з причин, чому я користуюся послугою Google через Typekit. Не кажучи, що Typekit бракує в варіантах або тактиці юзабіліті. Але компанія Google може запропонувати набагато більше типів облич, і ви можете вибрати, які класи / ідентифікатори зможуть відображати їх. Як веб-розробник ви отримуєте більше креативності і рухливості руху, щоб побудувати, як ви вважаєте за потрібне.

    Висновок + Ресурси

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

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

    • Додатки для оформлення WordPress для підвищення читабельності
    • Короткий посібник з типографіки
    • Красиві шрифти для заголовків і заголовків
    • Дизайн списку меню CSS
    • Складіть вертикальний ритм
    • 32 Надихаючі приклади дивовижної схеми та типографії
    • Легка користувальницька веб-типографія з API шрифтів Google
    • Техніка тиснення тексту за допомогою CSS
    • 10 принципів для читання веб-типографіки
    • Веб-дизайн Basix: Чому питання типографіки має значення
    • Вітрина красиві типографіки в веб-дизайн
    • Веб-типографія: служби вбудовування шрифтів
    • 5 простих способів поліпшити веб-типографію
    • Заміна динамічного тексту / зображення