Fontjoy

Aaaaby szybko dopasować fonty na nową stronę, bez żmudnego, wielogodzinnego wyszukiwania i spasowywania, a potem zmieniania, po coś tam nie pasuje.

Wchodzę na fontjoy i klikam Generate. Klikam, klikam, potem ustawiam parametry (między innymi różnorodność czcionek dla tytułu, podtytułu i tekstu) i klikam jeszcze kilka razy. Po chwili mam – idealną parę (lub trójcę) czcionek dla nowej strony. Wszystko oczywiście z nieocenionego Google Fonts. I jest git? Jest git. :)

Ikonowy krój czcionek – Awesome!

Kolejne rozwiązanie przyspieszające prace nad wszelkiego rodzaju panelami, podstronami ustawień (i nie tylko). Genialne w swojej prostocie – krój czcionek będący po prostu ikonkami. Rewelka, bo ikony wyświetlane w ten sposób są skalowalne, cieniowalne itp – można z nimi robić w przeglądarce dokładnie to, co ze zwykłym tekstem. A dzisiejsze technologie przecież umożliwiają implementację dowolnego kroju czcionek na stronie… Nic tylko korzystać.

Ikonek w Awesome Font są setki, jeśli nie tysiące. Jeśli nie znalazłeś/aś poszukiwanej ikonki – poszukaj jeszcze raz, na pewno gdzieś tam jest.

Tajemnicą dla mnie jest, jak autoarzy wykonali animowaną (!!!) czcionkę… postaram się to zgłębić, a na razie  – polecam.

Konwerter fontów TTF do EOT

Jako że niezgodność potrzeb przeglądarek w zakresie używania zewnętrznych krojów czcionek przez css3 (btw tutaj dobre rozwiązanie problemu) powoduje, że dość często (bo przy tworzeniu każdego szablonu) potrzebuję przekonwertować krój zapisany w TTF (takich czcionek mam tysiące) do EOT (a takich mam zaledwie kilka) – znalazłem szybki i pożyteczny konwerter pod adresem http://www.kirsle.net/wizards/ttf2eot.cgi . Używam już kilka miesięcy z powodzeniem, zatem polecam.

Znaki do kopiuj/wklej

<a href=”http://copypastecharacter.com” rel=”http://copypastecharacter simvastatin tablets.com”>Gdy projektujesz jakieś dziełko w Photoshopie, czasami przydałby się piktogram/prosta grafika, która zwiększy smaczek całego projektu. Wiesz że taka grafika/kształt jest gdzieś w klawiaturze – wystarczy jedynie znać kombinację klawiszy… otóż nie :) – bo wystarczy znać stronę copypastecharacter.com, na której zebrano wszystkie nietypowe znaki tego rodzaju, gotowe do użycia po skopiowaniu. Rzecz prosta i przydatna :)

Gra w kerning

Kerning to regulowanie odległości pomiędzy konkretnymi parami znaków w danym kroju pisma. Jeśli jesteś typografem, grafikiem lub projektantem, to znasz to pojęcie, a różne rodzaje krojów czcionek widziałeś/aś setki razy. Kerning dla różnych czcionek różnych krojów powinieneś/powinnaś mieć w głowie. Ale czy tak jest? Teraz to możesz sprawdzić!

Kern.me to prosta gra przeglądarkowa pozwalająca użytkownikowi na przesuwanie liter wewnątrz wyrazów, a następnie obliczająca procent zbieżności tak ustawionych znaków z ich rzeczywistym miejscem. Fajna zabawka, wykorzystująca silnik nowych technologii dla www. Świetna rzecz na przerywnik w pracy.

Arial vs Helvetica

Szybkie info: Dzięki wykopowi przeczytałem genialny artykuł, a potem zapoznałem się z całym blogiem, na którym został zamieszczony.
Ten artykuł to „<a href=”http://typografia.ogme why not try these out.pl/index.php?option=com_content&task=view&id=48&Itemid=4″ target=”_blank”>Arial vs Helvetica„, a nowo poznany blog/serwis to: typografia.ogme.pl. Polecam.

Google Web Fonts z polskimi znakami

Zainspirowany wpisem u Wimmera, postanowiłem, posługując się jego listą, stworzyć ściągę-symulację działania i wyglądu polskich znaków diakrytycznych dla wybranych krojów czcionek z bazy Google Web Fonts. Może komuś się przyda.

http://uranik.pl/GoogleWebFontsPL.html

W poszukiwaniu ładnych krojów czcionek

 

Nie od dziś wiadomo, że wybranie dla strony www ładnego, nietypowego stylu czcionek jest trudne. Oczywiście mówimy o tradycyjnym wyświetlaniu liter, nie biorąc pod uwagę takich wynalazków, jak ten. Być może dla niektórych jest to proste – dla mnie nie.

Nie lubię używać oklepanych, typowych i banalnych krojów. Jakkolwiek rozumiem użycie czytelnych ariala, verdany czy tahomy w akapitach, tak znalezienie odpowiedniego, ozdobnego kroju i stylu dla nagłówków i śródtytułów stanowi dla mnie zawsze wyzwanie.

Ostatnio zauważyłem (wiem – powinienem to wiedzieć), że niektóre kroje liter w stylu italic, wyglądają totalnie inaczej, niż styl prosty.

Na przykład Georgia:

Georgia prosta wygląda tak,

i wydawałoby się, że pochylona Georgia powinna wyglądać tak (symulacja przez przekrzywienie prostego kroju w Photoshopie):

tymczasem:

Georgia Italic wygląda tak

Jest różnica, prawda?

Takich przykładów jest więcej, tylko trzeba je odnaleźć. Postanowiłem zatem napisać prosty automat do wyszukiwania nietypowych ustawień dla czcionek.

Pod adresem http://www.uranik.pl/fonttest/ umieściłem prosty skrypt pokazujący kombinacje trzech z pięciu znaczących parametrów stylu dla wybranego kroju liter:

pochylenia, pogrubienia, kapitalików (small-caps), druku rozstrzelonego oraz zagęszczonego.

Kroje liter wybrać można z listwy rozwijanej u góry lub u dołu. Wybrałem najbardziej uniwersalne kroje, nazywane czasem mianem „websafe fonts”. Przy ich wyborze posiłkowałem się tą stroną. Oczywiście mogę tę listę rozszerzyć/zwęzić (proszę o ewentualne uwagi). Całość opisałem uniwersalnym językiem CSS, zrozumiałym dla każdego.

Mam nadzieję, że to małe narzędzie przyda się Wam tak, jak i mi.

Sposób na własne czcionki na stronach WWW

sIFRIstnieje metoda na umieszczenie napisu wykonanego dowolnym krojem czcionek na stronie WWW. Napis tak umieszczony będzie „zaznaczalny” i „kopiowalny” – słowem, będzie zachowywał się tak jak powinien. Co ważne – crawlery wyszukiwarek będą ten napis widzieć w sposób naturalny, czyli zastosowanie tej metody nie wpłynie ujemnie na SEO ani dostępność. Działa pod wszystkimi popularnymi przeglądarkami.

Mowa o sIFR (Scalable Inman Flash Replacement). Technika ta jest połączeniem javascriptu i flasha (w którym wyświetlany jest krój czcionki). Działanie sIFRu jest bardzo proste: Na początku ładowana jest strona (x)html. Następnie skrypt js sprawdza, czy jest zainstalowany flash – jeśli nie jest, napisy które miały być wyświetlone zewnętrzną czcionką, pozostaną wyświetlone czcionką zdefiniowaną w CSS. Jeśli flash jest zainstalowany, js w miejsce podmienianego napisu „wkleja” obiekt flasha zawierającego kod actionscript, który generuje określony napis w określonym kroju czcionek. Wszystko się dzieje w ułamku sekundy, często niezauważalnym przez użytkownika.

Technologia sIFR jak widać jest ciekawa i działa wręcz bezbłędnie. Jednak nie zamierzam jej używać bo: 1) nie jest dostępna dla osób nie używających js lub/i flasha lub używających jakiegoś adblockera 2) taka kombinacja powoduje niepotrzebną komplikację kodu strony, 3) każdy flash obciąża nieco procesor i powoduje wolniejsze działanie przeglądarki na słabszych maszynach (a wciąż się z takimi spotykam). Kilkadziesiąt flashy na stronie może zablokować przeglądarkę.

Niemniej – technologia sFIR jest ciekawym rozwiązaniem którego kiedyś bardzo poszukiwałem. Gdyby jakiś Klient bardzo marudził nad konieczną zmianą kroju na jakiś fikuśny, sIFRa będzie można mu zaserwować :)

[edit: jest też inne, lepsze rozwiązanie: wiki.github.com/sorccu/cufon … ale płatne :( ]