Müasir bir veb sayt üçün ən yaxşı tətbiqetmələr

Bütün yaxşı təcrübələri əhatə edən həssas veb mətbəə üçün bir bələdçi & Saytınızın məzmununun oxunuşunu təmin etmək üçün yazı üslubu ölçüsü qaydaları & görmək üçün bir sevinc.


Tipoqrafiyanın ən yaxşı təcrübələri

Rəssamların fırçaları var. Heykəltəraşların gilləri var. Veb dizaynerlərinin … şriftləri var? Oliver Richenstein indi olduğu kimi məşhur şəkildə yazılmışdır: “İnternetdəki məlumatların 95% -i yazılı dildir.” Saytınızın xüsusi qrafiklərinə, nişanlarına, yaraşıqlı menyularına və təmiz interfeyslərinə verdiyiniz bütün diqqətli düşüncələrdən sonra veb mətbəə üçün vacib komponenti parıldamaq günah olar..

Narahat olmayın – parlaq və təsirli mətn hazırlamaq üçün usta dizayner olmaq lazım deyil. Bəzi etibarlı qaydalara və prinsiplərə riayət etməklə veb mətbəə məlumatlarınızı asanlıqla oxunan və düşünülmüş şəkildə tərtib edilmiş şəkildə istifadəçilərə çatdıracaqdır..

Vizual İerarxiyanın qurulması

Yaxşı veb mətbəəsinin ən vacib məqsədi bir yaratmaqdır iyerarxiya vizual olaraq bir elementdən digərinə axan məzmun. Başlıqlar, alt başlıqlar və gövdə mətni, müxtəlif şrift çəkiləri və üslubları arasındakı düzgün fərq və mətn blokları arasında kifayət qədər ağ boşluq olması oxumaq təcrübəsini təşviq edən amillərdir..

Tipoqrafiya vizual iyerarxiya nümunəsi

Güclü bir bədənin qurulması

İlk iş sifarişiniz saytınızın əsas yerini dağıtmaqdır Bədən mətn, çünki ziyarətçiləriniz çox vaxt oxumaq üçün sərf edirlər. Məqsədiniz, uzun bəndlər boyunca sağlam bir ritm ilham verən, böyük bəndlər arasında təbii olaraq axan mətn yaratmaqdır.

  • Bədən mətni üçün ən çox yayılmış şrift ölçüsüdür 16pxYa da daha yaxşı, 1em (daha sonra bu barədə).
  • Mətninizi mərkəzə uyğunlaşdırmaqdan çəkinin, çünki hər iki tərəfin qeyri-bərabər kənarları xoşagəlməz bir mənzərə yaradacaqdır. Bunun əvəzinə solu və sağını təyin edin marj mətn konteyner avtomatik daha arzuolunan effekti əldə etmək.
  • Əsaslandırılmışdır mətn veb səhifələr üçün deyil, qəzetlər üçün əla işləyir. Maye yerlərinin təbiəti sözlər arasındakı boşluqda gözlənilməz boşluqlar yarada bilər.
  • Seçin aşağı kontrastlı yüksək olanlar üzərində şriftlər. Şriftlər kimi Didot jumbo başlıqları və ya böyük formatlı çap üçün gözəl işlə, ancaq qalın və nazik vuruş xətləri arasındakı yüksək kontrast veb saytlarda kiçik ölçülərdə oxumağa çətinlik yaradır..
  • Diqqət edin doğruluq. Bir çox sans-serif şriftlərdə “I” hərfi və kiçik “l” hərfləri eyni görünür, bu da lazımsız qarışıqlıq yarada bilər..
  • Ən optimal xətt boyu paraqraf mətninin şrift ölçüsü 1.25-1.5 × arasındadır. Seçdiyiniz yazı tipinə uyğun olaraq uyğunlaşdırın.

Uğur üçün başlıqlar

