Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Wielkość czcionki: px czy em? Czy wszystko jedno?

7 views
Skip to first unread message

Latet

unread,
Apr 17, 2013, 8:07:41 AM4/17/13
to
Witam,

Zrobiłem taki mały test:
http://xyz.avx.pl/em.php

Na pecetach, we wszystkich przeglądarkach jakie udało mi się przetestować -
czcionka, której wielkość zdefiniowana jest jako font-size: 16px ma identyczną
wielkosć jak czcionka ustawiona poprzez font-size: 1em. Testowałem to też na
paru telefonach z Androidem. Jak na razie wychodiz na to, że zależność miedzy px
a em jest stała 1:16. A skoro jest stała, to nie ma żadnego znaczenia, czy do
określania wielkości fonta użyje się em czy jego odpowiednika w px.

Zapewne jednak istnieją urządzenia/przeglądarki, gdzie ten stosunek jest inny
niż 1:16. Tylko, że na razie nie udało mi się takiego wytropić. Może ktoś z Was
takie posiada? Screenshot ze strony z moim prostym testem bardzo mile w takiej
sytuacji widziany. W szczególności bardzo bym prosił o sprawdzenie tego na
jakimś urządzenie z ekranem retina.

Dziękuję serdecznie,

latet

Paweł Piskorz

unread,
Apr 17, 2013, 8:26:58 AM4/17/13
to
W dniu 2013-04-17 14:07, Latet pisze:
> Jak na razie wychodiz na to, że zależność
> miedzy px a em jest stała 1:16.

Bezedura, 1em to 100% i to już powinno Ci powiedzieć wszystko. Jeżeli
nie to poczytaj:
http://www.w3.org/TR/CSS21/syndata.html#value-def-length


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

Latet

unread,
Apr 17, 2013, 9:18:06 AM4/17/13
to
>
> Bezedura, 1em to 100% i to już powinno Ci powiedzieć wszystko. Jeżeli


Wiem, że 1em to 100% - 100% względem aktualnej wielkości fonta (rodzica).
Chodzi mi tylko o znalezienie przeglądarek/systemów, w których ta defaultowa
wartość jest różna od 16px.

latet


Latet

unread,
Apr 17, 2013, 8:20:10 AM4/17/13
to
Innimi s�owy: czy znacie konkretn� przegl�dark� (na konkretnym systemie /
urz�dzeniu) w kt�rej ustawienie domy�lne jest inne ni�:

body {font-size: 16px; }

bo na ile si� zorientowa�em, to w�a�nie w taki spos�b mo�na przedefiniowa�
warto�� "em".

Dzi�ki,

latet

Borys Pogoreło

unread,
Apr 17, 2013, 9:27:55 AM4/17/13
to
Dnia Wed, 17 Apr 2013 15:18:06 +0200, Latet napisaďż˝(a):

>> Bezedura, 1em to 100% i to ju� powinno Ci powiedzie� wszystko. Je�eli
>
> Wiem, �e 1em to 100% - 100% wzgl�dem aktualnej wielko�ci fonta (rodzica).
> Chodzi mi tylko o znalezienie przegl�darek/system�w, w kt�rych ta defaultowa
> warto�� jest r�na od 16px.

Po co szukasz? Po prostu zdefiniuj warto�� bazow� i tyle. Albo u�yj
jakiego� reset.css lub normalize.css, po kt�rych wiesz, czego si�
spodziewaďż˝ na ekranie.

