O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Wybieramy czcionkę, część 1 - rodzaj, wielkość, styl…

Zacznijmy od kilku informacji ogólnych. W tytule wpisałam słowo czcionka ale tak naprawdę opisywać będziemy krój. Będziemy decydować się na rodzinę krojów, będziemy próbowali pogrubić krój, może zdecydujemy się na jego kursywną wersję. Chodzi dzisiaj o wygląd tekstu i pojedynczych liter czyli o krój pisma. O czcionkach i fontach poczytać można sobie w bardziej terminologiczno-definicyjnym wpisie: Typograficznie: czcionka vs. font.

Na początek najprostsze rozwiązania i cechy związane z krojem:

  • font - zapis skrótowy w kolejności: style, weight, stretch, size, line-height, family

font: normal 87.5%/140% 'Trebuchet MS', Arial, sans-serif;

Zaleca się określenie rodzaju i wielkości pisma dla elementu body. Tak na początek, najlepiej o wartościach najczęściej występujących w szablonie aby uniknąć niepotrzebnych dodatkowych zapisów.

body {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: small;
color: #333;
}


CSS: moduł własności pisma poziom 2.1
plus stretch z CSS3

Rodzina kroju font-family

Podstawowy najbardziej przydatny dla tekstu podział krojów wyróżnia m.in. dwie grupy fontów: szeryfowe i bezszeryfowe. Biorąc pod uwagę jakość i wielkość współczesnych ekranów nie ma większego znaczenia, którą z tych dwóch grup wybierzesz. Nie zaleca się natomiast bardziej ozdobnych krojów: pisma gotyckiego, pisanek, ksenotypów. O podziale krojów zapraszam do notki: Rodzaje krojów (linki w poniższej liście wypunktowanej odnoszą się do odpowiednich fragmentów tej właśnie notki).

Rodzaje rodzin

CSS również dzieli kroje na grupy, wyróżnia się pięć rodzajów rodzin:

  • sans-serif - bezszeryfowe, najczęściej jednoelementowe antykwy bezszeryfowe zwane groteskami: Helvetica, Arial
  • serif - szeryfowe, najczęściej dwuelementowe antykwy, proporcjonalne: Times New Roman, Georgia
  • monospace - o stałej szerokości znaku, czyli nieproporcjonalne, najczęściej posiadają szeryfy choć nie zawsze i nie wszystkie litery, jednoelementowe, naśladują kroje maszyny do pisania: Courier New, Andale Mono
  • cursive - pisanki, których nie należy mylić z kursywą; naśladują charakter pisma ręcznego: Zapf-Chancery, Comic Sans MS
  • fantasy - kroje dekoracyjne ale niekoniecznie obrazkowe, posiadają reprezentacje znaków, ksenotypy: Critter, Studz

Dla tekstu na stronie odpowiednie są tylko dwa pierwsze rodzaje, trzeci jest dopuszczalny i w określonych przypadkach bardzo przydatny. Pisanki jako rodzaj naśladujący pismo ręczne są odradzane chyba główne ze względu na konieczność użycia dużego rozmiaru aby zapewnić im czytelność. Dodatkowo przyzwyczajenie do określonego wyglądu tekstu drukowanego sprawia, że pisanki raczej się nie sprawdzają na stronach (trochę tak jak drukowany kształt liter w piśmie ręcznym). Fantasy to kroje bardzo dekoracyjne i ich wygląd często w małym stopniu przypomina konkretne litery. W ich przypadku ważniejsze od komunikatywności litery jest jej ozdobny charakter udający coś innego (kota, sznur, kształty geometryczne).

Dostępne kroje

Krój można sobie wybrać dowolnie. Wystarczy podać jego nazwę. Jednak jego wyświetlanie na ekranie będzie zależne od tego czy urządzenie na którym tekst jest wyświetlany posiada zainstalowany odpowiedni font. Może na m się podobać genialna pisanka Zaphino ale domyślnie instalowana jest ona tylko z Mac OS X więc będzie widoczna dla mniej niż jednego procenta użytkowników polskiego internetu.

Należy więc wybierać fonty dostępne na różnych platformach (często będą miały różne nazwy choć podobny a nawet identyczny wygląd). W Polsce najbezpieczniejsze będą te które zainstalowane są z systemem Windows XP.

Próbuję przeprowadzić małą ankietę odnośnie dostępności fontów. Jej wyniki chociaż oczywiste w niektórych miejscach otwierają moje oczy. Proponuję więc zerknąć na procenty tej ankiety (chociaż może nie na procenty a na kolejność w wynikach), to mały wycinek zaledwie ale dla mnie interesujący. Znalazłam też bardziej uniwersalną ankietę, nie uwzględnia ona jednak tematu posiadania polskich znaków więc poza tym, czy font jest dobrze reprezentowany trzeba wziąć także pod uwagę polski alfabet.

Najbezpieczniejsze będą: Times i Georgia z szeryfowych a z bezszeryfowych Arial i Verdana. O krojach można znaleźć tutaj kilka notek a będzie ich z pewnością więcej.

Budowa stosu

Aby zapewnić maksymalną dostępność wybranego przez nas charakteru kroju font-family należy zdefiniować w stosie. Najpierw podajemy preferowany przez nas font, fajnie jeżeli będzie dostępny ale dla własnej przyjemności możemy dodać nawet coś bardzo niespotykanego (choć nie polecam). Najlepiej niech to będzie krój dostępny ?dla więcej niż kilkunastu procent. Potem podajemy alternatywne nazwy, tak aby zapewnić maksymalną reprezentowalność. Jeżeli uda nam się 100% to będzie super ale różnie to bywa więc na koniec podajemy rodzaj rodziny: sans-serif, serif, monospace (nie polecam cursive bo pisanki mają bardziej zdefiniowany charakter a jest spora różnica pomiędzy dekoracyjnym, eleganckim Zaphino Linotype a dziecinnym i niepoważnym Comic Sans MS).

O budowie stosu i dostępności różnych fontów będą jeszcze wpisy, zarówno tu jak i na stylowym blogu. Proponuję skorzystać z wyszukiwarki.

Wyjątkowo jak na kod CSS alternatywy w wartościach font-family oddzielamy przecinkami. Przecinki są niezbędne. Jeżeli nazwa kroju składa się z wielu słów najlepiej umieścić je w cudzysłowie, dozwolone są zarówno pojedyncze jak i podwójne.

font-family

Przykładowe stosy

zobacz przykład w szablonie 42 Times - granatowo-beżowy

body {
font-family: 'Times New Roman', Times, serif;
}

zobacz przykład w szablonie 41 fall jesiennym

body {
font-family: "Century Gothic", "URW Gothic L", "TW Cen MT", "MgOpen Modata", sans-serif;
}

zobacz przykład w szablonie sportowy 06 zielony

body {
font-family: Garamond, 'Hoefler Text', 'Times New Roman', Times, serif;
}

zobacz przykład w szablonie sportowym 04 piłkarski brązowy

body {
font-family: 'Courier New', courier, monospace;
}

zobacz przykład w szablonie sportowy 03 piłkarski zielony

body {
font-family: 'Segoe Print', 'trebuchet ms', 'comic sans ms', sans-serif;
}

nazwa właściwości font-family
znaczenie rodzaj kroju
wartość nazwy krojów i rodzajowe rodziny
wartość domyślna zależna od przeglądarki
można stosować do wszystkich elementów
dziedziczenie tak

Styl/odmiana kroju font-style

Kiedyś nazwałam font-style duktem pisma. Po części to oczywiście prawda. Dukt czyli sposób kładzenia pisma będzie wpływał na jego pochylenie. Font-style nie zawsze opisuje wszystkich zależności duktu ale nie jest też tylko pochyleniem pisma. Kroje drukowane ze względu na odmiany można podzielić na dwie grupy: odmianę prostą czyli roman albo kursywną czyli italic. W font-style decydujemy właśnie, którą z nich wykorzystamy.

