Na co dokładnie przekłada się rozmiar czcionki?


81

Mam czcionkę 40 pikseli, którą próbuję przetłumaczyć na niestandardowe obrazy. Próbuję dokładnie dopasować rozmiar obrazu, ale mam problemy z uzyskaniem dokładnie odpowiedniego rozmiaru. Zasadniczo sprowadza się do tego. Kiedy czcionka mówi, że to X pikseli, co to fizycznie oznacza?


w czcionce mamy terminologię x wysokości, czy mówisz o tym samym?
Jack

5
Podczas pisania dokumentu zwykle używana jest czcionka o rozmiarze 12. Co oznacza 12?
PearsonArtPhoto

12 = typ 12pt (zazwyczaj)
DA01

Odpowiedzi:


67

To doskonałe pytanie, na które odpowiedź jest raczej niezadowalająca.

Rozmiar typu, niezależnie od tego, czy jest określony w pikselach, punktach (1/72 ") czy milimetrach, jest wysokością kwadratu em, niewidzialnego pudełka, które jest zwykle nieco większe niż odległość od najwyższego wznoszenia do najniższego zjazdu.

Biorąc pod uwagę, że jest to nieco arbitralny środek, który

  • zależy od dokładnego projektu technicznego czcionki
  • nie można dokładnie zmierzyć na podstawie wydrukowanej lub zrasteryzowanej próbki

nie jest zbyt znaczący ani użyteczny, poza przybliżeniem.

W twoim przypadku ustal, jaki rozmiar musisz określić w Photoshopie, aby dopasować się do renderowania przeglądarki przez eksperyment. Powinieneś uznać to za stały współczynnik dla dowolnej czcionki, ale nie spodziewałbym się, że tak będzie w przypadku zmiany przeglądarki lub systemu operacyjnego.


49

Czas ASCII! Udawaj, że dwa poniższe pola są kawałkami ołowiu z około 1900 roku. Wówczas kroje pisma były odlewane w ołowiu (lub frezowane w drewnie). Aby typ mógł zostać ustawiony na blokadę drukowania, musiał być podłączony do litych bloków. Stąd pochodzi wymiar typu (w punktach):

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Zauważ, że dwie powyższe litery mają różne rozmiary, ale ich obwiednia jest taka sama. Jako takie, pod względem punktów, obie czcionki mają ten sam rozmiar.

Obecnie niewiele produkujemy ołowiu i drewna, a większość z nich jest cyfrowa. Jednak koncepcja wymiarowania punktów wciąż istnieje, ponieważ istnieje wirtualne pudełko o tej samej wysokości dla każdej litery, na której umieszczony jest typ. Ponownie, to wirtualne pudełko określa rozmiar punktu, a nie fizyczne pomiary samych liter. Rzeczywisty rozmiar liter jest często mniejszy niż rozmiar punktowy (ale może być również większy).

Pomiar typu w pikselach nie działa z tego powodu, jednak można „ustawić” typ w pikselach w CSS i tym podobnych. Przeglądarka dokonuje tłumaczenia najlepiej, jak to możliwe, między deklarowanym rozmiarem px. Ale zawsze jest to niewyraźna ocena.

Ostatecznie nie ma dokładnego sposobu na uzyskanie dwóch czcionek o dokładnie takim samym rozmiarze, bez patrzenia na nie wizualnie i zmieniania rozmiaru każdego z nich, dopóki nie zobaczysz, że są tego samego rozmiaru.


Na komputerze obliczasz Punkty na piksele, takie jak PX = Punkty * SystemDPI / 72. DPI w świecie wideo (monitorze) to czysta arbitralna wartość wprowadzona przez Apple w 1984 r. Urządzenia wideo używają tylko pikseli; DPI nie istnieje w świecie wideo / obrazu. Nowoczesne czcionki oparte są na tej koncepcji, w której 1 punkt, 1/72 jest zdefiniowany jako 1/72 cala.

5
@AbdiasSoftware Tak, 1 punkt został uśredniony do 1/72 cala, a pierwszy Mac miał ekran 72 ppi. Ale nie jestem pewien, co to ma wspólnego z zadanym pytaniem lub udzieloną odpowiedzią. Faktem jest, że czcionki, zarówno cyfrowe, jak i analogowe, mają obwiednię i że obwiednia jest tym, do którego odnosi się rozmiar.
DA01,

41

„Rozmiar czcionki” czcionki odnosi się do „wysokości czcionki”, która niekoniecznie jest taka sama jak wysokość poszczególnych znaków w czcionce.

Zazwyczaj wysokość em czcionki jest zgodna z tą samą podstawową ideą - zostanie ona z grubsza ustawiona na odległość od najniższego zstępującego (takiego jak spód litery g) do najwyższego wznoszącego (takiego jak góra litery h):

Jak widać, żadna z poszczególnych liter nie obejmuje całego zakresu.

W przypadku czcionek cyfrowych „wysokość” czcionki jest wyborem dokonanym przez projektanta czcionek i wcale nie musi być zgodna z tą konwencją: projektant czcionek cyfrowych może wybrać dowolną podstawę dla swojego rozmiaru czcionki. Jednak czcionki nadal mają skłonność, przynajmniej z grubsza, do konwencji opisanej powyżej. W dawnych czasach, gdy czcionka składała się z metalowych bloków, „wysokość” była wysokością jednego z tych bloków, która musiała być wystarczająco wysoka nie tylko dla każdej postaci w tym kroju pisma, ale także dla wstępujących, schodzących i akcentujących.

Obecnie wiele współczesnych krojów zawiera akcenty również na wielkich literach (np. Ć) - akcenty te wykraczają poza tradycyjny typograficzny wyciąg, a zatem te (i ewentualnie inne znaki specjalne) znajdują się poza górą „em”. Ze względów historycznych nie dostosowujemy rozmiaru em, aby na to pozwolić, utrzymujemy rozmiar em i po prostu go rozsuwamy - każdy typograf używający takich akcentów będzie musiał upewnić się, że jest dla nich miejsce, chociaż zwykle odstęp między wierszami jest odpowiedni w tekście.

Luka linii w tekście jest przestrzeń pozostawiona pomiędzy descender jednego wiersza tekstu i wznoszącego linii pod nim - to znaczy, że „rozmiar czcionki” nie obejmuje tego pomiaru odstępu linii. Na to może mieć wpływ pole CSS line-height, gdzie1.4oznacza, że ​​odstęp między wierszami wynosi 0,4 raza wysokość em, a zatem cała linia tekstu podstawowego zajmie 1,4 raza wysokość em, w tym odstęp między wierszami. W innych aplikacjach odstęp między wierszami można określić inaczej: edytory tekstu często określają wielokrotność „pojedynczych” odstępów między wierszami, ale w przeciwieństwie do CSS, zwykle „pojedyncze” odstępy nie oznaczają braku odstępów między wierszami, ale niektóre „domyślne” wiersze gap, w którym aplikacja próbuje stworzyć domyślną wersję opartą na metadanych w pliku czcionki. Istnieje wiele standardów określania wielkości czcionki (np. W Truetype istnieją różne standardy dla komputerów Mac i Windows / OS2), więc domyślna przerwa między wierszami może się różnić w zależności od aplikacji i systemu operacyjnego.

Teraz, nawet jeśli projektant robi się na przewidywalnym konwencję o ich wysokości em, to nadal nie powiedzieć wielkość liter (cap-wysokość) lub rozmiar powiedzmy o(x wysokość lub linii środkowej), ponieważ mogą one się zmieniać swobodnie pomiędzy krojami pisma w stosunku do wysokości wstępującej. Jednak w rodzinie czcionek będą one zwykle spójne. Na przykład Times New Roman Bold i Times New Roman Regular będą miały te same rozmiary znaków dla tego samego rozmiaru em, które powinny obejmować wznoszenia, zstępy, wysokość czapki i wysokość x.


2
Tak - istnieją konwencje (takie jak em od dołu „g” do górnej części „h”), ale nadal istnieje rozbieżność, a formaty czcionek wcale nie trzymają projektantów tych konwencji.
thomasrutter,

7

Spróbuj wpisać znak pionowego paska („|”) i zmierz to. Jeśli poprawnie skopiowałem twoją sytuację, a twoje wygładzanie krawędzi nie rozmywa jej zbytnio, powinno to być 22px.

22px reprezentuje wysokość bloku typu. Ale każda postać wypełnia blok inaczej. „G” lub „q” zajmą dolny obszar tego 22px, podczas gdy wielkie litery i małe litery, takie jak „b” lub „d”, zajmą górne części. „|” to tylko jeden z (jeśli nie tylko) charakterze, które będą całkowicie wypełnić przestrzeń 22px.

Nie wiem, jak porównać z ustawieniami CSS, ale to wyjaśnia, jak Photoshop interpretuje wysokość tekstu.


1
Co więcej, możesz ustawić dwie czcionki o tym samym rozmiarze i często zobaczysz, że same litery nie są. Po prostu mają ten sam rozmiar „bloku”.
DA01,

3
Rura nie zawsze wypełnia całkowitą przydzieloną przestrzeń. Jest to wyłącznie preferencja projektanta czcionek. Często będzie pasować do górnej części wznoszących i dolnej części zstępujących, ale nawet wtedy przestrzeń przeznaczona dla postaci może być nadal znacznie większa.
DA01,

2
Znak pionowego paska nie zawsze jest równy rozmiarowi czcionki (np. „Pełna wysokość”) czcionki, nie. W rzeczywistości zwykle będzie mniej.
thomasrutter

2
Pionowe znaki rysujące w ramce powinny teoretycznie obejmować całą wysokość em (i prawdopodobnie nakładają się na nią niewielką ilość). Ale bardzo niewiele czcionek zawiera te znaki. Normalny pionowy pasek ( |) NIE będzie zwykle równy rozmiarowi em. Nie robi tego nawet w podstawowych czcionkach Microsoft (Arial, Georgia itp.).
thomasrutter

2
Znak pionowego paska nie wypełnia całej wysokości. Akcenty dla wielkich liter, np. „Á”, są umieszczone wyżej. Porównaj siebie: „Á” „|”
znq

0

Czy na pewno Twoja czcionka jest mierzona w pikselach? Większość czcionek czasu mierzona jest w punktach. Punkt ma 1/72 cala. Czcionka 40 pt ma wysokość 40/72 "lub 5/9". Kickerem jest to, że jest to wymiar od góry wznoszących się na wysokich literach do dolnej części zstępujących na literach wiszących poniżej linii bazowej. Dlatego czasami stosuje się wysokość x, jak wspomniano powyżej. To jest wysokość małych liter, które nie trzymają się ani w górę, ani w dół.

Tak czy inaczej, pomiary nigdy nie są dokładne, niestety. Musisz tylko trochę zmierzyć i wymyślić (i / lub prób i błędów), aby osiągnąć to, czego próbujesz.


Ale punkty odnoszą się tylko do typu fizycznego (drukowanego, rzeźbionego, grawerowanego itp.).
e100

Nie do końca poprawne. Typ nie jest mierzony od góry wznoszących do dolnej części zstępujących, ale raczej mierzony jest przez obwiednię, która może, ale nie musi, korelować z wysokością wznoszącego się / opadającego. To sięga czasów ołowiu i rodzaju drewna, w których typ został umieszczony na bloku. Wysokość tego bloku decydowała o tym, jaki rozmiar oznaczono jako typ. W związku z tym dwie czcionki, obie ustawione na 12 punktów, mogą mieć bardzo różne rozmiary w stosunku do siebie. (Nie będę się w tym zastanawiał, że 1pt nie tradycyjnie = 1/72 cala ...;)
DA01,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.