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ę.

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ć?

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.

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.

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.

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.