Nie każdy krój posiada jednak wersję kursywną. Szeryfowe, owszem, najczęściej jako kursywę mają zaprojektowaną zupełnie inną odmianę. Bezszeryfowe jednak rzadko wykorzystują odmienną kursywę w font-style, najczęściej jest to tylko pismo pochyłe (najczęściej specjalnie zaprojektowane pismo pochyłe a nie tylko mechanicznie pochylone) choć zdarzają się wyjątki.

W zasadzie font-style może przybierać trzy wartości: normal, italic, oblique. Dwa ostanie zapewne wyglądać będą tak samo dla danego kroju.

  normal italic oblique
Times New Roman Strząść Strząść Strząść
Arial Pchnąć Pchnąć Pchnąć
Trebuchet Mogłaś Mogłaś Mogłaś

Emfaza jako sposób wyróżnienia fragmentu tekstu najczęściej przybiera formę kursywy. Emfaza w języku polskim to z greckiego nacisk to przesadne wyróżnienie frazy, zwiększona uczuciowość. W tekście często stosujemy dziwne sformułowania, słowa które czytając wymówilibyśmy nieco zmienionym głosem a pisząc ręcznie umieścilibyśmy w cudzysłowie. Otaczamy je właśnie znacznikami emfazy.

?Emfaza i italik nie są synonimami. Kursywa może być emfatycznym sposobem wyróżnienia testu w przypadku stron internetowych istotne jest jednak właściwe użycie znaczników. Sam styl pochylony (font-style:italic;) może być przypisany dowolnemu znacznikowi, nawet cała strona może być pisana odmianą pochyłą. Emfaza jest natomiast znacznikiem HTML posiadającym logiczną wartość. W edytorze TinyMCE klikając przycisk kursywy (pochyła litera I) wstawiamy właśnie kursywę/pochylenie logiczne, które przeglądarka najczęściej wyświetla właśnie jako pochylenie. O emfazie będzie jeszcze wpis, zapraszam do wyszukiwarki.

W poniższym komentarzu wspomniana jest łacinka. Początkowo w tym wpisie znajdowała się informacja jakoby łacinka była kursywą. Mój błąd. Nadal niektóre pojęcia z typografii są dla mnie mocno niejasne, szczególnie te tradycyjne, polskie, związane z drukarstwem i składaniem tekstu. Teraz łacinkę interpretuję jako polski zamiennik słowa Roman czyli określenia pisma prostego.

nazwa właściwości font-style
znaczenie odmiana pisma, pochylenie
wartość normal | italic | oblique | inherit
wartość domyślna normal
można stosować do wszystkich elementów
dziedziczenie tak

Kapitaliki - wariant liter font-variant

Najrzadziej używana właściwość z dzisiaj opisywanych. Nie należy jej mylić z transformacją tekstu choć są podobne i najczęściej wariant liter dodawany jest przez przeglądarkę właśnie poprzez transformację i zmianę rozmiaru. Kapitalików nie należy mylić z wersalikami. Nie polecam też ich używać. Sama idea jest całkiem niezła ale wykonanie przez przeglądarki pozostawia wiele do życzenia.

Kapitaliki używają wersalików ale są one różnej wysokości. W wersji idealnej kapitaliki to specjalnie zaprojektowana odmiana kroju. Duże litery są tradycyjnej wielkości a małe zachowują mniej więcej swoją mniejszą wysokość ale zamiast minuskuły wykorzystywana jest majuskuła (tzn. zamiast małych liter używane są duże litery ale w wysokości małych).

przykład oryginalnych kapitalików

Rzadko używam kapitalików bo zazwyczaj generuje je przeglądarka co sprowadza się do wykorzystania dla dużych liter wersalików normalnej wielkości (dużych liter) a dla małych liter wersalików w mniejszym stopniu pisma. Sprawia to dziwne wrażenie bo litery mają różną grubość kreski i duże litery wyglądają na pogrubione.