--
Borys Pogore�o
borys(#)leszno,edu,pl

Paweł Piskorz

unread,
Apr 17, 2013, 11:05:41 AM4/17/13
to
W dniu 2013-04-17 15:18, Latet pisze:
> Wiem, że 1em to 100% - 100% względem aktualnej wielkości fonta (rodzica).

Więc skąd Ci się wzięło że "zależność miedzy px a em jest stała 1:16"?
<div style="font-size:2em">
<p style="font-size:1em">ile px mam?</p>
</div>

> Chodzi mi tylko o znalezienie przeglądarek/systemów, w których ta
> defaultowa wartość jest różna od 16px.

Defaultowa wartość em? A ile wynosi defaultowa wartość 100%? To pytanie
jest bez sensu więc nic dziwnego że znaleźć nic nie możesz.

Latet

unread,
Apr 17, 2013, 11:27:17 AM4/17/13
to
> Defaultowa wartość em? A ile wynosi defaultowa wartość 100%? To pytanie jest
> bez sensu więc nic dziwnego że znaleźć nic nie możesz.

Nie jest bez sensu - a odpowiedź brzmi 16px (w przytłaczającej większości
urządzeń/przeglądarek). Po prostu szukam wyjątków od tej reguły, z czystej
ciekawości poznawczej.

Pozdrawiam,

latet


Latet

unread,
Apr 17, 2013, 11:28:50 AM4/17/13
to
>> Wiem, �e 1em to 100% - 100% wzgl�dem aktualnej wielko�ci fonta (rodzica).
>> Chodzi mi tylko o znalezienie przegl�darek/system�w, w kt�rych ta defaultowa
>> warto�� jest r�na od 16px.
>
> Po co szukasz? Po prostu zdefiniuj warto�� bazow� i tyle. Albo u�yj
> jakiego� reset.css lub normalize.css, po kt�rych wiesz, czego si�
> spodziewaďż˝ na ekranie.

Mog� zresetowa�, ale nie o to chodzi. Jesli gdzie� jest defaultowo inna, to mo�e
s� powody ku temu? Jak znajd� cho� jeden wyj�tek od regu�y 1:16 to b�dzie mo�na
siďż˝ zastanwiďż˝ czy jest uzasadniony.

latet


Borys Pogoreło

unread,
Apr 17, 2013, 12:18:11 PM4/17/13
to
Dnia Wed, 17 Apr 2013 17:28:50 +0200, Latet napisaďż˝(a):

>> Po co szukasz? Po prostu zdefiniuj warto�� bazow� i tyle. Albo u�yj
>> jakiego� reset.css lub normalize.css, po kt�rych wiesz, czego si�
>> spodziewaďż˝ na ekranie.
>
> Mog� zresetowa�, ale nie o to chodzi. Jesli gdzie� jest defaultowo inna, to mo�e
> s� powody ku temu? Jak znajd� cho� jeden wyj�tek od regu�y 1:16 to b�dzie mo�na
> siďż˝ zastanwiďż˝ czy jest uzasadniony.

Naprawd� masz czas na takie rozwa�ania? :)

Poza tym wystarczy, �e u�ytkownik zmieni domy�ln� wielko�� czcionki w
przegl�darce i ju� masz co� innego, ni� 16px.

Marek

unread,
Apr 18, 2013, 4:41:59 AM4/18/13
to
Nie ma co kombinowa�. Generalnie przegl�darki ustawiaj� 16px domy�lnie.
Mo�esz na wszelki wypadek zrobi� to r�cznie:

html {
font-size:16px;
}

A potem pocz�wszy od <body> lecie� z "em".
Mo�e teraz troch� OT. Jednostka "em" trudna jest du u�ycia. Je�li rodzic
zmieni swoj� wielko�� czcionki, to jego potomkowie r�wnie�. Przy
projektowaniu mo�e doprowadzi� to do sytuacji trudnych do opanowania.
Lepsz� jednostk� jest "rem", kt�ry jest relatywny zawsze do <html> a nie
rodzica.

--
Pozdrawiam
Marek

Paweł Piskorz

unread,
Apr 18, 2013, 10:53:11 AM4/18/13
to
W dniu 2013-04-17 17:27, Latet pisze:
>> Defaultowa wartość em? A ile wynosi defaultowa wartość 100%? To
>> pytanie jest bez sensu więc nic dziwnego że znaleźć nic nie możesz.
>
> Nie jest bez sensu - a odpowiedź brzmi 16px (w przytłaczającej
> większości urządzeń/przeglądarek).

