Разбиране на писането за типографията в мрежата

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

В тази статия бих искал да се запозная със сферата на уеб типографията. Ще разгледаме популярни идеи зад проектирането на надеждни текстове на уеб страници. По пътя ще ви представя няколко полезни CSS3 свойства които дизайнерите често забравят.

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

Измерете параграфите си

Няма да ви се налага да отстранявате дворния пръчка за този вид измерване. Всъщност мярката по отношение на типографията се отнася до ширината (хоризонтално) на даден параграф на вашата страница. Това не е тема, която винаги се обсъжда, но влияе върху четивността на съдържанието ви. Като общо правило искате да ограничите всеки един ред с дължина около 75-85 знака (не е задължително да включва интервали).

Сега, това може да изглежда като малко разтягане за някои по-широки оформления. Особено ако вашият дизайн е течен и е предназначен да се адаптира, тъй като потребителят преоразмерява прозореца на браузъра си. Винаги можете да зададете CSS макс ширина собственост на главното ви съдържание div. Маржовете на кодиране и размерите на шрифтовете в мащабируеми единици (проценти, ems), а не пиксели ще позволят такава гъвкавост във всяко оформление.

Няма максимална единица мярка, за която да се внимава. Начинът, по който пишете съдържанието и думите с формуляри в изречения, е много по-важен от ширината на всеки ред. Но имайте предвид, че по-дългите изречения са много по-трудни за четене в сравнение с по-кратки, кратки изявления.

Водещо обяснено

При проектирането, заедно с мярката за параграфа, трябва да помислите и за идеята водещ. Думата се произнася “ledd-ING”, като олово, използвано в моливи. Това наименование произхожда от по-старите дни на механичното набиране, където между редовете на текста се поставят ленти от олово.

Воденето все още е много важна концепция в уеб дизайна и върви ръка за ръка с мерките по параграф. С увеличаването на ширината на абзаца трябва да приложите еднакво увеличение на количеството водещи или интервал между редовете от текст. Това допълнително пространство прави четенето много по-лесно на очите ви.

Ако трябваше да прелиствате много плътно навит текст, може да ви е трудно да се съсредоточите върху една линия. Ако случаят е такъв, опитайте да увеличите количеството водене с CSS височина на линията Имот. Винаги искате повече място между текстовите редове, отколкото между думите. В противен случай текстовите блокове могат да се появят като вестникарски печат и няма да бъдат много лесни за употреба, за да ги прегледате.

Една солидна техника е да се прилага повече място от първоначално необходимото и да се намали, ако е необходимо. Не всички текстове се създават еднакви и със сигурност ще ви трябват параграфи с различно вътрешно форматиране, като напр. Получерни думи, котви връзки, подчертавания и т.н..

Използвайте размера на естествените шрифтове

Все още има няколко уебсайта, които избират да се придържат към по-малки от средния размер на шрифта. 11px-12px може да изглежда много повече от “стандартен професионален” за бизнес оформления. Но тези размери не помагат на повечето посетители, които търсят специфична информация.

Обикновено уеб браузърите по подразбиране са 16px, ако не приложите правила за CSS. Дори и това може да се смята за малко малко, ако имате допълнителна стая в оформлението, която да побере по-голям текст. По-големите размери на шрифта изглеждат по-добре и са много по-лесни за преглеждане на относителни ключови думи. Шрифтовете със серифи често не се избират като материал за абзаци, но все още можете да се измъкнете с тях. Предлагам да използвате много по-големи размери за шрифтове, базирани на серифи, за да подобрите четливостта и да привлечете вниманието.

Отговаряйте на околната среда на потребителя

Докато изпробвате различни семейства и размери на шрифтовете, областта на съдържанието ще трябва да се адаптира съответно. Стандартната единица, с която се придържам, е EMS тъй като те лесно могат да преизчисляват размера си въз основа на наличното пространство и разделителната способност на екрана. Това оптимизира работата на крайния потребител, което е най-важно.

Но когато имате толкова гъвкаво съдържание, това прави оформлението ви склонно към грешки. В някои браузъри съдържанието в областта на долния или страничния панел може да се окаже изкривено или небалансирано. Или може да имате затруднения да подреждате изображения или други форми на медии в основния си текст. Има и някои други алтернативи за използване на ems, ако имате нужда от оформление с фиксиран стил, но опитайте и двете решения, за да видите кой най-много ви харесва.