zobacz przykład w szablonie 31 szablon Garamond - ciemny

#BlogTytulText {
font-family: garamond, times, 'times new roman', serif;
font-variant: small-caps;
}

nazwa właściwości font-variant
znaczenie kapitaliki
wartość normal | small-caps | inherit
wartość domyślna normal
można stosować do wszystkich elementów
dziedziczenie nie

Grubość kresek liter kroju font-weight

Pogrubienie pisma najczęściej bywa stosowane przy wzmocnieniu. Najpopularniejszym pogrubieniem jest bold, stąd też popularne określenie: pogrubienie albo bardzie tradycyjnie wytłuszczenie. Można jednak określać cieńszą grubość kroju więc font-weight odpowiada nie tylko za pogrubienie ale i wychudzenie.

Wartości możemy podawać słownie ale jest ich niewiele. Rozważano różne opcje ale okazało się, że poza bold reszta określeń jest często mylna. Dlatego zdecydowano się na dziewięciostopniową skalę numeryczną. Zazwyczaj normalna wersja, nazywana też Roman, Normal, Regular ewentualnie Book czy Medium odpowiada w tej skali wartości 400.

100200300400500600700800900
Thin Extra Light
(Ultra Light)
Light Normal Medium Semi Bold
(Demi Bold)
Bold Extra Bold
(Ultra Bold)
Black
(Heavy)
segoe segoe segoe segoe segoe segoe segoe segoe segoe
times times times times times times times times times
arial arial arial arial arial arial arial arial arial

Nie wiem jak u was ale u mnie wyświetlają się tylko dwie grubości: normalna i pogrubiona. Nie wiem czy jest więc sens stosowania pozostałych jeżeli najszerzej dostępne fonty nie mają tych wersji.

przykład weight

I na koniec podobnie jak emfaza nie musi być pochylona a pochylenie nie jest emfazą tak i pogrubienie nie jest wzmocnieniem a wzmocnienie nie musi być pogrubione. Tzw. wzmocnienie jest określeniem logicznym o odpowiada mu znacznik HTML. W edytorze TinyMCE klikając w guzik z pogrubioną literą B dodajemy właśnie taki znacznik. Pisząc ręcznie zapewne taki wzmocniony fragment tekstu podkreślilibyśmy go, czytając zaś na głos użylibyśmy dobitniejszego tonu podkreślając istotność fragmentu. To właśnie jest wzmocnienie.

Wzmocnienie logiczne najczęściej przybiera formę pogrubienia ale jest to cecha za którą odpowiedzialny jest szablon (czy to ten zdefiniowany na stronie czy ten który dodaje od siebie przeglądarka). Opisywana tu cecha font-weight odpowiada tylko za wizualne pogrubienie więc jest cechą o podobnej funkcji jak zmiana koloru czy rodzaju kroju - ma czysto wizualne znaczenie.

nazwa właściwości font-weight
znaczenie grubość kroju
wartość normal | bold | inherit |
bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
wartość domyślna normal
można stosować do wszystkich elementów
dziedziczenie tak

Szerokość liter font-stretch

Ta właściwość nie jest zdefiniowana w specyfikacji CSS2.1 więc ostrożnie z jej używaniem. Opisuję ją bo w zbiorowym zapisie może być wymieniana. Font-stretch to m.in. ściśnięta odmiana kroju. Litery sprawiają bardziej wydłużone wrażenie bo chociaż grubość kresek jest zachowana to litery są węższe. Może to być też szeroka wersja kroju - litery będą miały tą samą grubość kresek ale będą zajmowały większą przestrzeń na szerokość.

  • ultra-condensed - przykład
  • extra-condensed - przykład
  • condensed - przykład
  • semi-condensed - przykład
  • normal - przykład
  • semi-expanded - przykład
  • expanded - przykład
  • extra-expanded - przykład
  • ultra-expanded - przykład