Daha yaxşı və ya pis bir şey üçün, oxucuların çoxu, ehtimal ki, səhifənizi keçəcəkdir Başlıqlar əsas mətnlə də maraqlanmadan. Buna görə başlıqlarınızın mətbəəsinin diqqətəlayiq olmasını təmin edərək onların diqqətini cəlb etmək və daha sonra oxumağa çağırmaq çox vacibdir.

  • Başlıq mətni üçün orta şrift ölçüsü təxminən bir yerdədir 36pxVə ya daha yaxşı, ətrafında 2.25em (buna çatacağıq).
  • Diqqət həmişə Bədəndən əvvəl Başlıqa getməlidir. Başlıq mətninizin bədəndəki həddən artıq qalın bir şrift çəkisi ilə üstələmədiyinə əmin olun.
  • Başlıqlarınızın oxucuların gözləntilərinə cavab verdiyinə əmin olun. Uşaq paraqrafı arasında kifayət qədər geniş aralıqda olan daha böyük mətn mövzu mövzusundakı dəyişikliyi bildirir, paraqraflara daha yaxın olan kiçik başlıqlar məzmunun əlaqəli olduğunu göstərir..
  • Başlığınızın növbəti sətirə keçməsi lazım olduğu təqdirdə, ən uyğun olduğunu unutmayın xətt boyu başlıqlar üçün az Bədən mətni üçün olduğundan daha çox.

Aradakı boşluq

Səhifənizin elementlərini ayıran boşluq miqdarı, onların bir-biri ilə münasibətləri haqqında çox şey deyir və bu diqqətdən kənarda qalmayacaq bir dizayn prinsipidir. Ağ bir okean ilə əhatə olunmuş dominant başlıqlar, paraqraflara yaxın olan kiçik başlıqlardan daha fərqli bir kontekst təmin edir vizual iyerarxiya).

Ümumiyyətlə, kifayət qədər olmamaqdan çox ağ boşluğa sahib olmaq tərəfində səhv etmək daha yaxşıdır. Səxavətli ağ boşluğa malik təmiz sxemlər müasir vebdə üstünlük verilən şeydir.

Xəttə düşmək

Ekranın hər iki tərəfi boyunca uzanan yüksək qətnaməli 27 düymlük monitorunuzda mətn oxuduğunuzu düşünün. Yalnız bir abzasdan sonra gözləriniz yorğun olardı!

Əsas mətninizin hər sətirini müəyyən sayda simvolla məhdudlaşdırmaq vacibdir ki, gözlər mərkəzi nöqtəyə yönəlsin. Məşhur konsensus bu sehrli tədbirin olmasıdır masaüstü edir 60-75 simvol uzun. Üçün mobil ekranlar, gözlərin qırışmasından və həddindən artıq qatılaşdırılmış mətndən qorunmaq istədiyimiz yerdə bu nömrə oturur Hər sətirdə 35-40 simvol.

Tərəzi toxunur

Çox şey yazılıb Bədən və Başlıq şriftinin ölçüsü arasında ölçülmə mövzusunda. Vücudunuzun mətni, məsələn, 1em olarsa, bu mükəmməl H2 ölçüsü nədir? Bədən mətni və H1-H6 başlıqları arasındakı ən estetik cəhətdən xoş nisbətlərin müəyyənləşdirilməsi, çox şanslı haldır ki, bir çox mətbəəçilər artıq açılmış bir şeydir. Bundan əlavə, bu riyazi nisbətlər istifadəçinin ekran ölçüsünə görə də uyğunlaşmalıdır.

Dizayner Jason Pamental təmin edir faydalı bir qrafik inandığı üçün müxtəlif media cihazlarında ən optimal şrift ölçüsüdür və mən də onunla razılaşmağa meyl edirəm. Əslində, masaüstündeki ideal H1 ölçüsü Bədən ölçüsünün 3 × olmasına baxmayaraq, mobil ekranda bu həddən artıq şişirdilmiş görünür – ona görə kiçik görüntü sahəsi üçün yerləşmək üçün kiçildilməlidir.