Не забравяйте, че фиксираните размери и размери на абзаци ще блокират много настройки в дизайна ви. Това е чудесно за съдържание, което включва много стационарни естетически ефекти - мислете за фонови изображения или много от приспособленията за страничната лента. Също така е прост процес за изграждане на област с флуидно съдържание в лявата колона с фиксирани странични ленти вдясно.

Стил на основата на контекста

Някои други наистина чисти CSS трикове са скрити от основния дизайн. Конкретно има тенденции, копирани от печатни произведения, които могат да бъдат приложени в правилния контекст.

Много уеб дизайнери никога дори не са използвали CSS свойствата с текстови отстъп. Предоставяте стойност за отстъп на първия ред от всеки абзац, насочен от това правило. Единиците следват стандартните текстови опции като пиксели, точки, ems, проценти… Това със сигурност не е тенденция, която ще намерите в повечето блогове. Но той осигурява хубав страничен ритъм, докато четете през големи блокове текст.

Има друг тип селектор CSS, известен като a псевдоелемент. Това може да е насочено към определена част от всеки селектор на съдържание. Псевдоселекторът CSS3: първа буква е идеален за създаване на фантастични стилове по важни параграфи. Можете да джаз отворите на всеки параграф - подобно на доста приказка история - с помощта на получер, курсив, или дори промяна на шрифта. Проверете този красив пример за капки, който включва някои допълнителни CSS код, който можете да използвате.

Възпроизвеждане с разстояние между букви

Сигурен съм, че много от нас са чули термина "проследяване", но никога не са осъзнали, че това е същата идея като имуществото на CSS letter-spacing. Тези две концепции са еднакви, свързани с печатни и цифрови типографии. Устройството е свързано с пространството между буквите в рамките на всеки един ред текст. Това е наистина чист ефект за прилагане на заглавки и дори някои по-малки блокове съдържание в сайта Ви.

Важно е да не се объркват термините "разстояние между буквите" и "кърнинг". И двете са свързани с типографията и разстоянието между буквите. Обаче кърнингът се отнася конкретно до разстоянието между две отделни букви в една дума. Свойството на разстоянието между буквите ще се прилага за цял елемент текст, било то дума или абзац, или заглавна или анкерна връзка. Имайте това предвид, когато играете с нови идеи за стилове.

Често използвам няколко пиксела / точки с разстояние между буквите в заглавките с всички главни букви. Това разделя отделните символи с малко допълнително пространство и също така изглежда като много дефинирано “заглавие” виж. Отрицателното разстояние между буквите също работи чудесно в правилния контекст. Аз обикновено се придържам към по-малки единици, може би -0.03em или -0.1em най-много.

Комбиниране и съвпадение на шрифтове

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

Досега най-популярната комбинация от шрифтове включва разделяне на serif / sans-serif за съдържанието на заглавната част и параграфа. Обичам да превключвам и двете, но по-често ще използвам шрифтове serif в заглавните раздели. Допълнителните маркировки и инсулти на всяка буква правят ги по-лесни като доминиращия текст на страницата.

Освен това безсерифните шрифтове са по-чисти и по-лесни за изрязване в изречения. Това не означава, че шрифтовете със серифи няма да работят в параграфи. Всъщност има много добри примери! Но малко позната концепция, наречена x-height, е от решаващо значение за разграничаване на сложността на шрифта. От разглеждането на базовата линия на няколко думи ще разберете как ще бъдат тези шрифтове “пасва” един с друг.

Заслужава да се отбележи и значението на пространството между тези различни елементи. Вероятно ще използвате 2 или 3 различни стила на заглавието, така че всеки от тях ще излезе с различен външен вид. Склонен съм да запазя елементите на h2 / h3 малко по-близо до следващия абзац, тъй като това означава, че има връзка между съдържанието.

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

заключение

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

Следващата седмица: Останете на вълната, тъй като ще разгледаме някои полезни инструменти и ресурси за по-добра уеб типография.

Повече ▼…

Ето още публикации, свързани с типографията:

• Витрина на уеб дизайн с красива типография
• По-добра типография за съвременни сайтове
• Бързо ръководство за типография: Научете и бъдете вдъхновени