Mam problem ze znalezieniem szeroko dostępnego kroju, który posiadałby choć część z tych wartości. Dobrym wizualnym przykładem będzie Arial i Arial Narrow ale są to odmienne kroje więc nie zareagują na font-stretch. DajaVu, darmowa dostępna rodzina krojów posiada wersję skondensowaną (także występującą w odmianie oblique czy bold). Aby zaprezentować konkretny przykład wybrałam polski krój Antykwa Półtawskiego, który posiada zarówno węższe jak i szersze wersje.

Antykwa Półtawskiego stretch

Właściwość font-stretch była wprowadzona w CSS2 ale w aktualnie obowiązującej specyfikacji CSS2.1 jest zaniechana dlatego proponuję nie sugerować się starszą wersją. W CSS3 powrócono do font-stretch ale już bez relatywnych wartości. CSS3 nie jest obowiązującą specyfikacją, moduł font ma aktualnie (grudzień 2011) status WD więc wiele może się zmienić.

nazwa właściwości font-stretch
znaczenie szerokość liter
wartość normal |
ultra-condensed | extra-condensed | condensed | semi-condensed |
semi-expanded | expanded | extra-expanded | ultra-expanded |
inherit
wartość domyślna normal
można stosować do wszystkich elementów
dziedziczenie tak

Stopień pisma font-size

Podstawowa właściwość pisma. Jej wartość można podawać w wielu jednostkach.

jednostki bezwzględne

Mogą to być bezwzględne i raczej niepraktyczne na ekranie jednostki metryczne, jak cm czy mm, in (cal) czy jednostki związane z typografią drukowaną jak pt (punkt typograficzny), pc (pica czyli 12×pt). Można ich używać gdy zna się fizyczną wielkość i proporcje docelowego wyświetlacza. Nie zaleca się wiec dla szablonów blogowych bo nie wiadomo czy blog wyświetlany jest na ekranie 10 cali, 16 cali a może 42 cale.

słowa kluczowe

Słowo kluczowe to częściowo wartość absolutna. Jest indeksem w tablicy stopni pisma obliczonych i przechowywanych przez przeglądarkę. Rzeczywiste wielkości będą więc zależne od użytego programu ale jak same nazwy mówią mają to być najbardziej odpowiednie wielkości dla danej aplikacji. Przykładowo dla najpopularniejszych przeglądarek będą to:

  • xx-small - 3/5 ~ 10px
  • x-small - 3/4 ~ 12px
  • small - 8/9 ~ 13px
  • medium - 1 ~ 16px
  • large - 6/5 ~ 18px
  • x-large - 3/2 ~ 24px
  • xx-large - 2/1 ~ 32px

W starszej IE6 mogą te słowne określenia opowiadać wielkości większej o stopień.

wartości względne (zależne od ekranu) - piksele

Piksele są swego rodzaju wartościami względnymi dla określonego ekranu w danym momencie są stałe ale nie można określić ich bezwzględnej wielkości np w centymetrach. Wielkość piksela zależna jest od ustawień ekranu.

Wg. powyższych określeń słownych średnią wielkością jest 16px. Może się to w niektórych przypadkach wydawać za dużo ale wszystko będzie zależeć od font-family. Verdana czy Georgia mają bardzo duże oczka i mogą w tekście opisane być mniejszym rozmiarem. Garamond natomiast, czy nawet Times lepiej będą wyglądać w większym rozmiarze i nawet te 16px będzie wyglądać bardzo dobrze i nie za dużo.

wartości względne (zależne od kroju)

Moimi ulubionymi wartościami względnymi są firety (em) czyli wysokość pisma. Jest to najlepsza jednostka do określenia wielkości elementów zależnych od wysokości pisma jak np interlinia czy wielkość wcięcia akapitowego. Dla samego kroju jest to jednostka o tyle wygodna, że zmieniając rodzinę kroju zapewne zajdzie konieczność zmiany rozmiaru. Dzięki emom wystarczy zmienić rozmiar dla głównego kontenera a reszta określona względnie dopasuje się.

