Розуміння написання типографіки для Інтернету
У веб-дизайні тема типографіки важлива при розгляді всіх сфер користувацького досвіду. Кожен веб-сайт має потребу в тексті, і є рекомендації, які можна дотримуватися для створення надзвичайно приголомшливих макетів. Сетки, написи, висота шрифту, інтервал тексту, кольорові схеми та інші подібні властивості повинні бути враховані.
У цій статті я хотів би заглибитися в сферу веб-типографіки. Ми розглянемо популярні ідеї, що стоять за розробкою надійних текстів веб-сторінок. По дорозі я познайомлюся з кількома корисні властивості CSS3 які дизайнери часто забувають.
Я намагався більше зосередитися на теорії та ідеології для Інтернету. Це дає більш широкий акцент на цифровий текст в цілому, і ви, веб-дизайнер може тоді вибрати, які стилі застосовувати для якої мети. Контекст завжди є ключовим, і ви повинні визначити це належним чином для кожного проекту, над яким ви працюєте. Розглянемо це керівництво як повний пакет сучасних веб-тенденцій від друкарських новаторів по всій планеті.
Виміряйте свої абзаци
Вам не потрібно буде виламувати палицю для цього виду вимірювання. Насправді міра по відношенню до типографіки відноситься до ширини (по горизонталі) будь-якого даного абзацу на вашій сторінці. Це не тема, яка завжди обговорюється, але вона впливає на читаність вашого вмісту. Як правило, потрібно обмежити будь-який рядок довжиною 75-85 символів (не обов'язково включаючи пробіли).
Зараз, це може здатися трохи розтягують для деяких більш широких макетів. Особливо, якщо ваш дизайн є рідким і призначений для адаптації, оскільки користувач змінює розміри свого вікна браузера. Ви завжди можете встановити CSS max-width властивість вашого основного вмісту div. Поля кодування та розміри шрифтів у масштабованих одиницях (відсотках, ems), а не пікселях, дозволять таку гнучкість у будь-якому форматі.
Немає ніякої максимальної одиниці виміру, яка повинна бути обережною. Як ви пишете вміст і слова у формах речень набагато важливіше, ніж ширина кожного рядка. Але майте на увазі, що більш довгі речення набагато складніше читати в порівнянні з більш короткими, лаконічними заявами.
Провідний пояснюється
При розробці, поряд з вашим пунктом, необхідно також розглянути ідею провідний. Слово вимовляється “ledd-ing”, наприклад, свинець, що використовується в олівцях. Ця назва походить від старих днів механічного набору, де смуги свинцю розміщувалися між рядками тексту.
Ведуча все ще є дуже важливою концепцією у веб-дизайні і йде рука об руку з заходами параграфа. При збільшенні ширини абзацу слід застосовувати рівне збільшення кількості провідних або пробіл між рядками тексту. Цей додатковий простір полегшує читання на ваших очах.
Якщо ви проскакували дуже щільно намотаний текст, вам буде важко зосередитися на одній лінії. Якщо це так, спробуйте збільшити обсяг керування за допомогою CSS висота рядка власності. Ви завжди бажаєте більше місця між рядками тексту, ніж між словами. Інакше ваші текстові блоки можуть з'явитися як друк газети і не будуть дуже зручними для перегляду.
Суцільна техніка полягає в тому, щоб застосувати більше місця, ніж спочатку потрібно, і зменшити його, якщо це необхідно. Не всі тексти створюються рівними, і вам, безумовно, знадобляться абзаци з різним внутрішнім форматуванням, наприклад напівжирним шрифтом, якірними посиланнями, підкресленнями тощо. З деякими додатковими переходами ці зміни не відчуватимуться в рівновазі в порівнянні з іншим текстом.
Використовуйте розміри природних шрифтів
Існує ще кілька веб-сайтів, які вибирають розмір шрифту меншого за середнє. 11px-12px може виглядати набагато більше “стандартний професійний” для макетів підприємств. Але ці розміри не допомагають більшості відвідувачів, які шукають конкретну інформацію.
Як правило, веб-переглядачі за умовчанням не перевищують 16px. Навіть це може вважатися трохи малим, якщо у вас є додатковий номер у вашому макеті для розміщення більшого тексту. Більші розміри шрифтів виглядають краще і набагато простіше відсканувати для відповідних ключових слів. Шрифти-шрифти не часто вибираються в якості матеріалу абзацу, але ви все одно можете з ними потрапити. Я пропоную використовувати набагато більші розміри тексту для шрифтів, заснованих на зарубках, щоб покращити читабельність і привернути увагу.
Реагуйте на навколишнє середовище користувача
Під час випробування різних сімей і розмірів шрифтів ваша область вмісту повинна адаптуватися відповідно. Стандартний блок, з яким я дотримуюся, - це ems оскільки вони можуть легко змінювати розмір на основі доступного простору та роздільної здатності екрана. Це оптимізує продуктивність користувача, що є найбільш важливим.
Але коли ви маєте вміст настільки гнучким, це робить ваш макет схильним до помилок. В деяких веб-переглядачах вміст у нижній або нижній частині бічної панелі може призвести до перекосу чи небалансу. Або у вас можуть виникнути труднощі, пов'язані з вибудовуванням зображень або інших форм медіа в основному тексті. Існують інші альтернативи використання ems, якщо вам потрібна макет фіксованого стилю, але спробуйте обидва рішення, щоб побачити, який саме вам більше подобається.
Пам'ятайте, що фіксовані розміри та розміри абзаців заблокують багато налаштувань у вашій конструкції. Це відмінно підходить для вмісту, який містить багато стаціонарних естетичних ефектів - думаю, фонові зображення або багато встановлених бічних панелей віджетів. Це також простий процес побудови області вмісту рідини в лівій колонці з фіксованими бічними панелями праворуч.
Стиль на основі контексту
Деякі інші дійсно акуратні трюки CSS були приховані від основного дизайну. Зокрема, існують тенденції, скопійовані з друкованої роботи, які можуть бути застосовані в належному контексті.
Багато веб-дизайнерів ніколи навіть не використовували CSS-властивість відступу тексту. Ви надаєте значення для відступу першого рядка будь-якого абзацу, націленого цим правилом. Одиниці слідують за стандартними параметрами тексту, такими як пікселі, точки, ems, відсотки… Це, звичайно, не тенденція, яку ви знайдете в більшості блогів. Але він забезпечує хороший ритм сторінки при читанні великих блоків тексту.
Існує ще один тип селектора CSS, відомий як a псевдоелемент. Це може бути націлено на певну частину будь-якого селектора контенту. Псевдоселектор CSS3: перша буква ідеально підходить для створення фантастичних стилів на важливих абзацах. Ви можете джазувати початковий лист кожного абзацу - подібно до досить історійної історії - використовуючи жирний шрифт, курсив або навіть змінюючи шрифт. Ознайомтеся з цим прекрасним прикладом папок, що містить додатковий код CSS, який ви можете використовувати.
Гра з інтервалами літер
Я впевнений, що багато хто з нас почули термін відстеження ще до того, як ніколи не зрозумів, що це та ж ідея, що і властивість CSS letter-spacing. Ці дві концепції одна в одній, пов'язані між друкованою та цифровою типографікою. Пристрій відноситься до простору між буквами в межах однієї рядки тексту. Це дійсно акуратний ефект для застосування на заголовках і навіть деяких невеликих блоках вмісту на вашому сайті.
Важливо не плутати терміни літер-інтервал з кернінгом. Обидва вони пов'язані з типографікою та відстанню між літерами. Проте кернінг конкретно відноситься до відстані між 2 окремими літерами в слові. Властивість відступу букв застосовуватиметься до весь елемент тексту, будь то слово або абзац або заголовок або посилання прив'язки. Майте це на увазі, коли ви граєте з новими ідеями для стилів.
Я часто використовую декілька пікселів / точок міжряддя в заголовках з усіма великими літерами. Це розбиває окремих символів з деяким додатковим простором, а також з'являється як дуже визначений “заголовок” дивитися. Від'ємний інтервал листів також чудово працює у правильному контексті. Я взагалі дотримуюся менших одиниць, можливо -0.03em або -0.1em не більше.
Комбінування та відповідність типів
Концепції дизайну веб-типографіки, безумовно, є формою мистецтва, не стільки наукою. Є рекомендації, за якими можна керуватися, але не існує стійких правил, з якими ви обмежені. Це означає, що ви маєте величезну свободу експериментувати і змінювати шрифти, до яких ви маєте доступ.
Найбільш популярною комбінацією шрифтів є розріз serif / sans-serif для вмісту заголовків і абзаців. Мені подобається перемикатися на обидва, але частіше я буду використовувати шрифти із засічками в розділах заголовка. Додаткові відмітки та штрихи на кожній букві роблять їх більш приємними, ніж домінуючий текст сторінки.
Крім того, шрифти без засічок є більш чистими та простішими, щоб згорнути разом у реченнях. Це не означає, що шрифти-зарубки не працюватимуть у параграфах. Насправді є багато чудових прикладів! Але маловивчене поняття під назвою x-height має вирішальне значення для розрізнення складності шрифту. Від перегляду базової лінії слів ви знайдете, як такі шрифти будуть “вписатися в” один з одним.
Варто також відзначити важливість простору між цими різними елементами. Ви, ймовірно, будете використовувати 2 або 3 різних стилю заголовка, так що кожен з них буде відмінним. Я намагаюся тримати елементи h2 / h3 трохи ближче до наступного блоку абзаців, оскільки це означає, що існує кореляція між вмістом.
Ця кореляція особливо корисна, коли ви використовуєте два абсолютно різних шрифтів поруч один з одним. Я рекомендую не більше 3 різних сімей шрифтів на набір вмісту. Після занадто великої кількості налаштувань ваші слова збігаються, а вся сторінка виглядає схожою на невідповідний шрифт.
Висновок
Я сподіваюся, що ці поняття прольють світло на складний предмет цифрової типографіки. Це може бути важко реально потрапити в роботу в якості дизайнера, особливо якщо вся тема є іноземною для вас. Але продовжуйте вивчати і переконайтеся, що практикуєте цілу купу!
Наступного тижня: Залишайтеся з нами, оскільки ми розглянемо деякі з них корисні інструменти та ресурси для кращої веб-типографіки.
Більше…
Нижче наведено додаткові публікації, пов'язані з типографікою:
- Вітрина веб-дизайнів з красивою типографіки
- Краща типографія для сучасних веб-сайтів
- Короткий посібник з типографіки: навчитися і бути натхненним
