Jakie są standardowe współczynniki typografii w sieci?


25

Tworząc projektowanie stron internetowych, często staram się, aby moja typografia była proporcjonalna i spójna. Jednak nie udało mi się znaleźć żadnych ostatecznych artykułów ani zasobów na temat tego, jakie współczynniki i rozmiary należy zastosować. W szczególności, jakie są zalecane lub standardowe praktyki dla:

  • Rozmiar czcionki
  • Wysokość linii
  • Szerokość linii
  • Odstępy między wierszami

Uwzględnij zarówno tekst akapitu, jak i nagłówka w swoich odpowiedziach. Również bardzo przydatne byłyby wszelkie badania skuteczności różnych wskaźników lub wskaźników.

Odpowiedzi:


18

Elementy stylu typograficznego Roberta Bringhursta to dokładne i wspaniałe odniesienie do takich rzeczy. Jest długi, ale bardzo cenny.

Wielu projektantów zaleca standardową siatkę linii, aby linia + wypełnienie zawsze mieściła się, powiedzmy, w 16 pikselach. Więc cokolwiek mniejszego niż to miałoby wysokość linii 16, wszystko powyżej tego miałoby wysokość linii 32.

Idealna długość wiersza do czytania tekstu wynosi niekiedy 45 znaków, a innych źródeł 55–75.

Istnieje kilka typowych średnich stron internetowych: wzorce projektowania typograficznego i najlepsze praktyki


1

Powiedziałbym, że zacznij od akapitu o wielkości 16 pikseli i użyj sekwencji Fibonacciego, aby obliczyć resztę. Wygląda na to, że główne przeglądarki używają tej logiki. Z biegiem lat (do przyszłych badań, przy użyciu „Elementów stylu typograficznego: wersja 4.0” Roberta Bringhursta, Hartleya i Marksa), wiodącą czcionkę ustawiono na 12 pkt. Dla czcionki 10 pkt.

Konwertując 12 punktów na piksele, otrzymujemy podstawową czcionkę 16px.

Większość domyślnych arkuszy stylów przeglądarki używa 16 pikseli na tekst akapitowy, co można sprawdzić w DOM samodzielnie lub czytając https://www.w3.org/TR/CSS21/sample.html i listy http: //. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Problem, który mamy dzisiaj, polega właśnie na tym, że mówimy o nowym typografii. Obecna typografia sieciowa, która musi pasować do różnych urządzeń, jest zupełnie inna niż wcześniejsze koncepcje, takie jak te przedstawione w Elementach stylu typograficznego Roberta Bringhursta. Mimo że jest to doskonała książka, w rzeczywistości współczesny projektant potrzebuje kodu. Zwykle rozważam standardową matrycę z głównych arkuszy stylów przeglądarki, tworząc szkielet pliku HTML z podstawowymi h1, h2, h3, h4, h5, h6, akapit, stopka. Sprawdzam arkusz stylów przeglądarki, aby zrozumieć rozmiar standardowego rozmiaru w pikselach, w którym używają wysokości linii i hierarchii nagłówków. Wcześniej rozmiar typografii internetowej był regulowany przez ruchomy metal / drewno, ale od 1985 roku, wraz z umową między Adobe i Apple, rzeczy zaczęły się zmieniać. Uważam, że dzisiaj głównymi regulatorami koncepcji typografii są Apple, Safari, Windows z Internet Explorer, Chrome, Firefox ... Musisz spojrzeć na ich arkusze stylów przeglądarki, aby dostosować twoją typografię do tego, co faktycznie będzie renderowane i różne urządzenia. Nadal powinieneś postępować zgodnie z praktyką z elementów stylu typograficznego Roberta Bringhursta, która jest doskonałą książką, lub postępować zgodnie z systemem sekwencji Fibonacciego. Zazwyczaj śledzę zmiany w arkuszach stylów przeglądarki i czytam specyfikacje w3 tutaj: Nadal powinieneś postępować zgodnie z praktyką z elementów stylu typograficznego Roberta Bringhursta, która jest doskonałą książką, lub postępować zgodnie z systemem sekwencji Fibonacciego. Zazwyczaj śledzę zmiany w arkuszach stylów przeglądarki i czytam specyfikacje w3 tutaj: Nadal powinieneś postępować zgodnie z praktyką z elementów stylu typograficznego Roberta Bringhursta, która jest doskonałą książką, lub postępować zgodnie z systemem sekwencji Fibonacciego. Zazwyczaj śledzę zmiany w arkuszach stylów przeglądarki i czytam specyfikacje w3 tutaj:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Myślę jednak, że dziedzina projektowania musi wziąć to pod uwagę i uważam, że edukacja w praktyce nie jest aktualizowana obecne realia. Możesz także przeczytać więcej tutaj na moim blogu: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Cześć @EstelaG i witamy na GD.SE! Mamy surowe zasady dotyczące spamu i odpowiedzi w linkach. Nie chciałbym patrzeć na twoją odpowiedź. Powinieneś edytować swoje pytanie, aby podsumować główne punkty artykułu.
ciekawy
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.