Müxtəlif media cihazları arasında optimal şrift ölçüləri qrafiki

SİZ DİQQƏT: Yaxşı bir vizual iyerarxiyaya sahib olduğunuzu necə deyə bilərsiniz? Ekranınızda sıxışdırın bütün mətn bulanıqlaşana qədər. Layihə bölmələr arasında heç bir fərq qoymadan amorf bir çubuq kimi görünsə, iyerarxiyanız uğursuz ola bilər. Bununla birlikdə, mətn blokları, başlıqlar arasındakı ayrılıqları asanlıqla görə bilsəniz və gözlərin hara getməsini dəqiq bilsəniz, əla formadasınız!

Mətnə cavab vermək

Həssas veb dizayn bu gün vacib bir tətbiqdir, xüsusən də getdikcə daha çox insan mobil cihazları İnternetə baxmaq üçün əsas vasitə kimi istifadə etdikləri üçün. Piksel deyil, faizlə dizayn edilərkən şəkillərin və kənarların maye genişliklərinə uyğunlaşma tərzi inqilab edərkən, cavab verən veb tipoqrafiyası təəssüf ki, çatlamaq üçün daha sərt bir yumurta olaraq qaldı.

Bir çox cihaz arasında yazı ölçülərini optimallaşdırmaq böyük ola bilər, çünki veb saytınızdakı bütün mətnləri hədəfləmək üçün bir neçə media sorğusunu araşdırmalısınız. Bununla birlikdə, seçdiyiniz vahidə tez bir düzəliş etməklə, hər hansı bir ekran növü üçün istifadə ediləcək hüququ şrift ölçüsünü daha asan tapacaqsınız..

Piksellər üzərində Ems

Saytınızın mətbəəsini asanlaşdırmaq üçün piksel qazın və istifadəyə başlayın ems. Ems, saytınızın şrift ölçüləri arasında ölçülməni daha asan başa düşməyə imkan verir və onların kiçik bölmələri pikselin ikirəqəmli nömrələrindən daha idarə olunur.

Ən əsası, ems ilə hər şey ana konteynerə nisbətlidir. Əgər təyin etsəniz xətt boyu bir konteynerin 1.5em səviyyəsinə, o konteynerin şrift ölçüsünü dəyişdirməli olsanız da, hündürlük düzgün nisbətdə qalacaqdır. Piksellərlə vizual ardıcıllığı qorumaq üçün konteynerin şrift ölçüsündəki hər bir dəyişiklik üçün daim konteynerin xətt boyu xüsusiyyətini tənzimləməlisiniz..

Bu prinsip uyğun gəlir marj, taxma, məktub boşluğu, və saytınızın mətninə müraciət etdiyiniz hər hansı digər üslub. Hər media sorğusu üçün məzmunun doldurulma nöqtələrində piksellərə bənzər bir şey yoxdur – yalnız ilkin vəziyyətini ems-də təyin edin və avtomatik olaraq orijinal nisbətlərlə tənzimlənəcəkdir!

Ems istifadə

Ediləcək ilk şey saytınızın şrift ölçüsünə əsas istinad etməkdir. Sizin stil cədvəli, bu daxil edin:

bədən {
şrift ölçüsü: 100%;
}

Bu, saytınızdakı məzmunun nisbi şrift ölçüsünü müəyyənləşdirir 1em, əksər brauzerlər kimi şərh edir 16px. İndi bütün başlıq ölçüləriniz – 2.25em, 1.5em və s. – əsas 1emin birbaşa vuruşlarıdır.

Vacib Qeyd: Ems var kaskad– onların ölçüsü, ana tərəfindən müəyyən edilmiş qiymətə nisbətdir. Məsələn: Bədəninizin şrift ölçüsünü 1.25em, uşaq konteynerinin şrift ölçüsünü 1.25em’ə təyin etsəniz, iki şrift eyni olmayacaq! Əksinə, uşaq konteynerinin mətni 1.25 × orijinal 1.25em valideyn ölçüsü olacaqdır.

