Nedávno mi na tweeter zeď přistál krátký článeček „Font Size Idea: px at the Root, rem for Components, em for Text Elements“ – http://css-tricks.com/rems-ems/, který mě zaujal. Při psaní kódu dost často laboruji s velikostí fontů. Grafik navrhne různé velikosti, vypadá to hezky, ale můj kód se znepřehlední. A to ještě nemluvím o změně velikosti fontu, zákazník na poslední chvíli změní názor a řekne a „není s tím možné něco udělat?“.

Z výše uvedeného jsem proto hledal něco, co mi práci usnadní. Na první pohled mě zaujal jen nadpis původního článku a říkal jsem si „tohle by mohlo být ono“. Oč jde? Nadpis to říká jasně. Na začátku dokumentu pro různé velikosti nadefinovat hlavní velikost v body v pixelech. V struktuře html dokumentu následují různé boxy (komponenty). V těch autor navrhuje použít značku rem. Na nejnižší úrovní, tj. na úrovní textového prvku použít značku em. Tím je zaručeno, že ať uživatel udělá se stránkou cokoli, zmenší ji, zvětší ji, font zůstane vždy podle autorova přání a nespoléhá se na prohlížeč.

Dovolím si použít ukázku kódu ze stránek css-tricks:
[sourcecode language=“html“]/* Document level adjustments */
html {
font-size: 17px;
}
@media (max-width: 900px) {
html { font-size: 15px; {
}
@media (max-width: 400px) {
html { font-size: 13px; }
}

/* Modules will scale with document */
.header {
font-size: 1.5rem;
}
.footer {
font-size: 0.75rem;
}
.sidebar {
font-size: 0.85rem;
}

/* Type will scale with modules */
h1 {
font-size: 3em;
}
h2 {
font-size: 2.5em;
}
h3 {
font-size: 2em;
}[/sourcecode]

Tady je jasně vidět, jak je to myšleno.

Autor sice na závěr píše, že to nemá ještě pořádně otestované, ale z pohledu další práce se mi to jeví jako perfektní nápad a už se těším na první práci, kde to vyzkouším. Co na to říkáte vy? Jakým způsobem definujete velikost fontu?

Líbil se vám článek? Sdílejte jej prosím: