Projektuję czcionki pikselowe o jednolitej przestrzeni dla gry i do tej pory mogłem pracować tylko z bardzo małymi rozmiarami (największy, którym zarządzałem, to 5 x 9), ponieważ z tymi najłatwiej jest się pomylić. Często wyniki, które wymyślam dla rozmiarów nawet tak małych jak 7x13, są blokujące i nieprzyjemne.

Przeanalizowałem kilka innych czcionek pikselowych, a większość z tych atrakcyjnych graficznie zawiera wiele alternatywnych rozważań, których nigdy bym nie pomyślał, na przykład tworzenie całych sekcji tylko po przekątnej.

Czy są jakieś specjalne rozmiary bloków, które są „optymalne” do projektowania czcionek pikselowych? Czy są jakieś specjalne umiejscowienia pikseli, o których mógłbym pamiętać? Ponieważ czasami, gdy rysuję linię, która ma tylko 11 pikseli długości (lub sprawiam, że rzeczy przecinają się przy tak małych rozmiarach), po pomniejszeniu wygląda to jak coś innego.

Czcionki w pikselach nie różnią się zbytnio od drobnych czcionek drukowanych, gdy tylko do tego dojdziesz *. Jedynym dużym wyjątkiem jest to, że wiesz, co medium zrobi z czcionkami pikselowymi - bardzo duża zaleta.

Tak naprawdę nie ma idealnej siatki pikseli. Oczywiście większa siatka daje więcej miejsca do pracy. Najmniejsze typy, które widziałem z powodzeniem, to projekty 7px. Projekty MiniFonts Joe Gillespie pomogą ci zrozumieć projektowanie przy progu czytelności. Kolejne pytanie dotyczyło tych mikrotechnicznych i może stanowić dalsze odniesienie.

Gdzie zacząć

Każdy problem projektowy zaczyna się od ograniczenia. Przy dobrej czcionce jest to [zwykle] zamierzone zastosowanie. Gdzie musi pasować czcionka pikselowa? Czy Twoja gra zyskałaby na łatwym czytaniu tekstu, czy też tekst musi pozostać na uboczu i być dostępny tylko do „rozszyfrowania” w razie potrzeby?

Musisz wyjaśnić, czy chcesz używać małych liter. Czcionka wielkimi literami może zmieścić się na mniejszej siatce ze względu na stosunkowo proste kształty i brak przedłużaczy (poniżej linii bazowej i powyżej wysokości czapki). Ale małe litery mogą być również dość małe: Minx Gillespie stanowi doskonały punkt odniesienia dla tego, co uważam za najmniejszy rozsądny mały alfabet.

Szczegóły

Zauważysz coś nawet w najlepszych czcionkach pikselowych: wyglądają okropnie, gdy się zbliżysz i spróbujesz je rozgryźć. Mają być „postrzegane”, to znaczy luki w projekcie są wypełniane przez mózg. Zatem dwa kwadraty wyrównane do 45 ° stają się linią ukośną. Czasami dziura w siatce jest „cienką” linią między dwoma grubymi pociągnięciami.

Projektowanie z bliska : oto wyzwanie projektanta czcionek pikselowych. Innymi słowy, tworzysz i modyfikujesz kształty w absurdalnie małych odległościach, jednocześnie zastanawiając się, jak to będzie wyglądać, gdy zobaczysz ich normalny rozmiar.

Komputer jest naszym przyjacielem w tej mylącej sytuacji: Po prostu otwórz drugie okno ze 100% widokiem, abyś mógł zobaczyć, jak naprawdę wygląda twój projekt . Posiadanie drugiego monitora dla tego „widoku rzeczywistości” sprawia, że ​​rzeczy są znacznie wygodniejsze.

Pomieszczenie małych liter

Ponieważ wspomniałeś o potrzebie małych liter w rozmiarze 6 x 12 ...

Oto krótki przykład, który rzuciłem razem, aby zilustrować konkretne względy związane z tym wymogiem.

Na początek wyciąłem piksel z twojego wzrostu. Pracując w tak małych rozmiarach zauważysz, że czytelność korzysta z szerszego ciała postaci. Czapki muszą być tylko nieznacznie wyższe niż małe litery. Rzuć okiem na 9px Verdana, aby zobaczyć, jak szerokie ciało może poprawić czytelność.

Małe litery z widocznymi wznoszącymi się często lepiej czytają, jeśli nieznacznie wystają ponad wysokość czapki (jak bw moim przykładzie). Mój przykład wciąż udaje się pozostać na ciele o wysokości 11 pikseli. Ułatwia to fakt, że na długie dekantery mniej wpływają na czytelność: wystarczy kilka pikseli.

Nawet na tej restrykcyjnej siatce możesz zobaczyć, jakie miłe akcenty stylu możesz dodać bez całkowicie rozbijającej się czytelności.

Z podświetloną wysokością x i ciałem dla odniesienia:

Przy powiększeniu Milustruje to godną uwagi uwagę. Z siatką liczb parzystych nie ma jednego punktu środkowego, na który mógłby wylądować piksel. To niekoniecznie zła rzecz, musisz tylko podjąć pewne decyzje, które wydają się dziwne, gdy są blisko. Drugi M, na przykład, wygląda dość niezręcznie, gdy jest powiększony, ale w rzeczywistości poprawia rozmiar ekranu. Tego rodzaju domniemane linie są kluczowym składnikiem większości czcionek pikseli.

Oczywiście musisz również wziąć pod uwagę dodatkową przestrzeń wymaganą do odstępów między literami. Na pewno nie masz tam dużo miejsca do gry, ale jest to ważna część czytelności.

Spójrz na mistrzów

Jak w przypadku każdej formy sztuki, dowiesz się najwięcej, próbując robić to, co robią mistrzowie. Przykłady, które zamieściłem powyżej, dostarczą Ci wielu informacji.

Klasycznym studium przypadku doskonałości czcionek pikselowych jest Unibody 8 firmy Underware . Nowatorska pionowa „kursywa” osiąga ten efekt, stosując wyrównanie 45 °, aby wskazać kąt czcionki kursywnej, bez narażania całej czcionki w procesie.

Emigre był kolejnym pionierem, wraz z Susan Kare na wczesnym Mac OS.

* Uwaga dodatkowa:
Retina jest fantastycznym przykładem tego, jak czcionka drukowana uwzględnia nieoczekiwane w małych rozmiarach, podobnie jak uważam jej poprzednika Bell Centennial .