{"id":1142,"date":"2012-02-09T09:36:17","date_gmt":"2012-02-09T05:36:17","guid":{"rendered":"https:\/\/blog.igloonet.cz\/?p=1142"},"modified":"2014-08-12T00:42:46","modified_gmt":"2014-08-11T22:42:46","slug":"urcujte-relativni-velikost-fontu-pomoci-css3","status":"publish","type":"post","link":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/","title":{"rendered":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p>Pokud budeme vytv\u00e1\u0159et kask\u00e1dov\u00e9 styly pro nov\u00fd web, m\u00e1me v&nbsp;podstat\u011b dv\u011b mo\u017enosti, jak zapsat velikosti font\u016f. Jedna z&nbsp;nich je definovat v\u0161e \u201enapevno\u201c, nap\u0159\u00edklad pomoc\u00ed rozm\u011bru v&nbsp;pixelech. Druhou mo\u017enost\u00ed je ur\u010dit velikost relativn\u011b v\u016f\u010di nad\u0159azen\u00e9mu HTML elementu. Oba zp\u016fsoby maj\u00ed sv\u00e9 v\u00fdhody i&nbsp;nev\u00fdhody. CSS3 v\u0161ak roz\u0161i\u0159uje definici relativn\u00edch rozm\u011br\u016f o&nbsp;novou jednotku, tzv. <strong>rem<\/strong>, a&nbsp;sna\u017e\u00ed se tak vn\u00e9st do&nbsp;cel\u00e9 problematiky v\u011bt\u0161\u00ed zjednodu\u0161en\u00ed z\u00e1pisu.<!--more--><\/p>\n<p>Jak ji\u017e jsem nakousl, m\u00e1me v&nbsp;kask\u00e1dov\u00fdch stylech dv\u011b z\u00e1kladn\u00ed d\u00e9lkov\u00e9 jednotky:<\/p>\n<ul>\n<li><strong>absolutn\u00ed jednotky<\/strong> - p\u0159edev\u0161\u00edm pixel (px)<\/li>\n<li><strong>relativn\u00ed jednotky<\/strong> -&nbsp;em<\/li>\n<\/ul>\n<p>Bli\u017e\u0161\u00ed definici <em>pixelu<\/em> a&nbsp;jednotky <em>em<\/em> naleznete t\u0159eba zde na&nbsp;webu <a href=\"http:\/\/css-tricks.com\/css-font-size\/\">CSS-tricks<\/a>. V&nbsp;tomto \u010dl\u00e1nku zm\u00edn\u00edm jen z\u00e1kladn\u00ed rozd\u00edly.<\/p>\n<h2>Absolutn\u00ed jednotky<\/h2>\n<p>Pou\u017e\u00edv\u00e1n\u00ed absolutn\u00edch jednotek m\u00e1 jednu velikou v\u00fdhodu. Je to spolehliv\u00e9 a&nbsp;konzistentn\u00ed. Tak\u00e9 samotn\u00e9 definice v&nbsp;CSS souborech se velice snadno zapisuj\u00ed. V\u0161e uk\u00e1\u017eu na&nbsp;n\u00e1sleduj\u00edc\u00edm kousku HTML5&nbsp;k\u00f3du:<\/p>\n<pre>\n<article>\n  <header>\n    <h1 class=\"main-title\">\n      Uk\u00e1zkov\u00e1 str\u00e1nka pro blog spole\u010dnosti <cite>IglooNET<\/cite>\n    <\/h1>\n    <h2 class=\"byline\">\n      napsal <a class=\"person\" href=\"http:\/\/twitter.com\/martin_pesout\">Martin Pe\u0161out<\/a>\n    <\/h2>\n  <\/header>\n\n  <div class=\"article-body\">\n     <p><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit<\/b>, \nsed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut \naliquip ex ea commodo consequat.<\/p>\n  <\/div>\n\n  <footer>\n    <p>Naps\u00e1no v roce 2012<\/p>\n  <\/footer>\n<\/article>\n<\/pre>\n<p>Tento \u010dl\u00e1nek je zam\u011b\u0159en na&nbsp;velikosti font\u016f. Nebudeme se tedy zab\u00fdvat ot\u00e1zkou, jak nastylovat rozlo\u017een\u00ed prvk\u016f na&nbsp;str\u00e1nce. Definice kask\u00e1dov\u00fdch styl\u016f s&nbsp;pou\u017eit\u00edm absolutn\u00edch jednotek by mohla vypadat n\u00e1sledovn\u011b:<\/p>\n<pre>\nbody {\n  font: normal 16px\/24px 'Arial CE', 'Helvetica CE', Arial, Helvetica, sans-serif;\n}\n\n.main-title {\n  font: normal 30px\/36px Georgia, 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;\n}\n\n.main-title cite {\n  font-size: 42px;\n  line-height: 50px;\n}\n\n.article-body {\n  font-size: 18px;\n}\n\n.caps,\nfooter {\n  font-size: 14px;\n}<\/pre>\n<p>Tento z\u00e1pis m\u00e1 ale jednu nev\u00fdhodu. U\u017eivatel\u00e9 star\u0161\u00edch prohl\u00ed\u017ee\u010d\u016f Internet Explorer (dokonce i&nbsp;verze 9) jsou znev\u00fdhodn\u011bni. Nemaj\u00ed mo\u017enost m\u011bnit velikost textu na&nbsp;webu pou\u017eit\u00edm funkce na&nbsp;zv\u011bt\u0161en\u00ed\/zmen\u0161en\u00ed fontu v&nbsp;prohl\u00ed\u017ee\u010di. Posledn\u00ed verze v\u011bt\u0161iny \u201evelk\u00fdch\u201c prohl\u00ed\u017ee\u010d\u016f u\u017e obsahuj\u00ed funkci p\u0159ibli\u017eov\u00e1n\u00ed, kter\u00e1 zv\u011bt\u0161uje nar\u00e1z rozm\u011bry v\u0161ech prvk\u016f str\u00e1nky.<\/p>\n<h2>Relativn\u00ed jednotky<\/h2>\n<p>Probl\u00e9m zv\u011bt\u0161ov\u00e1n\u00ed font\u016f v&nbsp;Internet Exploreru je \u0159e\u0161iteln\u00fd pou\u017eit\u00edm relativn\u00edch jednotek. Pokud chceme pou\u017e\u00edt tuto techniku, je nutn\u00e9 v&nbsp;prv\u00e9 \u0159ad\u011b upravit z\u00e1kladn\u00ed velikost fontu pro celou str\u00e1nku. Rozm\u011br zadefinujeme v&nbsp;procentech. V\u00fdchoz\u00ed velikost pro text ve&nbsp;v\u011bt\u0161in\u011b modern\u00edch prohl\u00ed\u017ee\u010d\u016f je 16 pixel\u016f. Co\u017e znamen\u00e1, \u017ee&nbsp;tento z\u00e1pis:<\/p>\n<pre>\nbody { \n  font: normal 16px 'Arial CE', 'Helvetica CE', Arial, Helvetica, sans-serif; \n}\n<\/pre>\n<p>je ekvivalentn\u00ed tomuto z\u00e1pisu:<\/p>\n<pre>\nbody { \n  font: normal 100% 'Arial CE', 'Helvetica CE', Arial, Helvetica, sans-serif; \n}\n<\/pre>\n<p>V\u00fdsledkem t\u00e9to \u00fapravy je flexibiln\u00ed definice rozm\u011bru fontu. A&nbsp;pr\u00e1v\u011b na&nbsp;tento rozm\u011br se odkazujeme pomoc\u00ed relativn\u00edch jednotek, d\u00edky kter\u00fdm zap\u00ed\u0161eme, o&nbsp;kolik bude velikost fontu v\u011bt\u0161\u00ed\/men\u0161\u00ed ne\u017e je velikost nad\u0159azen\u00e9ho HTML elementu.<\/p>\n<p>Velikost 100% tedy odpov\u00edd\u00e1 ve&nbsp;v\u011bt\u0161in\u011b prohl\u00ed\u017ee\u010d\u016f velikosti 16px. N\u011bkte\u0159\u00ed v\u00fdvoj\u00e1\u0159i v\u0161ak preferuj\u00ed zmen\u0161en\u00ed t\u00e9to velikost\u00ed na&nbsp;62.5%. To toti\u017e odpov\u00edd\u00e1 velikosti textu o&nbsp;rozm\u011bru 10 pixel\u016f, kter\u00e1 je sice hodn\u011b mal\u00e1 pro b\u011b\u017en\u00e9 \u010dten\u00ed, ale ve\u0161ker\u00e9 dal\u0161\u00ed v\u00fdpo\u010dty pomoc\u00ed relativn\u00edch jednotek budou n\u00e1sledn\u011b snaz\u0161\u00ed. Velikost <em>1em = 10px<\/em>, <em>0.8em = 8px<\/em>, <em>1.6em = 16px<\/em> apod. Zn\u00e1m\u00fd internetov\u00fd blog A&nbsp;List Apart v\u0161ak doporu\u010duje v&nbsp;\u010dl\u00e1nku <a href=\"http:\/\/www.alistapart.com\/articles\/howtosizetextincss\">How to Size Text in CSS<\/a> pou\u017e\u00edv\u00e1n\u00ed velikosti 100%, d\u00edky kter\u00e9 dos\u00e1hneme v\u00edce konzistentn\u00edho v\u00fdsledku.<\/p>\n<p>Pokud p\u0159ev\u00e1d\u00edme velikost v&nbsp;<em>pixelech<\/em> na&nbsp;jejich ekvivalentn\u00ed rozm\u011br v&nbsp;<em>em<\/em>, mus\u00edme pou\u017e\u00edt drobn\u00fd v\u00fdpo\u010det. <strong>Vezmeme velikost v&nbsp;pixelech, kterou chceme p\u0159ev\u00e9st a&nbsp;vyd\u011bl\u00edme ji velikost\u00ed nad\u0159azen\u00e9ho HTML elementu.<\/strong> V\u00fdsledek je n\u00e1\u0161 pot\u0159ebn\u00fd relativn\u00ed rozm\u011br, kter\u00fd m\u016f\u017eeme um\u00edstit do&nbsp;na\u0161eho CSS souboru jako rozm\u011br v&nbsp;<em>em<\/em>. Dost\u00e1v\u00e1me jednoduch\u00fd vzorec:<\/p>\n<p><em>c\u00edlov\u00fd rozm\u011br (px) \u00f7 kontext (px) = v\u00fdsledek (em)<\/em><\/p>\n<p>Toto je \u010d\u00e1st definice CSS z&nbsp;p\u0159edchoz\u00edho p\u0159\u00edkladu:<\/p>\n<pre>\n.main-title { \n  font: normal 30px\/36px Georgia, 'Times New CE', 'Times CE', 'Times New Roman', Times, serif; \n}\n<\/pre>\n<p>Pokud budeme cht\u00edt p\u0159ev\u00e9st rozm\u011br 30px do&nbsp;rozm\u011bru v&nbsp;<em>em<\/em>, mus\u00edme zn\u00e1t velikost nad\u0159azen\u00e9ho HTML elementu. V\u00edme, \u017ee&nbsp;m\u00e1me <em>font-size: 100%<\/em> a&nbsp;tak\u00e9, \u017ee&nbsp;je to ekvivalentn\u00ed velikosti 16px. Po dosazen\u00ed do&nbsp;na\u0161eho vzorce dost\u00e1v\u00e1me:&nbsp;<\/p>\n<p><em>30 \u00f7 16 = 1.875<\/em><\/p>\n<p>30px je 1.875-kr\u00e1t v\u011bt\u0161\u00ed ne\u017e 16px, tak\u017ee na\u0161e velikost fontu pro <em>.main-title<\/em> je 1.875em.<\/p>\n<p>Dal\u0161\u00ed rozm\u011br, kter\u00fd budeme p\u0159episovat, je&nbsp;tento:<\/p>\n<pre>\n.main-title cite { \n     font-size: 42px; \n     line-height: 50px;\n}\n<\/pre>\n<p>Pokud budeme cht\u00edt p\u0159epsat rozm\u011br 42px do&nbsp;rozm\u011bru v&nbsp;<em>em<\/em>, mus\u00edme si uv\u011bdomit, \u017ee&nbsp;do\u0161lo ke&nbsp;zm\u011bn\u011b nad\u0159azen\u00e9ho HTML elementu. To by je\u0161t\u011b tak nevadilo, jen\u017ee nad\u0159azen\u00fd element <em>.main-title<\/em> m\u00e1 jin\u00fd rozm\u011br. N\u00e1\u0161 vzorec bude vypadat takto:<\/p>\n<p><em>42 \u00f7 30 = 1.4<\/em><\/p>\n<p>42px je 1.4-kr\u00e1t v\u011bt\u0161\u00ed ne\u017e 30px, tak\u017ee na\u0161e velikost fontu pro <em>.main-title cite<\/em> je 1.4em.<\/p>\n<p>St\u00e1le v\u0161ak z\u016fst\u00e1v\u00e1 v\u00fdska \u0159\u00e1dku definovan\u00e1 v&nbsp;pixelech - 36px pro <em>.main-title<\/em> a&nbsp;50px pro <em>cite<\/em> uvnit\u0159 <em>.main_title<\/em>. To ale znamen\u00e1, \u017ee&nbsp;v\u00fd\u0161ka \u0159\u00e1dku se nebude m\u011bnit se zv\u011bt\u0161uj\u00edc\u00ed\/zmen\u0161uj\u00edc\u00ed se velikost\u00ed fontu. I&nbsp;na&nbsp;p\u0159epo\u010det t\u011bchto rozm\u011br\u016f m\u016f\u017eeme pou\u017e\u00edt stejn\u00fd vzorec s&nbsp;jedin\u00fdm rozd\u00edlem, \u017ee&nbsp;velikost rodi\u010dovsk\u00e9ho HTML elementu bude nahrazena velikost\u00ed font-size, ke&nbsp;kter\u00e9 se v\u00fd\u0161ka \u0159\u00e1dku vztahuje.&nbsp;<\/p>\n<p><em>36 \u00f7 30 = 1.2<\/em><br>\n<em>50 \u00f7 42 = 1.2<\/em><\/p>\n<p>Prvky <em>.main-title<\/em> a&nbsp;<em>cite<\/em> maj\u00ed vypo\u010d\u00edtanou velikost \u0159\u00e1dku 1.2em. A&nbsp;proto\u017ee oba elementy sd\u00edl\u00ed stejnou velikost, m\u016f\u017eeme ji nastavit jen jednou u&nbsp;nad\u0159azen\u00e9ho HTML elementu a&nbsp;zbytek se pod\u011bd\u00ed.<\/p>\n<p>Se\u010dteno a&nbsp;podtr\u017eeno. Kdy\u017e to v\u0161e p\u0159ep\u00ed\u0161eme do&nbsp;na\u0161eho CSS souboru, dostaneme n\u00e1sleduj\u00edc\u00ed z\u00e1pis:<\/p>\n<pre>\n.main-title {\n  font: normal 1.875em\/1.2em Georgia, 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;  \/* 30 \/ 18 *\/\n}\n\n.main-title cite {\n  font-size: 1.4em;  \/* 42 \/ 30 *\/\n}\n<\/pre>\n<p>Te\u010f si ur\u010dit\u011b \u0159\u00edk\u00e1te, \u017ee&nbsp;tento zp\u016fsob z\u00e1pisu je pom\u011brn\u011b pracn\u00fd. Pro\u010d ho tedy v\u016fbec pou\u017e\u00edvat? P\u0159edstavte si, \u017ee&nbsp;m\u00e1te na&nbsp;cel\u00e9m webu nadefinovan\u00e9 rozm\u011bry pomoc\u00ed pixel\u016f. A&nbsp;najednou si V\u00e1\u0161 klient vzpomene, \u017ee&nbsp;by cht\u011bl zv\u011bt\u0161it velikost v\u0161ech font\u016f. To, co mus\u00edte v&nbsp;t\u00e9to situaci ud\u011blat, je p\u0159epsat ve\u0161ker\u00e9 definice kask\u00e1dov\u00fdch styl\u016f. U&nbsp;velik\u00fdch projekt\u016f m\u016f\u017ee b\u00fdt p\u0159eps\u00e1n\u00ed v\u0161ech velikost\u00ed pom\u011brn\u011b pracn\u00e9. Pokud by v\u0161ak byla velikost font\u016f definovan\u00e1 pomoc\u00ed relativn\u00edch jednotek, tak jedin\u00e9 co ud\u011bl\u00e1me, je to, \u017ee&nbsp;zv\u00fd\u0161\u00edme <em>font-size<\/em> u&nbsp;elementu <em>body<\/em> v&nbsp;definici kask\u00e1dov\u00fdch styl\u016f.&nbsp;<\/p>\n<h2>Jednotka rem<\/h2>\n<p>Jak jsem ji\u017e zm\u00ednil, jednotka <em>em<\/em> je relativn\u00ed v\u016f\u010di <em>font-size<\/em> nad\u0159azen\u00e9ho HTML elementu. CSS3 p\u0159ich\u00e1z\u00ed s&nbsp;novou jednotkou <strong>rem<\/strong> (root em). Ta je relativn\u00ed v\u016f\u010di ko\u0159enov\u00e9mu HTML elementu - co\u017e je v&nbsp;na\u0161em p\u0159\u00edpad\u011b element <em>body<\/em>. My tak m\u016f\u017eeme definovat jednu z\u00e1kladn\u00ed velikost fontu pro celou webovou str\u00e1nku a&nbsp;v\u0161echny <em>rem<\/em> jednotky budou odvozeny p\u0159\u00edmo z&nbsp;tohoto rozm\u011bru.&nbsp;<\/p>\n<pre>\nbody {\n  font: normal 100%\/1.5rem 'Arial CE', 'Helvetica CE', Arial, Helvetica, sans-serif;\n}\n\n.main-title {\n  font: normal 1.875rem Georgia, 'Times New CE', 'Times CE', 'Times New Roman', Times, serif; \/* 30 \/ 16 *\/\n}\n\n.main-title cite {\n  font-size: 2.625rem;  \/* 42 \/ 16 *\/\n}\n\n.article-body {\n  font-size: 1.125rem;  \/* 18 \/ 16 *\/\n}\n\n.caps,\nfooter {\n  font-size: 0.875rem;  \/* 14 \/ 16 *\/\n}<\/pre>\n<p>St\u00e1le se jedn\u00e1 o&nbsp;relativn\u00ed ur\u010den\u00ed velikosti fontu. Akor\u00e1t n\u00e1\u0161 vzorec se trochu zm\u011bnil:<\/p>\n<p><em>c\u00edlov\u00fd rozm\u011br (px) \u00f7 ko\u0159enov\u00fd HTML element (px) = v\u00fdsledek (rem)<\/em><\/p>\n<p>Nemus\u00edme tedy p\u0159em\u00fd\u0161let o&nbsp;tom, jak jsou jednotliv\u00e9 HTML elementy do&nbsp;sebe zano\u0159en\u00e9. Do&nbsp;cel\u00e9 problematiky z\u00e1pisu relativn\u00edch rozm\u011br\u016f v&nbsp;CSS je najednou vnesen v\u011bt\u0161\u00ed po\u0159\u00e1dek. Ur\u010dit\u011b si \u0159\u00edk\u00e1te, jak je to skv\u011bl\u00e9! Bohu\u017eel podpora ve&nbsp;webov\u00fdch prohl\u00ed\u017ee\u010d\u00edch nen\u00ed a\u017e tak ide\u00e1ln\u00ed, jak by si v\u00fdvoj\u00e1\u0159i p\u0159edstavovali. Proto\u017ee jednotka <em>rem<\/em> p\u0159i\u0161la a\u017e s&nbsp;n\u00e1stupem <em>CSS3<\/em>, byla do&nbsp;hlavn\u00edch prohl\u00ed\u017ee\u010d\u016f implementov\u00e1na postupn\u011b. Podporov\u00e1ny jsou:<\/p>\n<ul>\n<li>Firefox 3.6+<\/li>\n<li>Chrome<\/li>\n<li>Safari 5+<\/li>\n<li>Internet Explorer 9+<\/li>\n<li>Opera 11.60+<\/li>\n<\/ul>\n<p>Nelze ji tedy je\u0161t\u011b pova\u017eovat za univerz\u00e1ln\u00ed jednotku. Pokud v\u0161ak chceme podporovat i&nbsp;star\u0161\u00ed prohl\u00ed\u017ee\u010de, je nutn\u00e9 deklarovat tzv. <em>fallback<\/em> v&nbsp;pixelech. Pokud prohl\u00ed\u017ee\u010d nebude um\u011bt pracovat s&nbsp;jednotkou <em>rem<\/em>, pou\u017eije se alternativn\u00ed rozm\u011br. N\u00e1\u0161 p\u0159\u00edklad by pak mohl vypadat takto:<\/p>\n<pre>\nbody {\n  font: normal 100%\/1.5rem 'Arial CE', 'Helvetica CE', Arial, Helvetica, sans-serif;\n}\n\n.main-title {\n  font: normal 30px Georgia, 'Times New CE', 'Times CE', 'Times New Roman', Times, serif;\n  font-size: 1.875rem;  \/* 30 \/ 16 *\/\n} \n\n.main-title cite {\n  font-size: 42px;\n  font-size: 2.625rem;  \/* 42 \/ 16 *\/\n}\n\n.article-body {\n  font-size: 18px;\n  font-size: 1.125rem;  \/* 18 \/ 16 *\/\n}\n\n.caps,\nfooter {\n  font-size: 14px;\n  font-size: 0.875rem;  \/* 14 \/ 16 *\/\n}<\/pre>\n<h2>Co tedy pou\u017e\u00edvat?<\/h2>\n<p>Absolutn\u00ed i&nbsp;relativn\u00ed jednotky maj\u00ed sv\u00e9 v\u00fdhody i&nbsp;nev\u00fdhody. Definice rozm\u011br\u016f v&nbsp;pixelech nab\u00edz\u00ed zna\u010dnou jednoduchost a&nbsp;p\u0159esnost p\u0159i z\u00e1pisu CSS. Tomuto \u0159e\u0161en\u00ed v\u0161ak chyb\u00ed pot\u0159ebn\u00e1 flexibilita. Relativn\u00ed jednotka <em>em<\/em> sice tyto nedostatky odstra\u0148uje, ale bohu\u017eel i&nbsp;v&nbsp;t\u00e9to mal\u00e9 uk\u00e1zce bylo vid\u011bt, \u017ee&nbsp;je nutn\u00e9 p\u0159i p\u0159evodu v\u0161e \u201epracn\u011b\u201c p\u0159epo\u010d\u00edt\u00e1vat.&nbsp;<\/p>\n<p>Osobn\u011b si mysl\u00edm, \u017ee&nbsp;pou\u017e\u00edv\u00e1n\u00ed jednotky <em>rem<\/em> je elegantn\u00edm \u0159e\u0161en\u00edm, jak z&nbsp;t\u00e9to situace ven. Ale je\u0161t\u011b n\u011bjak\u00fd \u010das potrv\u00e1, ne\u017e budou star\u00e9 prohl\u00ed\u017ee\u010de vytla\u010deny ze st\u0159edu z\u00e1jmu v\u00fdvoj\u00e1\u0159\u016f a&nbsp;budeme tak moci zahodit nutn\u00e9 <em>fallbacky<\/em>.<\/p>\n<h2>Zdroje a&nbsp;odkazy na&nbsp;podrobn\u011bj\u0161\u00ed informace<\/h2>\n<ul>\n<li>Font sizing with REM, <a href=\"http:\/\/snook.ca\/archives\/html_and_css\/font-size-with-rem\">http:\/\/snook.ca\/archives\/html_and_css\/font-size-with-rem<\/a>, kv\u011bten 2011<\/li>\n<li>How to size text using ems, <a href=\"http:\/\/clagnut.com\/blog\/348\/\">http:\/\/clagnut.com\/blog\/348\/<\/a>, kv\u011bten 2004<\/li>\n<li>Type study: Sizing the legible letter, <a href=\"http:\/\/blog.typekit.com\/2011\/11\/09\/type-study-sizing-the-legible-letter\/\">http:\/\/blog.typekit.com\/2011\/11\/09\/type-study-sizing-the-legible-letter\/<\/a>, listopad 2011<\/li>\n<li>Unitless line-heights, <a href=\"http:\/\/meyerweb.com\/eric\/thoughts\/2006\/02\/08\/unitless-line-heights\/\">http:\/\/meyerweb.com\/eric\/thoughts\/2006\/02\/08\/unitless-line-heights\/<\/a>, \u00fanor&nbsp;2006<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Pokud budeme vytv\u00e1\u0159et kask\u00e1dov\u00e9 styly pro nov\u00fd web, m\u00e1me v&nbsp;podstat\u011b dv\u011b mo\u017enosti, jak zapsat velikosti font\u016f. Jedna z&nbsp;nich je definovat v\u0161e \u201enapevno\u201c, nap\u0159\u00edklad pomoc\u00ed rozm\u011bru v&nbsp;pixelech. Druhou mo\u017enost\u00ed je ur\u010dit velikost relativn\u011b v\u016f\u010di nad\u0159azen\u00e9mu HTML elementu. Oba zp\u016fsoby maj\u00ed sv\u00e9 v\u00fdhody i&nbsp;nev\u00fdhody. CSS3 v\u0161ak roz\u0161i\u0159uje definici relativn\u00edch rozm\u011br\u016f o&nbsp;novou jednotku, tzv. rem, a&nbsp;sna\u017e\u00ed se tak vn\u00e9st do&nbsp;cel\u00e9 problematiky v\u011bt\u0161\u00ed zjednodu\u0161en\u00ed z\u00e1pisu.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wp_typography_post_enhancements_disabled":false,"footnotes":""},"categories":[71],"tags":[34],"class_list":["post-1142","post","type-post","status-publish","format-standard","hentry","category-vyvoj","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\" \/>\n<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog\" \/>\n<meta property=\"og:description\" content=\"Pokud budeme vytv\u00e1\u0159et kask\u00e1dov\u00e9 styly pro nov\u00fd web, m\u00e1me v&nbsp;podstat\u011b dv\u011b mo\u017enosti, jak zapsat velikosti font\u016f. Jedna z&nbsp;nich je definovat v\u0161e \u201enapevno\u201c, nap\u0159\u00edklad pomoc\u00ed rozm\u011bru v&nbsp;pixelech. Druhou mo\u017enost\u00ed je ur\u010dit velikost relativn\u011b v\u016f\u010di nad\u0159azen\u00e9mu HTML elementu. Oba zp\u016fsoby maj\u00ed sv\u00e9 v\u00fdhody i&nbsp;nev\u00fdhody. CSS3 v\u0161ak roz\u0161i\u0159uje definici relativn\u00edch rozm\u011br\u016f o&nbsp;novou jednotku, tzv. rem, a&nbsp;sna\u017e\u00ed se tak vn\u00e9st do&nbsp;cel\u00e9 problematiky v\u011bt\u0161\u00ed zjednodu\u0161en\u00ed z\u00e1pisu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"igloonet blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/igloonet\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-09T05:36:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-08-11T22:42:46+00:00\" \/>\n<meta name=\"author\" content=\"Martin Pe\u0161out\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@martinpesout\" \/>\n<meta name=\"twitter:site\" content=\"@igloonet\" \/>\n<meta name=\"twitter:label1\" content=\"Napsal(a)\" \/>\n\t<meta name=\"twitter:data1\" content=\"Martin Pe\u0161out\" \/>\n\t<meta name=\"twitter:label2\" content=\"Odhadovan\u00e1 doba \u010dten\u00ed\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\"},\"author\":{\"name\":\"Martin Pe\u0161out\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f\"},\"headline\":\"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3\",\"datePublished\":\"2012-02-09T05:36:17+00:00\",\"dateModified\":\"2014-08-11T22:42:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\"},\"wordCount\":1477,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"V\u00fdvoj\"],\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\",\"name\":\"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog\",\"isPartOf\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\"},\"datePublished\":\"2012-02-09T05:36:17+00:00\",\"dateModified\":\"2014-08-11T22:42:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#breadcrumb\"},\"inLanguage\":\"cs\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"V\u00fdvoj\",\"item\":\"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#website\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"name\":\"igloonet blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/igloonet.cz\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"cs\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#organization\",\"name\":\"igloonet\",\"url\":\"https:\/\/igloonet.cz\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"contentUrl\":\"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png\",\"width\":650,\"height\":465,\"caption\":\"igloonet\"},\"image\":{\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/igloonet\",\"https:\/\/x.com\/igloonet\",\"https:\/\/instagram.com\/igloonet\/\",\"https:\/\/www.linkedin.com\/company\/igloonet\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f\",\"name\":\"Martin Pe\u0161out\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"cs\",\"@id\":\"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g\",\"caption\":\"Martin Pe\u0161out\"},\"description\":\"Jsem brn\u011bnsk\u00fd UI v\u00fdvoj\u00e1\u0159 p\u011bkn\u00e9ho frontendu. Od mali\u010dka si potrp\u00edm na detail, ale p\u0159itom kladu d\u016fraz na jednoduchost a p\u0159ehlednost. Zast\u00e1v\u00e1m n\u00e1zor, \u017ee jednodu\u0161\u0161\u00ed weby jsou ty nejkr\u00e1sn\u011bj\u0161\u00ed.\",\"sameAs\":[\"https:\/\/igloonet.cz\/vyvoj\",\"https:\/\/x.com\/martinpesout\"],\"url\":\"https:\/\/igloonet.cz\/blog\/author\/cheetah\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/","og_locale":"cs_CZ","og_type":"article","og_title":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog","og_description":"Pokud budeme vytv\u00e1\u0159et kask\u00e1dov\u00e9 styly pro nov\u00fd web, m\u00e1me v&nbsp;podstat\u011b dv\u011b mo\u017enosti, jak zapsat velikosti font\u016f. Jedna z&nbsp;nich je definovat v\u0161e \u201enapevno\u201c, nap\u0159\u00edklad pomoc\u00ed rozm\u011bru v&nbsp;pixelech. Druhou mo\u017enost\u00ed je ur\u010dit velikost relativn\u011b v\u016f\u010di nad\u0159azen\u00e9mu HTML elementu. Oba zp\u016fsoby maj\u00ed sv\u00e9 v\u00fdhody i&nbsp;nev\u00fdhody. CSS3 v\u0161ak roz\u0161i\u0159uje definici relativn\u00edch rozm\u011br\u016f o&nbsp;novou jednotku, tzv. rem, a&nbsp;sna\u017e\u00ed se tak vn\u00e9st do&nbsp;cel\u00e9 problematiky v\u011bt\u0161\u00ed zjednodu\u0161en\u00ed z\u00e1pisu.","og_url":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/","og_site_name":"igloonet blog","article_publisher":"https:\/\/www.facebook.com\/igloonet","article_published_time":"2012-02-09T05:36:17+00:00","article_modified_time":"2014-08-11T22:42:46+00:00","author":"Martin Pe\u0161out","twitter_card":"summary_large_image","twitter_creator":"@martinpesout","twitter_site":"@igloonet","twitter_misc":{"Napsal(a)":"Martin Pe\u0161out","Odhadovan\u00e1 doba \u010dten\u00ed":"9 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#article","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/"},"author":{"name":"Martin Pe\u0161out","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f"},"headline":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3","datePublished":"2012-02-09T05:36:17+00:00","dateModified":"2014-08-11T22:42:46+00:00","mainEntityOfPage":{"@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/"},"wordCount":1477,"commentCount":8,"publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"keywords":["CSS"],"articleSection":["V\u00fdvoj"],"inLanguage":"cs","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/","url":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/","name":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3 | igloonet blog","isPartOf":{"@id":"https:\/\/igloonet.cz\/blog\/#website"},"datePublished":"2012-02-09T05:36:17+00:00","dateModified":"2014-08-11T22:42:46+00:00","breadcrumb":{"@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#breadcrumb"},"inLanguage":"cs","potentialAction":[{"@type":"ReadAction","target":["https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/igloonet.cz\/blog\/urcujte-relativni-velikost-fontu-pomoci-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"V\u00fdvoj","item":"https:\/\/igloonet.cz\/blog\/rubriky\/vyvoj\/"},{"@type":"ListItem","position":2,"name":"Ur\u010dujte relativn\u00ed velikost font\u016f pomoc\u00ed CSS3"}]},{"@type":"WebSite","@id":"https:\/\/igloonet.cz\/blog\/#website","url":"https:\/\/igloonet.cz\/blog\/","name":"igloonet blog","description":"","publisher":{"@id":"https:\/\/igloonet.cz\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/igloonet.cz\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"cs"},{"@type":"Organization","@id":"https:\/\/igloonet.cz\/blog\/#organization","name":"igloonet","url":"https:\/\/igloonet.cz\/blog\/","logo":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","contentUrl":"https:\/\/igloonet.cz\/blog\/wp-content\/uploads\/2015\/07\/RGB_LVPC_igloonet.png","width":650,"height":465,"caption":"igloonet"},"image":{"@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/igloonet","https:\/\/x.com\/igloonet","https:\/\/instagram.com\/igloonet\/","https:\/\/www.linkedin.com\/company\/igloonet"]},{"@type":"Person","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/8c731b61fb41d87a83ec347b7b85f17f","name":"Martin Pe\u0161out","image":{"@type":"ImageObject","inLanguage":"cs","@id":"https:\/\/igloonet.cz\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/032ee2fb90b35a9a451f30dac27d46caf09d97dea956a64a208abc47dfca3251?s=96&d=retro&r=g","caption":"Martin Pe\u0161out"},"description":"Jsem brn\u011bnsk\u00fd UI v\u00fdvoj\u00e1\u0159 p\u011bkn\u00e9ho frontendu. Od mali\u010dka si potrp\u00edm na detail, ale p\u0159itom kladu d\u016fraz na jednoduchost a p\u0159ehlednost. Zast\u00e1v\u00e1m n\u00e1zor, \u017ee jednodu\u0161\u0161\u00ed weby jsou ty nejkr\u00e1sn\u011bj\u0161\u00ed.","sameAs":["https:\/\/igloonet.cz\/vyvoj","https:\/\/x.com\/martinpesout"],"url":"https:\/\/igloonet.cz\/blog\/author\/cheetah\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/comments?post=1142"}],"version-history":[{"count":2,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1142\/revisions"}],"predecessor-version":[{"id":2485,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/posts\/1142\/revisions\/2485"}],"wp:attachment":[{"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/media?parent=1142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/categories?post=1142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/igloonet.cz\/blog\/wp-json\/wp\/v2\/tags?post=1142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}