ვებ – ტიპოგრაფიის საუკეთესო პრაქტიკა თანამედროვე ვებსაიტზე

სახელმძღვანელო საპასუხო ვებ – ტიპოგრაფიის შესახებ, რომელიც მოიცავს ყველა საუკეთესო პრაქტიკას & შრიფტის სტილის ზომების წესები თქვენი საიტის შინაარსის იკითხება & სიხარული, რომ აჰა.


ტიპოგრაფიის საუკეთესო პრაქტიკა

მხატვრებს აქვთ ჯაგრისები. მოქანდაკეებს აქვთ თიხა. ვებ დიზაინერებს აქვთ თავიანთი… შრიფტები? როგორც ახლა ოლივერ რიშენშტეინი ცნობილია დაწერილი: “ინტერნეტში ინფორმაციის 95% წერილობითი ენაა.” ყოველივე ამის შემდეგ, რაც ფრთხილად გაითვალისწინეთ თქვენი საიტის პერსონალური გრაფიკა, ხატები, საკმაოდ მენიუები და სუფთა ინტერფეისები – ცოდვა იქნებოდა, რომ ესალამოთ ვებ ტიპოგრაფიის მნიშვნელოვან კომპონენტს..

ნუ ინერვიულებ – არ გჭირდებათ დაგჭირდეთ დიზაინერი, რომ გქონდეთ გლუვი და ეფექტური ტექსტი. ზოგიერთი საიმედო მითითებისა და პრინციპის დაცვით, თქვენი ვებ – ტიპოგრაფია გადმოგვცემს იმ მომხმარებლებს, რომლებიც ადვილად იკითხებიან იმგვარად, ადვილად იკითხება.

ვიზუალური იერარქიის დამკვიდრება

კარგი ვებ – ტიპოგრაფიის ყველაზე მნიშვნელოვანი მიზანია შექმნას ა იერარქია შინაარსის, რომელიც ვიზუალურად მიედინება ერთი ელემენტიდან მეორეზე. თქვენი სასაქონლო ნაწილის, ქვეთავების და სხეულის ტექსტებს შორის სწორი განსხვავება, შრიფტის სხვადასხვა სტილის და სტილისა და ტექსტის ბლოკებს შორის საკმარისი რაოდენობის თეთრი სივრცე ყველა ის ფაქტორია, რომლებიც ხელს უწყობენ კითხვის მცდელობას..

ტიპოგრაფიული ვიზუალური იერარქიის მაგალითი

ძლიერი სხეულის აშენება

თქვენი პირველი ბიზნესის შეკვეთა თქვენი საიტის მთავარი დანიშვნაა სხეული ტექსტი, რადგან ეს არის ის, რასაც თქვენი სია გაატარებს უმეტეს დროს კითხვის დროს. თქვენი მიზანია შექმნათ ტექსტი, რომელიც ბუნებრივად მიედინება დიდ აბზაცებში, ჯანსაღ რიტმს შთააგონებს კითხვის გრძელი მონაკვეთებისთვის.

  • ტექსტის ტექსტის ყველაზე გავრცელებული შრიფტია 16pxუფრო უკეთესი მაინც, 1em (ამის შესახებ მოგვიანებით).
  • თავიდან აიცილეთ თქვენი ტექსტის სწორად შედგენა, რადგან ორივე მხრიდან არათანაბარი კიდეები შეუქმნის მხედველობას. ამის ნაცვლად, დააყენეთ მარცხენა და მარჯვენა ზღვარი ტექსტის კონტეინერი ავტო უფრო სასურველი ეფექტის მისაღწევად.
  • გაამართლა ტექსტი მშვენივრად მუშაობს გაზეთებისთვის, არა ვებგვერდებზე. სითხის განლაგების ბუნებას შეუძლია შექმნას სიტყვებს შორის დაშორების არაპროგნოზირებადი ხარვეზები.
  • არჩევა დაბალი კონტრასტი შრიფტები მაღალზე. შრიფტები მოსწონს დიდოტი ლამაზად იმუშავეთ ჯუმბოს სათაურებისთვის ან დიდი ფორმატის ბეჭდვისთვის, მაგრამ სქესისა და თხელი ინსულტის ხაზებს შორის მისი მაღალი კონტრასტი რთულია მცირე ზომის ვკითხულობთ ვებსაიტებზე.
  • გაითვალისწინეთ კანონმდებლობა. ბევრ შრიფტიან შრიფტში ძალიან მნიშვნელოვანია იგივე “” “და” ლ “ასოები, რამაც შეიძლება ზედმეტი დაბნეულობა შექმნას.
  • ოპტიმალური ხაზის სიმაღლე აბზაცის ტექსტი 1.25–1.5 – მდეა შრიფტის ზომას. შესაბამისად დაარეგულირეთ თქვენი არჩეულ ტიპზე დაყრდნობით.

