19 Типографски умения, които всеки дизайнер трябва да знае

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

Дайте малко място

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

Бонус Съвет: Кернинг

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

Въпреки че е видимо на горното изображение, има много повече да се знае за разликата между тези различни видове кернинг. Любопитен? Прочетете го от този блог „Кернинг: Не схващайте стила си“.

Подходящ размер на шрифта

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

Използвайте правилни измервателни единици

За размера на шрифта в мобилната мрежа типографията не използва точки (pt). Вместо това използвайте ems или rems. Това е предпочитано от повечето дизайнери, тъй като тези устройства правят съдържанието мащабируемо, тъй като се основават на процент, а не на статичен размер.

Изберете Контрастни цветове

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

Гарантиране на по-добра четимост

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

Подравнете правилно текстовете

Подравняването е важен фактор, когато става въпрос за мобилна типография в мрежата. Човешкият мозък обича да чете текста на блокове на малък екран. Обикновено текстовете са подравнени наляво, което означава, че има дрипав ръб от дясната страна на блока. Настройте го правилно и се уверете, че ако използвате „оправдано“ подравняване, няма да има бяло пространство, което да не е последователно.

Задайте водещи

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

Намиране на вашето сладко място

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

Използване на бялото пространство

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

Вземете ширината на екрана в акаунта

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

Направете своя типография, различаваща се

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

Проверете мащабирането и пропорциите

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

Вземете функционалност в сметката

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

Текстът на страницата е тежък?

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

Тежко ли е взаимодействието на страницата?

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

Отзивчив уеб дизайн

Както бе споменато по-рано, пикселите трябва да се избягват по време на типография на мобилната мрежа. Те имат стандарт с фиксиран размер. Използвайте вместо тях em или rem. Те се базират на процент и мащабируемост. Когато съдържанието се гледа на мобилно устройство с различна разделителна способност, те съответно коригират размера си. Не забравяйте, че текстовото съдържание на вашата отзивчива уеб страница трябва да бъде мащабируемо и да коригира размера им автоматично според ширината на екрана. Можете да използвате LambdaTest, за да извършите отзивчивото си тестване. С едно щракване можете да проверите отзивчивостта на вашия сайт на над 44 мобилни устройства с различни разделителни способности.

Сдвояване на няколко шрифта

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

Тегло на шрифта: тежък или лек?

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

Дръжте фона на ума

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

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

Първоначално публикуван в LambdaTest

Първоначално написано от Арнаб Рой Чоудхъри

Допълнителна информация…

Ако публикацията ви харесва, моля, clap и помогнете на другите също да я намерят.