DesignMagazyn

Design

Typografia w internecie

Opublikowane dnia .

Typografia w internecie

Wstęp

Design

Typografia w internecie

Opublikowane dnia .
Typografia w sieci to temat dość sporny i ciężki do rozgryzienia. Od dawna panuje opinia, że typografia w internecie jest całkowitym zerem i nie wiele da się w tej kwestii zrobić. W pewnym stopniu każdy się z tym zgodzi, ponieważ te zarzuty nie biorą się z powietrza – są oparte wieloma problemami w związku z czcionkami w sieci.

Ja od pewnego czasu jestem zdania, że z czcionkami można zrobić naprawdę wiele świetnych rzeczy.

HTML5 / CSS3 zbawieniem dla fontów

Wraz z nadejściem HTML5 i CSS3 możemy zacząć mówić o rewolucji w sieci. Gdyby spojrzeć na definicję tych technologii, wszędzie jest wspominane o celu powstania nowych wersji tych języków: dostosowywanie się do najnowszych mediów oraz uproszczenie kodu. Ta definicja w żaden sposób nie odbiega od prawdy, bowiem najnowszy HTML jest naprawdę bardzo prosty a CSS3 niesie za sobą dużo niezbędnych funkcji dla urządzeń mobilnych m.in. technikę zwaną Responsive Design, o której pisał Jan Szpakowski.

Po takim wstępie należałoby podać konkrety – co mi daje nowa wersja CSS? Z pewnością wiele nowych znaczników, ale ja powiem o jednym. Reguła @font-face jest znana już od kilku lat, ale dopiero od niedawna zaczęła być bardzo mocno rozwijana i intensywnie wykorzystywana w środowisku projektantów stron internetowych.

W czym tkwi(ł) problem z czcionkami w internecie? Jeśli stosujemy font, którego nasz użytkownik nie ma na komputerze, nie jest możliwe by został on poprawnie wyświetlony. W tym momencie przychodzi nam na ratunek znacznik @font-face, pozwalający na zamieszczenie na naszej stronie niestandardowych czcionek bezpośrednio z serwera.

Przykładowo posłużmy się czcionką Museo zaprojektowaną przez Jos Buivenga, której krój 300 oraz 700 jest dostępny za darmo w serwisie MyFonts.com http://www.myfonts.com/fonts/exljbris/museo/

Świetnie, wybraliśmy już czcionkę. Nie możemy zapomnieć o względach technicznych. Co mam na myśli? Każda przeglądarka obsługuje inny format czcionek. Domyślnie pobraliśmy museo.otf. Zobaczmy jakich rozszerzeń jeszcze potrzebujemy dla danych przeglądarek:

    1. Internet Explorer – EOT
    2. Chrome – TTF i SVG
    3. Opera i Safari – TTF, OTF i SVG
    4. Mozilla – WOFF, OTF i TTF

Łatwo zauważyć, że zarówno Chrome jak i IE nie zauważy naszej czcionki, którą przed chwilą pobraliśmy. Co należy zrobić? Z pomocą przychodzi nam serwis Fontsquirrel.com, który stworzył usługę znaną jako @Font-Face Generator.

Wystarczy, że załadujemy nasz font na serwer FontSquirrel, a on przekonwertuje nam go na wszystkie możliwe formaty. Co więcej, dostaniemy gotowy kod @font-face gotowy do zastosowania na stronie. Sprawdźmy jak to działa.

Mamy już na naszym serwerze wszystkie potrzebne formaty czcionek, przejdźmy do kodu css:

@font-face {
font-family: 'Museo300Regular';
src: url('museo300-regular-webfont.eot');
src: url('museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('museo300-regular-webfont.woff') format('woff'),
url('museo300-regular-webfont.ttf') format('truetype'),
url('museo300-regular-webfont.svg#Museo300Regular') format('svg');
font-weight: normal;
font-style: normal;
}

Jak widać, sama struktura kodu nie jest skomplikowana, w zasadzie nie wiele trzeba tłumaczyć. Na początku przywołanie @font-face, następnie nazwa rodziny czcionek oraz kolejne odnośniki do poszczególnych, wcześniej wygenerowanych fontów.

Po zamieszczeniu takiego kodu wystarczy, że do naszych poszczególnych elementów będziemy dodawać odpowiednią wartość „font-family”, a czcionka będzie bez problemu działała.

Interpretacje czcionek w zależności od

przeglądarki

Nie da się ukryć, że przeglądarki bardzo często mają problem z poprawnym wyświetleniem czcionek. W szczególności tych cienkich, bardzo często są poszarpane. Głównym problem zatem jest coś, co widujemy w programach graficznych (np. Adobe Photoshop) czyli anti-aliasing. Słynne wygładzanie czcionek. W przeglądarkach nie ma silnika, który byłby w stanie w takim stopniu wygładzać czcionki, ponieważ znacznie zmniejszyło by to prędkość ładowania strony.

Mimo, że tak naprawdę niewiele jesteśmy w stanie z tym zrobić, to można by znaleźć kilka elementów, które mogłyby zmniejszyć widoczność niechcianych defektów. Stosowanie delikatnego cienia za naszym nagłówkiem spowoduje, że nasze wrażenie zmieni się i będzie nam trudniej zauważyć problem z wyświetlaniem czcionki. Jak to zrobić? CSS3 zna odpowiedź: text-shadow:

text-shadow:0px 2px 1px #fff;

Wartości od lewej wskazują: Położenie względem osi X (poziom) w tym przypadku wartość 0 px, położenie względem osi Y (pion), poziom rozmycia oraz kolor naszego cienia.

Efekt konkretnie tego przykładu można zobaczyć pod adresem www.web-lab.com.pl/ie. Nawet jeśli nasza czcionka wygląda dobrze, to warto stosować tą metodę nadawania głębi dla naszego tekstu. Obecnie większość serwisów wykorzystuje to w nagłówkach swoich artykułów. (np. TVN24.pl).

Reasumując

Temat fontów w sferze internetu jest na tyle rozległy, że z pewnością poświęcimy mu wiele miejsca na łamach DesignMagazyn. Należy pamiętać, że nie każda czcionka będzie wyglądała tak, jak założyliśmy w naszym projekcie graficznym. Ja ze swojej strony mogę polecić serwis TypeKit od firmy Adobe, który pozwala na kupowanie czcionek, które świetnie prezentują się w internecie. Wkrótce pojawi się także kilka porad dotyczących tego narzędzia.

Zachęcam do komentowania i dzielenia się swoją opinią.

Zdjęcia w artykule pochodzą z serwisu Fotolia

profile

Sebastian Cencyk

https://dribbble.com/scencyk

Grafik oraz pomysłodawca DesignMagazyn. Szczecinianin.

Zobacz komentarze (0) ...