სათაურები წარმატებისთვის

უკეთესობის ან უარესობის გამო, მკითხველთა უმეტესობა სავარაუდოდ გადახურავს თქვენს გვერდს სათაურები ძირითადი ტექსტის შეწუხების გარეშეც კი. აქედან გამომდინარე, გადამწყვეტია მათი ყურადღების მიქცევა და შემდგომი კითხვის მოთხოვნა, იმის გათვალისწინებით, რომ თქვენი სათაურების ტიპოგრაფია აღსანიშნავია.

  • სასაქონლო ტექსტის საშუალო შრიფტის ზომა სადღაც არის 36pxუფრო უკეთესი, გარშემო 2.25em (ჩვენ ამას მივდივართ).
  • ყურადღება ყოველთვის უნდა მიდიოდეს სასაქონლოზე ადრე სასაქონლოზე. დარწმუნდით, რომ თქვენი სასაქონლო ტექსტი არ არის დაცული სხეულში ძალიან სქელი შრიფტის წონით.
  • დარწმუნდით, რომ თქვენი სათაურები აკმაყოფილებს მკითხველების მოლოდინს. საკმაოდ დიდი ტექსტი, რომელსაც აქვს საკმაოდ დიდი დისტანცია მის ბავშვურ პუნქტთან დაკავშირებით, ნიშნავს საგნის ცვლილებას, ხოლო მცირე ზომის სათაურებში გაცილებით უფრო მჭიდრო პარაგრაფი ნიშნავს, რომ შინაარსთან არის დაკავშირებული.
  • იმ შემთხვევაში, თუ თქვენი სათაური უნდა გადაიტანოთ შემდეგ სტრიქონზე, გაითვალისწინეთ რომ ოპტიმალურია ხაზის სიმაღლე სათაურები არის ნაკლები ვიდრე ეს არის ტექსტის ტექსტისთვის.

სივრცე შორის

თქვენი გვერდის ელემენტების განცალკევების რაოდენობა ბევრ რამეზე მეტყველებს ერთმანეთთან ურთიერთობის შესახებ და ეს არის დიზაინის პრინციპი, რომლის უგულებელყოფა არ შეიძლება. თეთრ ოკეანეში გარშემორტყმული დომინანტი ჰედები გაცილებით განსხვავებულ კონტექსტს ქმნის, ვიდრე მცირე ზომის თავსაბურავებს, რომლებიც მჭიდროდ არის დაკავშირებული პარაგრაფებთან (გახსოვდეთ, რომ ჩვენ ვიზუალური იერარქია).

საერთოდ, უმჯობესია შეცვალოთ ის მხარე, რომ ზედმეტი თეთრი სივრცე გქონდეთ, ვიდრე საკმარისი. გულწრფელი თეთრი სივრცის სუფთა განლაგება სასურველია თანამედროვე ქსელში.

ხვდება ხაზში

წარმოიდგინეთ, რომ კითხულობთ ტექსტს თქვენს მაღალი გარჩევადობით 27 დიუმიან მონიტორზე, რომელიც მთელი გზა ეკვრის ეკრანის ორივე კიდეზე. თვალები დაღლილი იქნებოდა მხოლოდ ერთი პუნქტის შემდეგ!

მნიშვნელოვანია თქვენი ძირითადი ტექსტის თითოეული სტრიქონის შეზღუდვა მხოლოდ გარკვეული სიმბოლოებით, ისე რომ თვალები დარჩეს კონცენტრირებულ ცენტრალურ წერტილზე. პოპულარული კონსენსუსი არის ის, რომ ეს ჯადოსნური ღონისძიებაა სამუშაო მაგიდები არის 60–75 სიმბოლო. იმისთვის მობილური ეკრანები, სადაც გვინდა, რომ თავიდან ავიცილოთ თვალების ჩაქრობა და ზედმეტად შედედებული ტექსტი, ეს რიცხვი გარშემო გვხვდება 35–40 სიმბოლო თითო სტრიქონზე.