<span style="font-size:1em">tu mam 16px</span>
<small>
<span style="font-size:1em">a tu nie mam</span>
</small>

Mirosław Zalewski

unread,
Apr 18, 2013, 4:10:59 PM4/18/13
to
środa, 17 kwietnia 2013 17:27. Wielka mądrość na czytelników
pl.comp.www spłynęła, gdy tako rzekł(a) Latet:

> Po prostu szukam wyjątków od tej reguły, z czystej
> ciekawości poznawczej.

Dowolna przeglądarka dowolnego użytkownika z problemami ze wzrokiem (i nie
mam tutaj na myśli wady wzroku, a prawdziwe problemy).
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

Latet

unread,
Apr 19, 2013, 7:11:44 AM4/19/13
to
> html {
> font-size:16px;
> }

A tak:

body {
font-size:16px;
}

jest du�o gorzej?

> Lepsz� jednostk� jest "rem", kt�ry jest relatywny zawsze do <html> a nie
> rodzica.

Ale haczyk z rem twi.... gdzie?

Dzi�kuj�,

latet


Latet

unread,
Apr 19, 2013, 8:53:34 AM4/19/13
to
>> Po prostu szukam wyjątków od tej reguły, z czystej
>> ciekawości poznawczej.
> Dowolna przeglądarka dowolnego użytkownika z problemami ze wzrokiem (i nie
> mam tutaj na myśli wady wzroku, a prawdziwe problemy).

Nie zetknąłem się, ale podejrzewam, że takie przeglądarki skalują px tak samo
dobrze jak em. Inaczej pół internetu byłoby dla tych osób nieczytelne.

latet

Latet

unread,
Apr 19, 2013, 8:56:31 AM4/19/13
to
> Może teraz trochę OT. Jednostka "em" trudna jest du użycia. Jeśli rodzic
> zmieni swoją wielkość czcionki, to jego potomkowie również. Przy projektowaniu
> może doprowadzić to do sytuacji trudnych do opanowania. Lepszą jednostką jest
> "rem", który jest relatywny zawsze do <html> a nie rodzica.

Fakt. Fajnie to opisano tu:
http://snook.ca/archives/html_and_css/font-size-with-rem

Wydaje mi się więc, że jednym z niewielu sensownych (wygodnych) zastosowań "em"
jest "line-height", bo się wtedy dostosowuje do bieżącej wielkosci czcionki w
danym "obszarze" (mniej zmian w kodzie potrzebnych w razie zmiany wielkości
czcionki lokalnie).

latet

Marek

unread,
Apr 19, 2013, 4:45:26 PM4/19/13
to
W dniu 2013-04-19 13:11, Latet pisze:

>> html {
>> font-size:16px;
>> }
>
> A tak:
>
> body {
> font-size:16px;
> }
>
> jest du�o gorzej?

Jest mniej uniwersalnie. Je�li masz w body teksty + struktury HTML a
potem chcesz je wszystkie powi�kszy� proporcjonalnie (np. wersja dla
niedowidz�cych), to zmieniasz jeden parametr w JS:

element_body.style.fontSize="2em";

>> Lepsz� jednostk� jest "rem", kt�ry jest relatywny zawsze do <html> a
>> nie rodzica.
>
> Ale haczyk z rem twi.... gdzie?

Przyk�adowo:

<article>
<h3>to jest tytuďż˝</h3>
to jest tekst
</article>

CSS do tego jest:

html {
font-size: 10px;
}

article {
font-size: 2em;
}


article h3 {
font-size: 3em;
}

Teraz klient m�wi: pomniejsz czcionk� artyku�u, ale nie zmieniaj w
nag��wku. Wtedy musisz zmodyfikowa� dwa style: dla artyku�u i dla h3.
Gdyby� stosowa� rem - to tylko czcionk� artyku�u by� modyfikowa�. Tak
jak przy stosowaniu warto�ci bezwzgl�dnych - pikseli. Z drugiej za�
strony zachowujesz mo�liwo�� proporcjonalnego zwi�kszania czcionki
wsz�dzie modyfikuj�c jej wielko�� w jednym miejscu: w elemencie html.

