„Prawidłowo” pionowo wyśrodkuj tekst w polu

Czy istnieje reguła kanoniczna, jak wyśrodkować tekst pionowo w polu? Lub innymi słowy, jak wyrównać ramkę wokół tekstu? Mogę sobie wyobrazić trzy opcje oparte na danych typograficznych (patrz moja nieprecyzyjna ilustracja):

• Wyrównaj na środku wysokości x
• Wyrównaj na środku wysokości czapki („ średnia linia ”)
• Wyrównaj na środku czapki + wysokości zejścia

Jestem głównie programistą, ale często muszę to robić i chciałbym wiedzieć, czy istnieje wspólna wspólna zasada lub czy projektanci robią to, co uważasz za stosowne. Wolę linki do książek o projektowaniu graficznym niż osobiste opinie.

Dobre pytanie!

Naprawdę lubię i zgadzam się z udzielonymi do tej pory odpowiedziami. Moja odpowiedź skupia się bardziej na technice pragmatycznej niż na rozumowaniu naukowym lub matematycznym. :RE

Powiedziawszy to, wolę używać linii bazowej i wysokości x (patrz sekcja Typy terminów poniżej) jako punktu początkowego odpowiednio dla górnej i dolnej linii mojego pudełka. Mam nadzieję, że ten GIF pomaga wyjaśnić:

Po uzyskaniu ścieżki do wyrównania z linią bazową lub wysokością x, następnie używam SHIFTklawiszy + UPlub DOWNstrzałek, aby utworzyć wizualne dopełnienie (domyślnie w Photoshopie każdy przyrost jest 10pxtaki, więc w powyższym przykładzie dodałem 40pxdopełnianie na górze i Dolny).

W tym przykładzie możesz zobaczyć, co robi narzędzie wyrównywania, gdybym wziął to samo pole / tekst i wykonał „Wyrównaj pionowe centra” (czerwony tekst jest wynikiem użycia narzędzia wyrównywania):

Jak widać, jest dość blisko ( 2pxróżnica).

Podsumowując / podsumowując:

Techniki, których używam:

1. Dopasuj górne / dolne ścieżki pola odpowiednio do wysokości x / linii bazowej (a następnie SHIFTklawisze strzałek na zewnątrz, aby uzyskać wizualne wypełnienie.
2. Podobnie, czasami będę wciskał tekst w górę iw dół, aż jego linia bazowa i wysokość x spotkają się z dolną i górną ramką pola; stamtąd policzę piksele, a następnie równomiernie rozkładam resztę między dwoma kierunkami, wyśrodkowując tekst.
3. Zaznacz zarówno pole, jak i tekst, a następnie wykonaj polecenia „Wyrównaj centra pionowe” i „Wyrównaj centra poziome”.
4. Wreszcie są chwile, kiedy przyglądam się umieszczeniu. Zazwyczaj idę w górę vs. w dół, aby uniknąć wizualnego „ugięcia” (dotyczy to kadrowania obrazu, patrz sekcja kadrowania obrazu poniżej); jest to szczególnie ważne, jeśli czcionka ma nieparzystą wysokość, a pozostała 1pxróżnica to… Przesunę tekst 1px(lub więcej) w górę zamiast w dół.

Kadrowanie obrazu

Najczęściej stosowana mata ma jednakowy margines. O dziełach z centrum wizualnym niższym niż rzeczywiste centrum, [8] Ważenie dna lub przesunięcia są często stosowane w matach. Dolny margines jest większy niż margines boczny i górny. Patrząc na obraz, oczy mają tendencję do centrowania wyżej niż fizyczne centrum obrazu. Poprzez utworzenie większego dolnego marginesu i przesunięcie maty przyciągasz oko do fizycznego środka obrazu. Górny środek to podzbiór ważenia dolnego, w którym górne i boczne marginesy są równe, co tworzy przyjemny wizualnie efekt. Jest to szczególnie prawdziwe w matach, w których granice nie są równe, takich jak 11x14 z otworem 8x10.
- WikiPedia: Mat (kadrowanie obrazu)

… i tu:

Maty są „ważone” na dole, ponieważ nasze oko / mózg odczuwa przyciąganie grawitacyjne. Jeśli mata ma taką samą szerokość dookoła, nasz mózg „zarejestruje” spód jako nieco węższy (obraz nie jest wyśrodkowany wizualnie na macie)
- WetCanvas> Centrum nauki> Porady i kadrowanie w ramkach> Dyskusje o kadrowaniu Przeładuj stronę Waga spód maty

Wpisz warunki

- https://www.supremo.tv/typeterms/

PREMIA!

Oto GIF, porównujący wysokość czapki, zstępujący, rosnący ze wszystkimi małymi literami bez zstępujących / podnoszących:

Myślę, że obie wersje ładnie układają się w pudełku.

Masa wizualna jest tak dynamiczna, że ​​tak naprawdę nie można jej podyktować wysokością x, wysokością czapki itp.

Niektóre elementy w twoim projekcie mogą przyciągać wzrok w jednym kierunku nad drugim, mimo że matematycznie są „w środku”, od lewej do prawej strony, na przykład w stosunku do płótna.

„Wizualne centrum” to miejsce, w którym wszystkie elementy są zrównoważone wizualnie, mimo że nie znajdują się dokładnie w środku.

Możesz spróbować poeksperymentować z tym narzędziem: http://javier.xyz/visual-center/

Projektowanie nie zawsze jest nauką ścisłą. Często to, co wygląda poprawnie, może nie być tym, co jest prawdziwym centrum lub matematycznie poprawnym.

Konkretnie, w twoim pytaniu będzie zależeć od wznoszących i opadających w tekście, aby najlepiej określić wyrównanie optyczne. Jeśli nie ma wznoszących się lub opadających, idealne ustawienie może się zmienić. W twoich przykładach numer trzy wydaje się najlepszym wyborem, ponieważ są zarówno wznoszące się, jak i opadające, a ich centrowanie wygląda najbardziej przyjemnie dla oka.