Podobną do firetu jest jednostka o wielkości wysokości-x czyli x-height (ex). Pozwala ona na nieco inne określenie zależności wielkości pisma bo odwołuje się do wysokości małych liter, które mają różne proporcje w zależności od wybranego fontu. Garamond jako font posiadający spore wydłużenia będzie miał małą wysokość-x natomiast Georgia posiadająca duże oczka będzie miała większą wyskokość-x przy tym samym stopniu pisma.

Jest jeszcze wartość procentowa (%), która w przypadku innych wartości zazwyczaj określona jest w stosunku do dostępnej wielkości całego elementu. W przypadku kroju działa jednak inaczej, w zasadzie analogicznie jak firety. 100% to krój tego samego rozmiaru co rodzica (czyli elementu nadrzędnego).

nazwa właściwości font-size
znaczenie stopień pisma
wartość

% | em | ex | px |
in | cm | mm | pt | pc |
xx-small | x-small | small | medium | large | x-large | xx-large

wartość domyślna medium
można stosować do wszystkich elementów
dziedziczenie tak

Interlinia line-height

Interlinia w tradycyjnym rozumieniu to tylko odstęp pomiędzy jednym a drugim wierszem, od końca wydłużeń dolnych do początku wydłużeń górnych. W CSS interlinią nazywany jest odstęp pomiędzy linią bazową dwóch następujących po sobie wierszy. Cyli powiedzmy, że liczona jest od dolnej krawędzi litery n do dolnej krawędzi litery n w następnym wierszu.

Interlinię podaje się w podobnych jednostkach jak rozmiar pisma. Najwygodniejsze będą te relatywne, zależne od ekranu a jeszcze lepiej od rozmiaru pisma.

Piksele będą działały tak jak w przypadku rozmiaru pisma. Należy wybierać interlinię co najmniej o dwa stopnie większą niż rozmiar pisma, minimum. Oczywiście wszystko będzie zależeć od długości pojedynczego wiersza i całego tekstu. Generalnie nieco większa interlinia pomaga nie zgubić linijki, ale przesadna zaburza czytanie.

Firety i wysokość-x są idealne do określania interlinii, podobnie procenty skoro działają dokładnie tak samo jak firet. Interlinia określona w procentach czy emach zależna jest od wielkości pisma więc w razie zwiększenia tejże wielkości i rzeczywista wielkość interlinii się zwiększy. O ile firetowa czy procentowa wielkość pisma zależna jest od wielkości rodzica czyli elementu nadrzędnego o tyle interlinia określana jest względem wielkości pisma w elemencie opisywanym.

Ja najczęściej wybieram 140-150% wielkości pisma ale i 180% się zdarza.

nazwa właściwości line-height
znaczenie odstęp mięszywierszowy
wartość % | em | ex | px |
in | cm | mm | pt | pc |

wartość domyślna zależna od przeglądarki
można stosować do wszystkich elementów
dziedziczenie tak

Zapis zbiorowy font

Mam wrażenie, że trochę namieszałam w powyższym opisie. Nie mogłam się zdecydować czy opisywać tylko wartości ze specyfikacji CSS2.1 czy uwzględnić też te z CSS3. Wyszedł z tego mały mieszaniec ale mam nadzieję, że całkiem wygodny. Wszystkie powyższe wartości można zapisywać zbiorczo. Można ale to nie znaczy, że wszystko jest idealne.

  • Po pierwsze font-variant będzie inaczej opisywany w CSS3 i nie będzie częścią zapisu zbiorczego font. Można wartość font-variant dodać to tego zapisu ale tylko w wartości jaką przybiera w CSS2.1 czyli small-caps. Najlepiej chyba jednak ewentualne font-variant opisywać osobno.
  • Nie polecam stosować odmian pisma innych niż te które dany font posiada. W przypadku typografii wszystko co powstaje poprzez sztuczne naśladowanie prawdziwej właściwości wygląda bardzo kiepsko. Kroje, które nie posiadają wersji pochyłej są sztucznie pochylane przez program i moim zdaniem widać to i wyglądają brzydko, nie zawsze zapewne ale najczęściej.
    • Czyli ostrożnie z font-stretch. Kroje instalowane z systemami rzadko kiedy je posiadają.
    • Font-style jest w miarę bezpieczne ale nie zawsze.
    • Font-weight w fontach instalowanych z systemami występuje najczęściej tylko w wersji bold.
    • Kapitaliki są bardzo rzadką odmianą w krojach instalowanych z systemami a mimo to programy przekształcają wersaliki w fałszywe kapitaliki więc efekt będzie tylko bardzo nieładny.

