Задаволены
- 01. Атрыманне тыпаграфікі ў маштабе
- 02. Наш узор старонкі
- 03. Спачатку праверка самага маленькага экрана
- 04. Рухаемся ўверх
- 05. Уверх-уверх!
- 06. Калі падсумаваць усё
- 07. Далейшае чытанне
- Спадабалася гэта? Прачытайце гэтыя!
- Неабходныя веды: Асноўныя веды CSS і HTML. Знаёмства з тыпаграфікай
- Патрабуецца: Ваш любімы тэкставы рэдактар і браўзэр
- Час праекта: Каля 30 хвілін
Файл падтрымкі 1
Мы прывыклі думаць пра памер тыпу адносна базавага памеру шрыфта, выкарыстоўваючы ems або працэнты. Адказваючы вэб-дызайну, мы пішам шмат правілаў і выбіраем кропкі спынення, каб пераканацца, што наш макет адпавядае шматлікім памерах экрана. Тып - цудоўная вадкасць, але гэта не адзін памер, які падыходзіць усім. Мы разгледзім некалькі хуткіх парад па афармленні тыпаграфікі, каб яна добра адпавядала вашаму макету, незалежна ад таго, якая шырыня прылады ці экрана.
Зразумела, у гэтым ёсць шмат больш, чым можа быць разгледжана ў адным уроку. Такім чынам, ёсць мноства карысных рэсурсаў, пералічаных таксама ніжэй.
01. Атрыманне тыпаграфікі ў маштабе
Ах, спагадны вэб-дызайн! Цудоўна плаўныя сеткі і запыты мультымедыя робяць нашы канструкцыі адпаведнымі экранам любога памеру. На шчасце для нас, набірайце шалі амаль бясконца і перапрацоўваецца ў любы кантэйнер, які мы яму даем. Наўрад ці трэба задумацца над нашымі спагаднымі макетамі ... ці не так? У ідэале, калі нашы агульныя макеты маштабуюцца, трэба і наш тып, і вось адзін са спосабаў зрабіць гэта.
02. Наш узор старонкі
Для мэт гэтага прыкладу я падрыхтаваў вельмі простую старонку для дэманстрацыі, выкарыстоўваючы ў якасці зместу першыя некалькі абзацаў Прыгод Алісы ў краіне цудаў. Мы спадзяемся, што ваш сайт будзе крыху больш, але прастата цалкам адпавядае нашым патрэбам у гэтай дэманстрацыі, і тая ж тэхніка можа прымяняцца да больш складаных старонак.
Давайце паглядзім на нашу крыніцу, каб убачыць, што ў нас пад капотам. H1 для нашага загалоўка і некалькі абзацаў, загорнутых у які змяшчае div, зручна прысвойваюць клас пераносу. У гэтым прыкладзе мы выкарыстаем гэты кантэйнер для кіравання даўжынёй радкоў. Для вашай уласнай працы шырыня гэтага кантэйнера будзе вызначацца вашай сеткай і яе спагадным паводзінамі, але прымяняюцца тыя ж ідэі.
Хуткае пранікненне ў CSS паказвае, што мы вызначылі памер шрыфта на 100% (каля 16 пікселяў для даведкі). І кожны тэкставы элемент памер ems. Прыемна і адносна! Мы добра пачалі:
цела {
памер шрыфта: 100%;
вышыня лініі: 1,6875;
сямейства шрыфтоў: Грузія;
}
У нас наладжана асноўная шкала тыпаграфікі, таму зараз давайце паглядзім, як гэта трымаецца пры розных памерах экрана.
03. Спачатку праверка самага маленькага экрана
Давайце пачнем разглядаць наш макет на вельмі маленькай шырыні экрана, скажам, каля 320 пікселяў у шырыню. Верагодна, што вы ўбачыце на гэтых папулярных рэчах на мабільных прыладах.
Першапачаткова пры гэтай вузкай шырыні даўжыня нашых радкоў крыху карацейшая за агульнапрынятую аптымальную даўжыню ў 45 і 75 знакаў. Або, калі вы не прыхільнік падліку сімвалаў, вы можаце заўважыць, што радкі адчуваюць сябе кароткімі і ўскладніць сачыненне за тэкстам. Асабіста я часцей за ўсё іду з чытаннем.
Каб атрымаць крыху больш месца для зручнай даўжыні лініі, мы маглі б паменшыць агульны памер тыпу альбо зрабіць наш кантэйнер крыху большым. Паколькі гэта падручнік па тыпу памераў, я пайду з першым, але другі таксама будзе цалкам прымальным варыянтам.
Каб паклапаціцца пра гэта, давайце напішам медыязапыт на максімальную шырыню 400 пікселяў. Так, гэта не зусім 320 пікселяў, але я аддаю перавагу ўсталёўваць кропкі спынення зыходзячы з таго, дзе дызайн паказвае патрэбнасць у іх, а не на пэўных вымярэннях прылад.
Самы просты спосаб змяніць памер усіх тыпаў - змяніць памер, прысвоены нашаму цела>Уласцівасць памеру шрыфта:
Экран толькі для @media і (максімальная шырыня: 400 пікселяў) {
body {памер шрыфта: 90%;}
}
Дзякуючы таму, што мы першапачаткова размеркавалі ўвесь наш тып ems, мы можам унесці гэтыя змены ў агульны шэраг толькі адным радком. Так, для адноснага тыпу памераў!
04. Рухаемся ўверх
Калі мы робім тое, што робяць вэб-дызайнеры, і працягваем змяняць памеры акна нашага аглядальніка, наш кантэйнер адноснага памеру павялічваецца, і наш тэкст змяняецца па меры прасоўвання. Якраз тое, чаго б вы чакалі. Але сочыце за даўжынёй лініі. Калі гэта пачынае выглядаць і адчуваць сябе занадта доўга?
Прыблізна 800 пікселяў у шырыню (ад агульнага памеру акна браўзэра) даўжыні радкоў пачынаюць выглядаць няўтульна доўга. Падобна на добры час, каб дадаць яшчэ адзін пункт спынення для нашага тыпу.
Экран толькі для @media і (максімальная шырыня: 800 пікселяў) {
body {памер шрыфта: 100%;}
}
Экран толькі для @media і (максімальная шырыня: 1100 пікселяў) {
body {памер шрыфта: 120%;}
}
Вось як выглядае наша старонка зараз пры любой шырыні акна ад 800 да 1100 пікселяў. У нас ёсць крыху больш месца для працы, і зараз наш тып запаўняе яго крыху больш прыгожа:
На гэты раз мы пішам два запыты ў СМІ. Адзін з максімальнай шырынёй 800 пікселяў з памерам шрыфта цела, усталяваным на 100%, які ахоплівае ўсё паміж шырынёй акна 500 пікселяў і шырынёй акна 800 пікселяў. Затым секунда, калі наша шырыня акна перавышае 800 пікселяў, каб мы маглі павялічыць наш базавы памер шрыфта.
Я павялічыў памер базавага шрыфта да 120%, як толькі мы пераадолеем 800 пікселяў у шырыню, каб атрымаць даўжыню радка крыху больш, дзе мне падабаецца. Зразумела, гэта крыху суб'ектыўна, а таксама залежыць ад самога зместу і навакольнага зместу. Выберыце кропкі спынення і змены памераў, якія маюць сэнс для вас і вашага дызайну. Камфортнае чытанне і збалансаваны макет - галоўная мэта. Праверка макетаў не толькі ў зменным памеры настольнага браўзэра дапаможа вам знайсці лепшыя месцы для іх.
05. Уверх-уверх!
Вы можаце здагадацца, што будзе далей, я буду працягваць пашыраць акно браўзэра і глядзець, што будзе. Нядзіўна, што даўжыні радкоў павялічваюцца, і яны зноў пачынаюць набліжацца да невыноснай даўжыні - каля 1100 пікселяў. Час для чарговага пункту перапынку? Мы маглі б працягваць і працягваць так бясконца доўга, але гэта не здавалася б такім разумным, гэта пачынае здавацца бясконцым!
Тэхнічна, ваш тып можа працягваць маштабавацца бясконца. Аднак, хутчэй за ўсё, ваш макет, а выявы - не. У нейкі момант нам даводзіцца рабіць перапынкі. І для гэтай простай дэманстрацыі я вырашыў, што гэта 1100 пікселяў.
Застаецца напісаць яшчэ адзін заключны запыт на медыя. Я хачу нешта, што спыніць рост даўжыні лініі, каб мы маглі замарозіць рэчы ў гэты момант, калі ў нас ёсць прымальная даўжыня лініі. Самы просты спосаб зрабіць гэта - паставіць максімальную шырыню на div, які змяшчае наш тэкст.
Спачатку мы павінны вызначыць прыблізную шырыню нашага змяшчаючага div у пікселях. Калі шырыня акна нашага аглядальніка складае 1100 пікселяў, а шырыня раздзела "70%" мае невялікую частку матэматыкі, таму наш div мае шырыню каля 770 пікселяў. (1100 *. 7 разоў).
Узброіўшыся гэтым, мы адрэдагуем наш апошні запыт у СМІ так:
Экран толькі для @media і (мінімальная шырыня: 1100 пікселяў) {
body {памер шрыфта: 120%;}
.wrap {максімальная шырыня: 770 пікселяў;}
}
Тып нашай дэманстрацыі настолькі вялікі, наколькі мы вырашылі, што яе можна атрымаць:
У нас гэта ёсць. Простая тэхніка, каб ваш тып быў зручным і зручным для чытання на розных памерах экрана.
06. Калі падсумаваць усё
Нават з гэтага простага прыкладу вы, верагодна, пачынаеце бачыць, што вы маглі б быць нашмат больш падрабязным наконт таго, дзе вы дадаеце кропкі перапынку для вашага тыпу, каб кантраляваць даўжыню лініі. Тады як наконт кіраўніцтва і іерархіі? Гэта таксама залежыць ад змены памераў кантэйнера і тыпу. Ёсць так шмат, каб разгледзець!
Сачыце за сваім тыпам, а потым унясіце карэктывы, калі гэта мае сэнс для вашага макета і вашага праекта. Справа не ў тым, колькі медыя-запытаў або кропак спынення вы дадаяце. Гаворка ідзе пра тое, каб зрабіць ваш дызайн трывалым для вас і тых, хто яго выкарыстоўвае.
07. Далейшае чытанне
Гэтая простая дэма - толькі вяршыня айсберга. Калі тыпаграфія для адаптыўнага вэб-дызайну - гэта тое, пра што вы хочаце прачытаць больш, вось рэкамендаванае чытанне:
- Цім Браўн выдатна спраўляецца са зборам метадаў і рэчаў, над якімі трэба падумаць, на добрым тыпе Інтэрнэту.
- Калі гаворка заходзіць пра нашы варыянты вызначэння памеру ў Інтэрнэце, ёсць не толькі працэнты і ems. Ітан Маркат тлумачыць усё гэта ў блогу Typekit.
- Цяжка размаўляць, не натыкаючыся на балбатню пра ўсталяванне вертыкальнага рытму. Гэты класічны артыкул пра 24 спосабы выдатна падыходзіць да ідэі.
Вэл Хед - дызайнер і кансультант, які любіць, каб Інтэрнэт заставаўся настолькі дзіўным, наколькі гэта магчыма. Яна праводзіць Дзень вэб-дызайну, піша для CreativeJS і вядзе блогі на сайце valhead.com.
Спадабалася гэта? Прачытайце гэтыя!
- Што такое тыпаграфіка?
- Загрузіце лепшыя бясплатныя шрыфты
- Бясплатны выбар шрыфта графіці
- Бясплатныя шрыфты для татуіровак для дызайнераў
- Лепшыя бясплатныя вэб-шрыфты для дызайнераў