მასშტაბის შეცვლა

ბევრი რამ დაიწერა თემაზე და სკანირების შრიფტის ზომას შორის. რა არის ეს H2 სრულყოფილი ზომა, თუ თქვენი სხეულის ტექსტია, ვთქვათ, 1em? სხეულის ტექსტსა და H1-H6 სათაურებს შორის ყველაზე ესთეტიურად სასიამოვნო პროპორციების დადგენა, საბედნიეროდ, რაღაც ტიპოგრაფებმა უკვე გაშიფრეს. გარდა ამისა, ამ მათემატიკური პროპორციები ასევე უნდა მოერგოს მომხმარებლის ეკრანის ზომას.

დიზაინერი ჯეისონ პემეტალი გთავაზობთ სასარგებლო სქემა იმის გამო, რომ მისი აზრით, შრიფტის ყველაზე ოპტიმალური ზომებია სხვადასხვა მედია მოწყობილობაში და მე ვეთანხმები მას. არსებითად, მიუხედავად იმისა, რომ დესკტოპის იდეალური ზომა შეიძლება იყოს 3 × სხეულის ზომა, მობილური ეკრანზე ეს გამოჩნდება ზედმეტად გადაჭარბებული – ასე რომ, ის უნდა შემცირდეს, რათა მცირე ზომის ნახვისთვის მოხვდეს..

შრიფტის ოპტიმალური ზომების სქემა სხვადასხვა მედია მოწყობილობაში

სწრაფი შენიშვნა: როგორ გითხრათ, გაქვთ კარგი ვიზუალური იერარქია? ეკრანი თქვენს ეკრანზე სანამ ყველა ტექსტი არ გახდება დაბინდული. თუ განლაგება ამორფულ ბლომად გამოიყურება, სექციებს შორის სხვაობა არ არის, მაშინ თქვენი იერარქია შესაძლოა ვერ აღმოჩნდეს. ამასთან, თუ თქვენ შეგიძლიათ მარტივად გაითვალისწინოთ განცალკევება ტექსტის ბლოკებს, სათაურებს და ნათლად იცოდეთ სად უნდა იმოგზაუროთ თვალები, მაშინ მშვენიერი ფორმა ხართ!

ტექსტის პასუხისმგებლობის შენარჩუნება

ამ დღეებში საპასუხო ვებ – დიზაინი არის აუცილებელი პრაქტიკა, განსაკუთრებით იმით, რომ უფრო მეტი ადამიანი იყენებს მობილური მოწყობილობებს, როგორც ინტერნეტის დათვალიერების პირველადი საშუალება. პროცენტული და არა პიქსელების შექმნისას რევოლუცია მოახდინა სურათების და ზღვრების ადაპტირება სითხის სიგანეზე, საპასუხო ვებ – ტიპოგრაფია, სამწუხაროდ, რჩება კვერცხუჯრედის გასაძლიერებლად..

მრავალ შრიფტის შრიფტის ზომის ოპტიმიზაცია შეიძლება გახდეს უზარმაზარი, რადგან თქვენ უნდა მოძებნოთ რამდენიმე მედია შეკითხვაზე, რომ ყველა ვებ – გვერდი თქვენს საიტზე განთავსდეს ყველა ტექსტი. ამასთან, თქვენს მიერ არჩევითი ერთეულის სწრაფი მორგებით, თქვენ უფრო მარტივად აღმოაჩენთ შრიფტის სწორ ზომებს, რომ გამოიყენოთ ნებისმიერი ტიპის ეკრანისთვის.

Ems Over Pixels

თქვენი საიტის ტიპოგრაფიის გამარტივებისთვის, გადაიტანეთ პიქსელი და დაიწყეთ გამოყენება ემ. Ems საშუალებას მოგცემთ უფრო ადვილად გაითვალისწინოთ თქვენი საიტის შრიფტის ზომებს შორის მასშტაბები და მათი მცირე ზომის ერთეულები უფრო მართვადია ვიდრე პიქსელების ორნიშნა რიცხვები.

