Pionowa siatka rytmu / linii bazowej w projektowaniu stron internetowych

Niedawno przeczytałem kilka artykułów na temat znaczenia dobrego pionowego rytmu / korzystania z siatki bazowej dla dobrej typografii w projektowaniu stron internetowych. Postanowiłem spróbować użyć siatki bazowej, takiej jak siatka 960 na zdjęciu poniżej, jako obrazu tła dla projektu internetowego / motywu WordPress, nad którym obecnie pracuję.

Siatka 960

Bardzo trudno jest mi właściwie wszystko ustawić w siatce. Udało mi się uzyskać wszystko w pionowej siatce o domyślnym rozmiarze tekstu (16 pikseli), ale kiedy zaczynam bałaganować rozmiarem nagłówków, dodawać obrazy itp., Elementy nie zawsze są odpowiednio wyrównane na siatce.

Chciałbym wiedzieć, jak poprawić moją typografię za pomocą rytmu pionowego. Czy ktoś ma jakieś wskazówki lub techniki, których powinienem użyć?

— Santaji
źródło

Odpowiedzi:

Podstawowa siatka w projektowaniu stron internetowych jest potrzebną łamigłówką akademicką, ale przede wszystkim niepraktyczną z punktu widzenia matematyki. Ponieważ CSS nie ma pojęcia linii bazowej dla typu, technicznie niemożliwe jest dopasowanie linii bazowych.

Możesz zbliżyć się do odstępów, ale w końcu możesz skończyć z czymś, co może mieć sens, gdy spojrzysz na liczby, ale prawdopodobnie nie jest to wizualne i ostatecznie zbłądzisz ze wzoru, aby upewnić się, że wszystko wygląda dobrze.

Podsumowując, rytm wizualny jest ważny, ale buduj go z jelit, a nie z równań, które doprowadzą cię do szaleństwa w prawidłowym wdrażaniu w sieci.

Nawiasem mówiąc, należy pamiętać, że koncepcja siatki linii bazowej pochodzi ze świata projektowania druku ... w szczególności układów wielokolumnowych, na przykład w gazecie, w której chcesz, aby typ był wyrównany między kolumnami jako preferowany. Aby ułatwić składanie tego rodzaju publikacji, siatka bazowa ma sens i jest stosunkowo łatwa do wdrożenia w świecie aplikacji DTP.

— DA01
źródło

Dokładnie - mieszasz jabłka i orangutany. To tak, jakby próbować zdobyć okładkę książki w miękkiej okładce, aby odtworzyć wideo Flash. O ile nie zrobisz wszystkiego jako obrazu, a cała twoja strona internetowa to JPG z mapami obrazów, to po prostu się nie stanie.

— Lauren-Clear-Monica-Ipsum

Dostosowanie css i html do siatki 960 nie jest trudne. W końcu kodowanie to po prostu matematyka. Poza tym używają go w zasadzie wszyscy projektanci (np.) Themeforest.net. To nie jest tak trudne, jak mówisz. I tak ... koncepcja siatki pochodzi ze świata druku. Jednak system siatki 960 jest konwertowany do Internetu, aby pasował do minimalnej rozdzielczości 1024 x 768.

— Luuk

Siatka 960 służy przede wszystkim do tworzenia poziomych siatek i jest to coś, co bardzo polecam w witrynach o nawet umiarkowanych rozmiarach. To bardzo przydatne narzędzie. Mówimy jednak o linii bazowej typu pionowego. Tak, kodowanie to matematyka. Niestety, przeglądarki i specyfikacja CSS nie zapewniały szczególnego ułatwienia w ustalaniu linii bazowych form literowych. Możesz to zrobić za pomocą matematyki, ale jesteś na łasce poszczególnych przeglądarek, systemów operacyjnych, zainstalowanych czcionek i preferencji użytkownika, więc wcale nie jest to „prosta matematyka”, aby działał aspekt siatki bazowej.

— DA01

Ponadto projektowanie nie zawsze jest czystą matematyką. W rzeczywistości rzadko jest to czysta matematyka. Matematyka prowadzi nas do punktu, ale poza tym estetyczny osąd oka musi się odbyć. Zbudowałem strony przy użyciu bazowego systemu siatki zarówno dla siebie, jak i innych projektantów, a częściej musimy skrobać siatkę linii bazowej na końcu, aby „poczuła się” dobrze. Zdecydowałem, że z tego powodu zwykle zmarnowanie wysiłku, aby uruchomić siatkę linii bazowej, jest zwykle arbitralne.

— DA01

Hmm, mój brak czytania;) Nie zauważyłem, że chodzi tylko o rytm pionowy. Muszę się zgodzić, że ja też tak naprawdę nie używam 960gs do pionowego rytmu. Tylko dla poziomego. Jedyną rzeczą, której używam w pionie, jest „zagięcie”. Resztę wyrównuję (jeszcze raz pionowo) „okiem”.

— Luuk

Rytm pionowy nie jest trudny do wdrożenia, szczególnie jeśli zaczynasz od resetu CSS . Natknąłem się na ten link http://24ways.org/2006/compose-to-a-vertical-rhythm jakiś czas temu i od tego czasu stosuję tę technikę we wszystkich moich projektach.

Odkryłem, że po pracy z zestawem deklaracji typu w moim pliku CSS (h1 - h6, p itd. - w szczególności rozmiar, wysokość linii, dolne marginesy) jest bardzo łatwy do wdrożenia.

Oto obraz tła, który pomógł mi zobaczyć wszystko trochę jaśniej ... zwłaszcza, gdy pierwszy raz użyłem rytmu vert.

wprowadź opis zdjęcia tutaj

To może być trudne do zobaczenia, ale kiedy powtórzy się jako obraz tła: zobaczysz siatkę 20x20.

HTH

Uwaga: Podoba mi się typografia w witrynach, które korzystały z tej techniki lepiej niż te, które jej nie stosowały. Jednak w obu przypadkach zawsze wydaje się, że istnieje element lub dwa, które muszą „oszukać system”, aby wyglądać „dobrze”. Odkryłem również, że zwracanie uwagi na ogólną wysokość linii (powiedzmy 18px dla podstawy czcionki 12px) sprawia, że ustawianie marginesów i wypełnianie obrazów, nagłówków graficznych i tym podobnych jest całkiem proste (18px). Ponadto ... potrzeba obliczenia wszystkiego zniknie ... zaczniesz zauważać „pionowy rytm” dotyczący układu i będziesz w stanie wyciągnąć odpowiednie dopełnienie / margines / wysokość linii z bardzo krótkiej listy wartości w Twojej głowie.

— Dawson
źródło

Ten bardzo fajny artykuł na temat Smashing Magazine na temat podstawowego i pionowego rytmu daje ci wgląd zarówno w znaczenie linii bazowych w projektowaniu stron internetowych, jak i jak je zaimplementować w twoim css. Używa rozmiaru czcionki, wysokości linii, dopełnienia i marginesu na domyślnych elementach HTML, aby wszystkie linie były wyrównane z siatką linii bazowej.

Aby pomóc dopasować wszystko do siatki, obraz tła jest bardzo przydatny, jak sugeruje Dawson.

Postępowałem zgodnie z tą techniką w moich ostatnich projektach i myślę, że to się naprawdę opłaca.

— Vincent
źródło