Wraz z zapisem font możemy określać line-height. Po wielkości stopnia pisma dodajemy ukośnik i wielkość interlinii co jest bardzo typowy i tradycyjnym zapisem. Przed wielkością pisma możemy określić różne odmiany (kursywa, pogrubienie, itd.), jeżeli tego nie zrobimy zostają określone jako normal. Po wielkości pisma (z albo i bez interlini) określamy rodzinę czcionek oddzielając poszczególne alternatywy przecinkami. W pozostałych przypadkach w ramach wartości font poszczególne cechy rozdzielamy spacją.

font: style weight stretch size/line-height family,family,family;

Jak widać w powyższym zapisie nie wszystkie wartości związane z tekstem są opisane. Przede wszystkim font opisuje tylko właściwości pisma a nie całego tekstu więc wyrównanie, podkreślenie, wcięcie akapitowe, to wszystko należy bardziej do tekstu niż pisma. Wizualnie kolor jest częścią pisma ale w rzeczywistości nie ma nic wspólnego z fontem. Dlatego kolor tekstu opisywany jest osobno i wspomnę o nim przy innej okazji.

zobacz przykład w szablonie filmowy 01 - Let's Make Love »

#StatycznaZawartosc a {
font: bold 110%/100% Georgia, serif;
color: #1C3353;
}

zobacz przykład w szablonie 14 abc »

body {
font-size: small;
font-family: "Trebuchet MS", helvatica, arial, serif;
color: #26150A;
}



Na koniec zalecenie.

Zaleca się określenie wartości font przy selektorze body. Znacznik ten odpowiedzialny jest za wygląd całej strony, wszystkiego co tylko się na niej wyświetla. Określ tam koniecznie rodzinę i ewentualnie stopień pisma. Stopień pisma możesz określić dowolną jednostką, ja często używam słownych i procentowych ale ostatnio chyba znów wracam do pikseli. 62.5% to mniej więcej 10px, liczba na tyle okrągła aby w dalszej części można było łatwo policzyć relatywne wymiary. 1.4em z 62,5% to oczywiście 14px. Problem pojawia się dopiero gdy określać będziemy kolejny podrzędny element ale i tak uważam że warto nieco więcej policzyć na początku aby potem jednorazowo dokonać globalnych zmian.

body {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: small;
color: #333;
}

Gdzie jeszcze? o tym już w innym wpisie, ale najpierw o innych właściwościach tekstu. Zapraszam.

sobota, 11 sierpnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2009/05/18 09:39:05
Jawne pomieszanie pojęć: italik (ang. Italic) to czcionka zwana po polsku kursywą, a łacinka (Latin) to nazwa całego systemu pisma. To, co po polsku nazywa się czcionką prostą (albo egipcjanką), to po angielsku Roman.
-
kate_mac
2009/05/23 15:39:42
@noychoh
zapewne ;)
czyli italik to kursywa czyli to co po wpisaniu w arkusz css font-style:italic otrzymamy
pisząc, że łacinka to nazwa systemu pisma masz na myśli to, ze łacinka to pismo wykorzystując alfabet łaciński? tak?
egipcjanka=pismo proste=roman to wiem tylko z tą łacinką mam mały problem ;)

a co do mieszania pojęć to na moim blogu częste :D - staram się dowiadywać różnych rzeczy i jakoś je sobie porządkować w spójna wiedzę ale wychodzi to różnie
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...