რაც მთავარია, ყველაფერთან შედარებით მშობლების კონტეინერია. თუ მითითებული ხაზის სიმაღლე კონტეინერი 1.5em– მდე, მაშინაც კი, თუ თქვენ შეცვლით ამ კონტეინერის შრიფტის ზომას, ხაზის სიმაღლე დარჩება სწორი პროპორციით. პიქსელებით, თქვენ მუდმივად უნდა მოაწყოთ კონტეინერის ხაზის სიდიდის თვისებები მისი შრიფტის ზონის თითოეული ცვლილებისთვის, ვიზუალური თანმიმდევრულობის შესანარჩუნებლად.

ეს პრინციპი ეხება ზღვარი, padding, ასო-ინტერვალი, და ნებისმიერი სხვა სტილი, რომელსაც თქვენ მიმართავთ თქვენი საიტის ტექსტს. აღარ გაქვთ პიქსელების შეფუთვა თქვენს შინაარსზე ყველა მედია შეკითხვაზე დაყენებისას – უბრალოდ დააყენეთ თავდაპირველი მდგომარეობა ელ.ფოსტით და ის ავტომატურად დაარეგულირებს ორიგინალ პროპორციებს!

ემს

პირველი რაც უნდა გააკეთოთ თქვენი საიტის შრიფტის ზომის ძირითადი მითითებაა. შენში სტილის ფურცელი, შეიყვანეთ ეს:

სხეული
შრიფტის ზომა: 100%;
}

ეს ადგენს თქვენი საიტის შინაარსის შედარებით შრიფტის ზომას 1em, რაც ბრაუზერების უმეტესობას განმარტავს 16px. ახლა ყველა თქვენი სასაქონლო ზომა: 2.25em, 1.5em და ა.შ. — არის 1em საწყისი ხაზის პირდაპირი მრავლობითი რაოდენობა.

ᲛᲜᲘᲨᲕᲜᲔᲚᲝᲕᲐᲜᲘ ᲩᲐᲜᲐᲬᲔᲠᲘ: ემები არიან კასკადურიმათი ზომების დადგენა შედარებით მნიშვნელოვანია მისი მშობლის დადგენილ ღირებულებასთან. მაგალითად: თუ თქვენი სხეულის შრიფტის ზომა 1.25 – ზე დაყენებთ, შემდეგ კი ბავშვის კონტეინერის შრიფტის ზომა 1.25 – ზე, ორი შრიფტი არ იქნება იგივე ზომა! უფრო მეტიც, ბავშვის კონტეინერის ტექსტი იქნება 1.25 × ორიგინალი 1.25em მშობლის ზომა.

დამატებითი რჩევები დიდი ვებ – ტიპოგრაფიისთვის

იხილეთ კიდევ რამდენიმე რჩევა შესანიშნავი ვებ – ტიპოგრაფიისთვის:

არ გადააჭარბოთ მას

თქვენ უნდა შეზღუდოთ თქვენი ვებ – გვერდის ტიპოგრაფია 2-3 შრიფტი უმეტესად. როგორც წესი, ეს იქნება თქვენი სათაურების შრიფტი, თქვენი ძირითადი ტექსტის შრიფტი და საჭიროების შემთხვევაში, შესაძლოა, ქვესათაური შრიფტი. ძალიან ბევრი შრიფტის გამოყენებით შეგიძლიათ შექმნათ ბინძური და ფოკუსირებული განლაგება. თქვენი საიტის დატვირთვის დროზე ასევე შეიძლება გავლენა იქონიოს, როგორც ეს მოცემულია შემდეგი პუნქტით.

ჩადეთ მხოლოდ ის, რაც გჭირდებათ

განვიხილოთ მხოლოდ ის, რაც ყველაზე მნიშვნელოვანია თქვენი საიტისთვის და დანარჩენი დატოვეთ. თუ იცით, რომ დაგჭირდებათ რეგულარული, თამამი და italic მოცემული შრიფტის სტილი, შემდეგ ჩასვით მხოლოდ ის არჩევანი და გამორიცხეთ თხელი, მსუბუქი და შავი სტილები. საჭიროებისამებრ მეტი სტილის დატვირთვამ შეიძლება დიდი დარტყმა მიაყენოს თქვენი საიტის რესურსებს, რადგან თითოეული ინდივიდუალური სტილი არის ცალკეული სერვერის მოთხოვნა.

