Поглед към по-добра типография за съвременни сайтове

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

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

По-долу ще разгледам някои фантастични идеи за начинаещи типографски дизайнери, които се интересуват от изграждането на мрежата. Блоговете, социалните мрежи и фирмите винаги търсят да актуализират текущия си уебсайт. 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 различни заглавия. Когато за първи път седнете, за да изградите стиловете, опитайте да напишете няколко примера за заглавия, за да видите какво искате.

Photoshop е отличен за този сценарий. Можете също да опитате да кодирате различни заглавия в HTML, за да видите как изглеждат в браузъра. Това, което е важно, е да се работи с потока от страници и дизайн заглавия според техния ранг.

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

етикетите трябва да се открояват най-много сред всички заглавия на страниците ви.

и

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

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

Изграждане на уникални хипервръзки

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

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

Когато оформяте връзките си, трябва да имате предвид следното - как ще изглеждат промените в настройката на страницата ви, какъв цвят на фона работите, и какъв цвят е текстът за контраст?

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

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

Изграждане на стилизирани списъци

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

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

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

Как да създадете In-Page Quotes

Появата на цитати и цитати е много ограничена в наши дни. В ранната мрежа не бихте видели много от тези елементи в употреба. Може би в статии, есета или образователни статии. Но HTML5 със сигурност е актуализирал правилата малко, което прави цитирането на blockquotes много по-лесно.

Уебсайтът HTML5 Doctor включва интересен ресурс за обсъждане на тази точна тема. Те обсъждат използването на съдържанието вътре в блоковите цитати като вътрешни за структурата на документа. Така че можете да включите и заглавия, параграфи и дори списъци и колонтитули. Основната употреба на a