Inhalt
- 01. Typografie no Skala kréien
- 02. Eis Probe Säit
- 03. Préift als éischt de klengsten Ecran
- 04. Weider op
- 05. Op an erop!
- 06. Fir alles ze summéieren
- 07. Weiderliesen
- Liked dëst? Liest dës!
- Wëssen néideg: Basis CSS an HTML Wëssen. Vertraut mat Typographie
- Verlaangt: Äre Liiblingstexteditor an e Browser
- Projet Zäit: Ongeféier 30 Minutten
Support Datei 1
Mir si gewinnt iwwer d'Gréisstaart relativ zu enger Basis Schrëftgréisst ze denken andeems mir EMS oder Prozenter benotzen. Mat reaktiounsfäeger Webdesign schreiwe mir vill Regelen a wielt Breakpoints fir sécher ze sinn datt eise Layout ville Bildschirmgréissten passt. Typ ass wonnerschéi Flëssegkeet, awer et ass net eng Gréisst passt all. Mir kucken e puer séier Tipps fir Är Typografie ze kréien fir Äert Layout schéin ze passen egal wéi den Apparat oder d'Bildschirmbreet geschitt.
Natierlech gëtt et vill méi zu dësem wéi an engem Tutorial ofgedeckt ka ginn. Also et gi vill nëtzlech Ressourcen och hei ënnendrënner opgezielt.
01. Typografie no Skala kréien
Ah, reaktiounsfäeger Webdesign! Wonnerbar flësseg Gitter a Medienufroen, déi eis Designs fit Screens vu jidder Gréisst maachen. Glécklech fir eis, typ Skalen bal onendlech a reflektéiert an all grousse Container dee mir et ginn. Braucht kaum en zweete Gedanken ze maachen fir eis reaktiounsfäeg Layouten ... oder maache mir? Idealerweis, wann eis Gesamtlayouten skaléieren, soll och eisen Typ sinn, an hei ass ee Wee et ze maachen.
02. Eis Probe Säit
Fir den Zweck vun dësem Beispill hunn ech eng ganz einfach Säit virbereet fir ze benotzen fir déi éischt Paragrafen vun Alice's Adventures in Wonderland als Inhalt ze benotzen. Äre Site wäert hoffentlech e bësse méi drun hunn, awer d'Einfachheet passt eise Besoine fir dës Demo perfekt an déi selwecht Technik kann op méi komplex Säiten applizéiert ginn.
Loosst eis eis Quell kucken fir ze kucken wat mir ënner der Kapuze hunn. En H1 fir eisen Titel an e puer Paragrafen an engem enthale Div gewéckelt, bequem der Klass vum Wrap zougewisen. Mir benotzen dëse Container fir ze hëllefen eis Linnlängen an dësem Beispill ze managen. Fir Är eegen Aarbecht gëtt d'Breet vun dësem Container bestëmmt vun Ärem Raster a sengem reaktiouns Behuelen awer déi selwecht Iddien gëllen.
E schnelle Dip an den CSS weist datt mir eis Kierper Schrëftgréisst op 100% gesat hunn (ongeféier 16px als Referenz). An all Textelement ass an ems Gréisst. Flott a relativ! Mir fänken e gudde Start un:
Kierper {
Schrëftgréisst: 100%;
Linn-Héicht: 1.6875;
Schrëftfamill: Georgien;
}
Mir hunn eis Basis Typographie Skala all opgestallt, also loosst eis kucken wéi dëst op verschiddene Bildschirmgréissten hält.
03. Préift als éischt de klengsten Ecran
Loosst eis ufänken eis Layout mat enger ganz klenger Bildschirmbreedung ze kucken, soen eppes ronderëm 320 Pixel breet. Wahrscheinlech wat Dir vun dëse populäre Saachen um mobilen Apparat géift gesinn.
Ufanks bei dëser enker Breet sinn eis Linnlängten e bësse méi kuerz wéi déi allgemeng akzeptéiert Optimal Längt vu 45 a 75 Zeechen. Oder, wann Dir kee Fan sidd fir Zeechen ze zielen, kënnt Dir oppassen datt d'Linnen kuerz sinn an et méi schwéier maachen den Text ze verfollegen. Perséinlech tendéieren ech méi mam Liesen ze fillen méi oft wéi net.
Fir e bësse méi Plaz fir eng komfortabel Linnlängt ze kréien, kéinte mir d'Gesamtgréisst vum Typ erof bréngen, oder mir kéinte eise Container e bësse méi grouss maachen. Well dëst en Tutorial fir d'Gréisstyp ass, ginn ech mat der fréierer, awer déi lescht wier och eng komplett akzeptabel Optioun.
Fir dëst ze këmmeren, schreiwe mir eng Medieaffrage fir eng maximal Breet vun 400 Pixel. Jo, dat sinn net genau 320 Pixel, awer ech hu léiwer Breakpoints gesat op Basis wou den Design e Besoin fir se weist, net op bestëmmten Apparatmiessungen.
Deen einfachste Wee fir d'Gréisst vun all Typ z'änneren, ass d'Gréisst z'änneren Kierper>'S Schrëftgréisst Propriétéit:
@media nëmmen Écran an (max-Breet: 400px) {
Kierper {Schrëftgréisst: 90%;}
}
Dank der Tatsaach datt mir all eis Typ mat Ems am Ufank ugepasst hunn, kënne mir dës Ännerung iwwer de Comité mat nëmmen enger Zeil maachen. Yay, fir relativ Typgréisst!
04. Weider op
Wa mir maachen wéi Webdesigner maachen a weider eis Browserfenster grouss änneren, gëtt eise relativ grousse Container ëmmer méi grouss an eisen Text reflektéiert wärend mir ginn. Just wat Dir Iech erwaart. Awer haalt d'Linnlängt am Aa. Wéini fänkt et ze laang un ze kucken a sech ze fillen?
Op ongeféier 800 Pixel breet (vun der gesamter Browserfenster Gréisst) fänken d'Linnlängen onbequem laang aus. Gesäit eng gutt Zäit aus fir en anere Breakpoint fir eisen Typ bäizefügen.
@media nëmmen Écran an (max-Breet: 800px) {
Kierper {Schrëftgréisst: 100%;}
}
@media nëmmen Écran an (max-Breet: 1100px) {
Kierper {Schrëftgréisst: 120%;}
}
Hei ass wéi eis Säit elo an all Fënsterbreet tëscht 800 an 1100 Pixel breet ausgesäit. Mir hunn e bësse méi Plaz fir mat ze schaffen an elo fëllt eisen Typ e bësse méi schéin:
Dës Kéier schreiwe mir zwou Medienufroen. Ee mat enger Max Breet vun 800 Pixel mat der Kierper Schrëftgréisst op 100% gesat, wat alles tëscht enger 500 Pixel Fënster Breet an enger 800 Pixel Fënster Breet deckt. Dann eng Sekonn fir wann eis Fënster Breet iwwer 800 Pixel ass, fir datt mir eropgoe kënnen eis Basis Schrëftgréisst.
Ech hunn d'Basis Schrëftgréisst op 120% erhéicht eemol mir laanscht 800 Pixel an der Breet réckele fir d'Linnelängt e bësse méi ze kréien, wou ech et gär hunn. Dëst ass e bësse subjektiv natierlech, an och ofhängeg vum Inhalt selwer a ronderëm Inhalt. Wielt Breakpoints a Gréisst Ännerungen déi Sënn fir Iech an Ären Design maachen. Gemittlech Liesen an equilibréiert Layouten sinn hei d'Zil. Testen vun Ären Layouten op méi wéi just e resized Desktop Browser hëlleft Iech op déi bescht Plazen fir dës och z'erreechen.
05. Op an erop!
Dir kënnt roden wat nächst kënnt, ech wäert meng Browserfenster weider breet maachen a kucke wat geschitt. Net iwwerraschend wéi d'Linnlängen ëmmer méi laang ginn a se fänken un erdrobar Längt ëm 1.100 Pixel erem unzegoen. Zäit fir en anere Brochstéck? Mir kéinten einfach esou weider goen an onendlech, awer dat géif net sou schéi sinn, dëst fänkt un endlos ze sinn!
Technesch kann Ären Typ weider onendlech skaléieren. Wéi och ëmmer, d'Chance sinn Äre Layout an Är Biller kënnen net. Iergendwann musse mir d'Pausen undoen. A fir dës einfach Demo hunn ech decidéiert datt de Punkt 1.100 Pixel ass.
Eng lescht typebezunn Medienufro bleift ze schreiwen. Ech wëll eppes wat eis Zeillängen ophält ze wuessen, sou datt mir Saachen op dësem Punkt afréiere kënnen, wou mir akzeptabel Linnlängen hunn. Deen einfachste Wee fir dat ze maachen ass eng maximal Breet op der Div ze setzen déi eisen Text enthält.
Als éischt musse mir déi ongeféier Breet vun eiser enthale Div a Pixel bestëmmen. Wann eis Browserfenster 1.100 Pixel breet ass an eis Wrap Div eng Breet vun 70% huet, e klengt bësse Mathematik seet eis datt eis Div ongeféier 770 Pixel breet ass. (1.100 *. 7x).
Arméi mat deem, wäerte mir eis lescht Medienufro esou änneren:
@media nëmmen Écran an (min Breet: 1100px) {
Kierper {Schrëftgréisst: 120%;}
.wrap {max-Breet: 770px;}
}
Eis Demo's Typ sou grouss wéi mir décidéiert hunn et erlaabt ze kréien:
Do hu mer et. Eng einfach Technik fir Ären Typ schéin a gemittlech ze halen iwwer verschidde Bildschirmgréissten.
06. Fir alles ze summéieren
Och aus dësem einfachen Beispill fänkt Dir wahrscheinlech un ze gesinn datt Dir vill méi detailléiert kéint sinn iwwer wou Dir Breakpoints fir Äert Typ füügt fir d'Linnlängt ze kontrolléieren. Da wat iwwer Féierung an Hierarchie? Dës sinn och betraff wann Äre Container an Äert Gréissten änneren. Et gëtt sou vill ze berécksiichtegen!
Halen an Aen op Ärem Typ an da maacht Upassunge wou et Sënn mécht fir Äre Layout an Äre Projet. Et geet net drëm wéivill Medienufroen oder Breakpoints Dir derbäisetzen. Et geet drëm Ären Design zolidd ze maachen fir Iech a jiddereen deen et benotzt.
07. Weiderliesen
Dës einfach Demo ass just den Tipp vum Äisbierg. Wann Typographie fir reaktiounsfäegt Webdesign eppes ass wat Dir méi iwwer liese wëllt, hei ass e recommandéiert Liesen:
- Den Tim Brown mécht eng wonnerbar Aarbecht fir Techniken ze sammelen a Saache fir iwwer gutt Webtyp nozedenken.
- Et gi méi wéi just Prozentzuelen an EMS wann et ëm eis Optiounen fir d'Gréisstyp um Internet kënnt. Den Ethan Marcotte erkläert dat alles um Typekit Blog.
- Et ass schwéier Typ ze schwätzen ouni a Gespréich ze lafen iwwer e vertikale Rhythmus. Dëse klassesche 24 Weeër Artikel ass super an d'Iddi.
De Val Head ass en Designer a Beroder dee gär gesäit datt den Internet sou fantastesch wéi méiglech bleift. Si leeft Web Design Day, schreift fir CreativeJS a Blogs op valhead.com.
Liked dëst? Liest dës!
- Wat ass Typographie?
- Luet déi bescht gratis Schrëften erof
- Gratis Graffiti Schrëftauswiel
- Gratis Tattoo Schrëften fir Designer
- Déi bescht gratis Web Schrëften fir Designer