თუ არ გსურთ თქვენი კრეატიულობის შეზღუდვა დიზაინის ეტაპზე, შემდეგ წადით წინ და განათავსეთ ყველაფერი; უბრალოდ დაიმახსოვრე, რომ ამოიღო ჭარბი სტილი, სანამ შენი საიტი პირდაპირ რეჟიმში გადის.

თუ არ შეგიძლიათ წაიკითხოთ, არ გამოიყენოთ

ეს არის biggie. ხოლო ყვავილოვანი ხელნაწერი შრიფტი შეიძლება იყოს მაცდური გამოყენება, თუ თუნდაც ოდნავი დაბნეულობა არსებობს ეს “g” ან “y”, მაშინ არ გამოიყენოთ ეს! არაფერია უფრო იმედგაცრუებული მკითხველისთვის, ვიდრე ცდილობს უკანონო შრიფტის გაშიფვრას.

გსურთ ნამდვილი ტექსტი “Lorem Ipsum” დასრულებული

ყველა დიზაინერი ეყრდნობა lorem ipsum პროექტის განლაგების დაგეგმვისას ცარიელი შინაარსის შევსების ტექსტი. შეიძლება გაგიკვირდეთ, რამდენმა გავლენა შეიძლება მოახდინოს ფაქტობრივი შინაარსის გამოყენებით თქვენი ტიპოგრაფიის სახეზე და შეგრძნებებზე. ‘Lorem ipsum’ არის მთლიანად ემოციური და ინტელექტუალურად ღრუ; ეს არ იძლევა რეალურ ნივთს, თუ როგორ გამოთქვამენ თქვენი სიტყვები და თქვენი პიროვნება ტიპაჟის საშუალებით. ამიტომ, თქვენი საიტის დიზაინის დასრულებამდე შეძლებისდაგვარად შეაერთეთ თქვენი საიტის რეალური შინაარსი.

კონტრასტი ფონებთან

თეთრი ფერის ფონზე მუქი შრიფტი ყოველთვის უზრუნველყოფს საუკეთესო კითხვას. მუქი ან ბუნდოვანი გამოსახულების საწინააღმდეგოდ თეთრი ტექსტი ასევე პოპულარული ხდება ამ დღეებში. უბრალოდ გაითვალისწინეთ, რომ თქვენი ფონი არც თუ ისე რთული ან დეტალურადაა მოცემული, რაც წინა პლანზე ტექსტს გადალახავს.

ტექსტის ფონზე ცუდი ტიპოგრაფიის მაგალითიცუდი ტიპოგრაფიის პრაქტიკის მაგალითია „ტექსტი ტექსტზე“ გამოყენებული ფონის გამოყენებით.

დაწყვილებული შრიფტები – მოზიდვის მსგავსია

სრულიად განსხვავებული პერსონალის მქონე შრიფტის აღრიცხვა გამოიწვევს დაბნეულ სიგნალებს. ეს ორი შეიძლება იყოს სტილისტურად კონტრასტული, მაგრამ ემოციურად ისინი იმავე მესიჯს უნდა ემსახურებოდეს.

დაწყვილებული შრიფტები – შეინახეთ ოჯახში

ყველაზე მარტივი გამოსავალი ხშირად საუკეთესოა. ზოგჯერ საუკეთესო წყვილები მოცემულია იგივე შრიფტის ოჯახში (ვარიანტები, ალტერნატიული წონა, ფილები) გამოყენებით.

ჰიპერბმულები

საერთო და მოსალოდნელი პრაქტიკაა ხაზს უსვამს ბმულები და ამოიღეთ ხაზგასმული მოვლენები. ამ მარშრუტის გავლისას, დარწმუნდით, რომ თქვენი ხაზგასმული ტექსტი არის ანალიზური ან თამამად ვიდრე ხაზს უსვამს დაბნეულობის თავიდან ასაცილებლად.