Powy�szy przyk�ad jest banalny. Jest mn�stwo bardziej z�o�onych
sytuacji. Wtedy zale�no�ci wynikaj�ce ze stosowania jednostki em
wymagaj� wielkich kalkulacji w ca�ym CSS aby drobnostk� w jednym miejscu
poprawiďż˝.

--
Pozdrawiam
Marek

Latet

unread,
Apr 20, 2013, 7:18:19 AM4/20/13
to
> Przykładowo:
> <article>
> <h3>to jest tytuł</h3>
> to jest tekst
> </article>
> CSS do tego jest:
> article {
> font-size: 2em;
> }

Czytałem, że tych nowych tagów typu <article> <section> <header> wprowadzonych w
HTML5, nie powinno się używać jako "wraperów" do stylowania, bo służyć mają
tylko logicznemu podziałowi struktury dokumentu. Czy to prawda?

latet



Cezary Tomczyk

unread,
Apr 20, 2013, 7:26:47 AM4/20/13
to
On 2013-04-20 13:18, Latet wrote:
>> Przyk�adowo:
>> <article>
>> <h3>to jest tytuďż˝</h3>
>> to jest tekst
>> </article>
>> CSS do tego jest:
>> article {
>> font-size: 2em;
>> }
>
> Czyta�em, �e tych nowych tag�w typu <article> <section> <header>
> wprowadzonych w HTML5, nie powinno si� u�ywa� jako "wraper�w" do
> stylowania, bo s�u�y� maj� tylko logicznemu podzia�owi struktury
> dokumentu. Czy to prawda?

"Czyta�em, �e[...]" - podaj �r�d�o gdzie to czyta�e�.

--
Cezary Tomczyk
http://www.ctomczyk.pl/

Marek

unread,
Apr 20, 2013, 1:02:13 PM4/20/13
to
W dniu 2013-04-20 13:18, Latet pisze:
>
> Czytałem, że tych nowych tagów typu <article> <section> <header>
> wprowadzonych w HTML5, nie powinno się używać jako "wraperów" do
> stylowania, bo służyć mają tylko logicznemu podziałowi struktury
> dokumentu. Czy to prawda?
>

Nadinterpretacja :-)

Wraper i struktura semantyczna nie wykluczają się wzajemnie. W
konkretnym moim przykładzie <article> może oznaczać news a <h3> w nim
tytuł newsa. Wtedy <article> pełni rolę wrapera dla poszczególnych
newsów tak jak <nav> będzie wraperem dla menu nawigacyjnego.

Błędem semantycznym będzie użycie <article> jako wrapera do np kolumny w
dokumencie.

--
Pozdrawiam
Marek

Paweł Piskorz

unread,
Apr 22, 2013, 8:11:17 AM4/22/13
to
W dniu 2013-04-19 14:53, Latet pisze:
> Nie zetknąłem się, ale podejrzewam, że takie przeglądarki skalują px tak
> samo dobrze jak em.

Niektóre nie potrafią line-height w px skalować i po kilku CTRL++ masz
tekst nachodzący na siebie.

Paweł Piskorz

unread,
Apr 22, 2013, 8:18:10 AM4/22/13
to
W dniu 2013-04-19 14:56, Latet pisze:
> Wydaje mi się więc, że jednym z niewielu sensownych (wygodnych)
> zastosowań "em" jest "line-height", bo się wtedy dostosowuje do bieżącej
> wielkosci czcionki w danym "obszarze" (mniej zmian w kodzie potrzebnych
> w razie zmiany wielkości czcionki lokalnie).

Teoretycznie tak, praktycznie jest nie jest tak różowo. Jak zaczniesz
zmieniać font-size nie ruszając line-height, to trafisz na problemy z
zaokrąglaniem, które często objawiają się tak że któraś z linijek ma o
1px mniejszy line-height niż pozostałe.

BTW, jak ktoś lubi bardzo emy to mu się przyda:
http://riddle.pl/emcalc/
0 new messages