Böyük İnternet mətbəəsi üçün daha çox göstərişlər

Mükəmməl veb mətbəə üçün bir neçə daha çox məsləhət:

Bunu aşma

Veb saytınızın mətbəəsini məhdudlaşdırmalısınız 2-3 şriftlər ən çox Adətən bu, başlıqlarınız üçün bir şrift, əsas mətniniz üçün bir şrift və lazım olduqda bir alt başlıq şrift ola bilər. Çox sayda şriftlərdən istifadə qarışıq və istifadəsiz bir nizam yarada bilər. Növbəti nöqtə ilə izah edildiyi kimi saytınızın yükləmə vaxtı da təsir göstərə bilər.

Yalnız ehtiyacınız olanı yerləşdirin

Yalnız saytınız üçün ən vacib olanı nəzərdən keçirin və qalanını kənarda qoyun. Bilirsinizsə ehtiyacınız olacaq müntəzəm, cəsurkursivdir müəyyən bir şrift üçün stil, sonra yalnız bu seçimləri daxil edin və istisna olun incə, işıqqara üslubları. Lazımdan daha çox üslub yükləmək saytınızın qaynaqlarına böyük zərbə vura bilər, çünki hər bir fərdi stil ayrı bir server tələbidir.

Dizayn mərhələsində yaradıcılığınızı məhdudlaşdırmaq istəmirsinizsə, hər şeyi qabartın; saytınızı canlı yayımlamadan əvvəl artıq üslubları silməyi unutmayın.

Oxuya bilmirsinizsə, istifadə etməyin

Bu, böyük bir oyun. Çiçəkli olarkən əl ilə yazılmış şrift istifadə etmək üçün cazibədar ola bilər, əgər “g” və ya “y” olub-olmadığı ən kiçik bir qarışıqlıq varsa, istifadə etməyin! Qeyri-müəyyən bir şriftin açılması üçün mübarizə etməkdən başqa bir şey oxucu üçün daha əsəbi deyil.

‘Lorem Ipsum’dan üstün Həqiqi Mətn

Hər dizayner güvənir lorem ipsum bir layihə planını planlaşdırarkən boş məzmun sahələrini doldurmaq üçün dummy mətni. Ancaq təəccüblənə bilərsiniz, sadəcə həqiqi məzmundan istifadə edərək bir mətbəənin görünüşünə və hissinə nə qədər təsir edə bilər. ‘Lorem ipsum’ tamamilə duyğusuz və intellektual bir boşluqdur; sözlərinizin və şəxsiyyətinizin yazı tipi ilə necə ifadə ediləcəyi barədə heç bir real məlumat yoxdur. Buna görə saytınızın dizaynını hazırlamazdan əvvəl ən qısa müddətdə saytınıza daxil edin.

Fonları ilə kontrast

Düz bir ağ fona qaranlıq bir şrift həmişə ən yaxşı oxunuşu təmin edəcəkdir. Qaranlıq və ya bulanıq bir görünüşə qarşı ağ mətn də bu günlərdə populyarlaşır. Arxa planınızın ön planda olan mətni üstələyəcək dərəcədə mürəkkəb və ya detallı olmadığını unutmayın.

Mətn fonunda pis mətn nümunəsiBir “mətn üzərində mətn” fonunu istifadə edərək pis bir mətbəə təcrübəsinə misal.

Şriftləri cütləşdirmək – Bəyənmək kimi

Tamamilə fərqli şəxsiyyətlərlə şriftlərin birləşdirilməsi qarışıq siqnalları aşkar edəcəkdir. İkisi stilistik cəhətdən təzadlı ola bilər, amma emosional olaraq eyni mesaja xidmət etməlidir.

Şriftləri cütləşdirmək – Ailənizdə saxlayın