ამ დღეებში, სამაგიეროდ, წამყვანი ტექსტი ფერადია, გარდამავალი ეფექტისაგან გამოყენებული გადასვლის დროს. დიზაინის თვალსაზრისით, ეს უდავოდ უკეთესი ვარიანტია, მაგრამ გახსოვდეთ, რომ შეინარჩუნოთ ეს თანმიმდევრული!

ზოგიერთი CSS უნდა იცოდეს

ეს გავლენას ახდენს ასოებს შორის მანძილზე. სასარგებლოა სათაურების ხაზგასასმელად.

ასო-ინტერვალი: x.xxem;

ეს გავლენას ახდენს სიტყვებს შორის მანძილზე:

სიტყვის ინტერვალი: x.xxem;

ეს ხაზს უსვამს ხაზს ალტერნატივისთვის. სასარგებლოა აგრეთვე აბრევიატურა.

font-variant: small-cap;

ეს გააკონტროლებს თქვენს ტექსტს.

ტექსტი-ტრანსფორმაცია: დიდი;

ეს გამოდგება კაპიტალის ტექსტის პირველი ასოებით.

ტექსტი-ტრანსფორმაცია: კაპიტალიზაცია;

ამით ტექსტს გავაფორმებთ.

ტექსტის გაფორმება: ხაზის გავლება;

ეს აუმჯობესებს შრიფტების ჩვენებას თანამედროვე ბრაუზერებში:

ტექსტის შედგენა: ოპტიმიზაცია

შრიფტის ფაილის ტიპების გაგება

კარგი იდეაა, რომ ჩაწეროთ ფაილის მრავალი ტიპი, რათა უზრუნველყოთ შრიფტები სწორად დატვირთვის ბრაუზერის ფართო სპექტრში. ესენი არიან, რომელთაგან ყველაზე მეტად უნდა აღელვოთ:

TrueType

TTF ყველაზე გავრცელებული ფორმატია Mac და Windows- ისთვის და ის მხარდაჭერილია ყველა მთავარ ბრაუზერში.

OpenType

OTF ასევე ფართოდ არის მხარდაჭერილი და ის საშუალებას გაძლევთ დაამატოთ დამატებები, როგორიცაა პატარა ქუდები და ალტერნატიული სიმბოლოები, ცალკეული შრიფტის ჩაქრობის გარეშე..

ჩასმული ღია ტიპი

EOT მხარს უჭერს მხოლოდ Internet Explorer– ს და თუ თქვენ არ ინერვიულებთ მომხმარებლებს IE– ს ძველი ვერსიების შესახებ, ალბათ საუკეთესოა მხოლოდ ამის დატოვება..

ქსელის ღია შრიფტის ფორმატი

WOFF — და მისი მემკვიდრე WOFF2 — ქალაქში ახალი მეფეები არიან. მათი მხარდაჭერა მთავარ ბრაუზერებში და შეკუმშვის შესაძლებლობა მათ თანამედროვე ფაილის ტიპაჟად აქცევს.

საჭიროა ფაილის ტიპის გარდაქმნა?

თქვენ სავარაუდოდ შეხვალთ იმ სიტუაციაში, როდესაც მხოლოდ ერთი ტიპის შრიფტის ფაილი გაქვთ და რატომღაც უნდა გადააკეთოთ იგი მეორეში. FontSquirrel და Font2Web გთავაზობთ ონლაინ ინსტრუმენტებს, რომლებიც მხოლოდ ამის გაკეთებას გააკეთებენ.

დასკვნა

ეს უკვე იცოდი შინაარსი თქვენი ვებ – გვერდის ყველაზე მნიშვნელოვანი ასპექტია. კარგად შემუშავებული შინაარსი იმსახურებს კარგად შემუშავებულ ტიპოგრაფიას; ნუ იმედგაცრუებთ საიტის ვიზიტორებს ტექსტით, რომელთა სტრუქტურა რთულია წაკითხული ან დამაბნეველი. საგულდაგულოდ დაგეგმილი ვიზუალური იერარქიით, რომელიც ემორჩილება ტიპოგრაფიულ საუკეთესო პრაქტიკებს, თქვენი შემოქმედებითი აზრები ასევე შეიძლება შემოქმედებითად იყოს წარმოდგენილი. ბედნიერი აკრეფით!

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