Ən sadə həll tez-tez ən yaxşısıdır. Bəzən ən yaxşı cütləşmə eyni Şrift-Ailə içərisindəki dəyişkənliklərdən (serif, alternativ çəki, plitə) istifadə edilməsindən irəli gəlir.

İstiqamətlər

Ümumi və gözlənilən təcrübədir altın altına bağlantıları və hover hadisələri altını çıxarın. Bu marşrutu keçərkən vurğuladığınız mətnin itlənmiş və ya olduğundan əmin olun cəsur qarışıqlıq qarşısını almaq üçün vurğulamaq yerinə.

Ancaq bu günlərdə lövbərlənmiş bir mətn ümumiyyətlə rənglidir, keçid effekti tutulanda tətbiq olunur. Dizayn baxımından bu, şübhəsiz ki, daha yaxşı seçimdir, lakin ardıcıl qalmağı unutmayın!

Bəzi CSS bilmək

Bu hərflər arasındakı məsafəni təsir edir. Başlıqları vurğulamaq üçün faydalıdır.

məktub boşluğu: x.xxem;

Bu sözlər arasındakı məsafəni təsir edir:

söz boşluğu: x.xxem;

Bu vurğu üçün bütün qapaqlara alternativ təmin edir. İxtisarlar üçün də faydalıdır.

şrift-variant: kiçik başlıqlar;

Bu, bütün mətninizi KAPİTALİZləşdirəcəkdir.

mətn çevirmək: böyük;

Bu Mətnin İlk Məktubunu kapitallaşdıracaq.

mətn çevirmək: kapitallaşdırmaq;

Bu mətn üzərində bir irəliləyiş olacaq.

mətn bəzəyi: xətti-xətti;

Bu, müasir brauzerlərdə şriftlərin görüntüsünü yaxşılaşdırır:

mətn göstərilməsi: Optimizetlilik

Şrift Fayl Tiplərini Anlamaq

Şriftlərin geniş brauzerlərdə düzgün yüklənməsini təmin etmək üçün çox sayda fayl növlərini yerləşdirmək yaxşı bir fikirdir. Ən çox narahat olmağınız bunlardır:

TrueType

TTF Mac və Windows üçün ən çox yayılmış formatdır və bütün əsas brauzerlərdə dəstəklənir.

OpenType

OTF də geniş şəkildə dəstəklənir və ayrıca bir şriftə qoşulmadan kiçik qapaqlar və alternativ simvol kimi əlavələr etməyə imkan verir.

Daxili Açıq Tip

EOT yalnız İnternet Explorer tərəfindən dəstəklənir – və IE-nin köhnə versiyalarındakı istifadəçilərdən narahat olmasanız, bəlkə də bunu buraxmaq yaxşı olar.

Veb Açıq Şrift Formatı

WOFF və onun davamçısı WOFF2 şəhərdəki yeni padşahlardır. Əsas brauzerlərdəki dəstəyi və sıxılmış olmaq onları müasir seçim növü halına gətirir.

Fayl tipini çevirmək lazımdır?

Çox güman ki, yalnız bir tip şrift sənədinə sahib olduğunuz və nəyisə digərinə çevirməyiniz lazım olan bir vəziyyətə düşəcəksiniz. FontSquirrelFont2Web yalnız bunu edəcək onlayn vasitələr təklif edin.

Nəticə

Siz artıq bunu bilirdiniz məzmunu veb saytınızın yeganə ən vacib tərəfidir. Yaxşı hazırlanmış məzmun yaxşı hazırlanmış tipoqrafiyaya layiqdir; Saytın ziyarətçilərini strukturu oxumaq və ya qarışdırmaq çətin olan mətnlə məyus etməyin. Tipoqrafik ən yaxşı təcrübələrə riayət edən diqqətlə planlaşdırılan vizual iyerarxiya ilə yaradıcı düşüncələriniz də yaradıcı şəkildə təqdim edilə bilər. Xoşbəxt yazın!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map