Lepsza typografia dla nowoczesnych stron internetowych

Tekst cyfrowy można sformatować w tak wielu smakach. Wraz z dalszym rozwojem czcionek internetowych i skryptów przeglądarki, widzieliśmy nowy kod projektu dla programistów do wykorzystania. Również projektanci stron internetowych szukają najlepszej strategii do kodowania swoich stron internetowych i budowania jednolitego stylu typograficznego między wszystkimi swoimi stronami.

Wielu profesjonalnych projektantów stron internetowych napisało na ten temat, w tym zaktualizowane funkcje i usługi. Każdą stronę internetową należy traktować jako pojedynczy dokument zrywający projekt układu głównego. W tym widoku łatwo jest zobaczyć, w jaki sposób typografia może płynąć od strony do strony i oferować wyjątkowy rynek kreatywności. Staje się to szczególnie widoczne w budowaniu unikalnych klas dla akapitów i nagłówków.

Poniżej przedstawię fantastyczne pomysły dla początkujących projektantów typografii zainteresowanych budową dla sieci. Blogi, sieci społecznościowe i firmy zawsze chcą zaktualizować swoją aktualną witrynę. A style CSS do typografii internetowej stanowią doskonałe źródło do rozpoczęcia odświeżania stron.

Różnice w dzisiejszym Internecie

Nowoczesna sieć znacznie się rozwinęła od początku 2000 roku. Jest mnóstwo nowych funkcji dla projektantów stron internetowych, aby tworzyć fantastyczne dzieła graficzne, loga, banery i praktycznie wszystko. Wydanie specyfikacji HTML5 i CSS3 odcisnęło swoje piętno na starym sposobie budowania czcionek internetowych.

Obecnie możliwe jest dołączenie własnych czcionek do CSS @ font-face własność. Możesz użyć dowolnego Prawdziwy typ(.ttf) lub Typ otwarty(.otf) plik i przechowuj kopię lokalnie na serwerze. Następnie za pomocą magii CSS3 umieść rodzinę w dowolnym miejscu na swojej stronie internetowej!

Tylko w tej technice można zobaczyć, jak rozwinął się nasz nowoczesny Internet.

Wraz ze wzrostem popularności jQuery każdego dnia nie jest niespodzianką, że możemy budować niesamowite efekty animacji w połączeniu z niestandardowymi czcionkami. Jako alternatywę dla metody powyżej wtyczka TTFGen dla jQuery pozwala dołączyć dowolną czcionkę TrueType do swojej strony internetowej.

Ta metoda jest nieco bardziej niezawodna, ponieważ nie potrzebujesz nowoczesnej przeglądarki obsługującej standardy CSS3, aby działała. Ale oczywiście starsze przeglądarki, takie jak Internet Explorer 6, będą miały trudności z prawidłowym renderowaniem.

Ale dzięki Bogu większość użytkowników przełączyła się na nowsze oprogramowanie do przeglądania, które obsługuje te standardy! A kiedy tworzysz dla sieci, powinieneś dokładnie rozważyć, dla kogo jest przeznaczony Twój rynek. Nie możesz zadowolić wszystkich przez cały czas, ale na pewno możesz podejść wystarczająco blisko.

Cel typografii cyfrowej

Coś dziwnego do rozważenia, ale jaki jest prawdziwy cel cyfrowego tekstu? Aby przekazywać informacje, udostępniać źródła i przedstawiać swoją opinię światu użytkowników Internetu. Tekst jest najprostszą formą mediów do dzielenia się przemyśleniami i pomysłami. Ale jest też bardzo złożony i zawiera ważne informacje, których zdjęcia / filmy po prostu nie mogą wykorzystać.

Twoi odwiedzający prawdopodobnie znajdą Twoją witrynę na podstawie słów kluczowych w tekście lub nagłówkach - to kolejny powód, aby zwracać szczególną uwagę na swoją kopię internetową. A kiedy już zwrócisz uwagę na swoją stronę, musisz się skupić. Najłatwiej to zrobić za pomocą pogrubionych nagłówków i wyrównanego tekstu strony.

Jeśli piszesz artykuł lub samouczek, musisz użyć jasnego języka. Jego równie ważne, jak wygląda tekst strony i jakość treści. Im większy jest tekst, tym łatwiej będzie czytać i skanować słowa kluczowe. A ponieważ akapity będą zawierały większość twoich treści, powinieneś poświęcić dużo czasu na prototypowanie, aby uzyskać odpowiednie dopasowanie. Akapity służą do przekazywania wiadomości w kawałkach wielkości bitów w podziale na zdania. Zrozum, jak piszesz i planuj z wyprzedzeniem, aby uzyskać odpowiedni układ strony.

Dodatkowo z tekstem strony pochodzą media i zawartość dodatkowa. Jeśli Twoje akapity zawierają podstawowe informacje, być może masz wykresy lub zdjęcia, które urozmaicą stronę. Te akcenty to tylko właściwy dotyk, który pozwala użytkownikom poruszać się po witrynie.

Filmy wideo i obrazy są w stanie rozdzielić Twoje treści i sprawić, że wydaje się, że czytelnicy poruszają się szybciej w twoim artykule. Ale używaj tych elementów oszczędnie i nie pozwól, aby cokolwiek przytłoczyło twoje podstawowe przesłanie. Użytkownicy (najczęściej) odwiedzają Twoją witrynę w celu uzyskania informacji i nie chcą zbyt wielu rozrywek.

Wszystkie inne opcje formatowania służą do określenia funkcjonalności lub celu. Na przykład tekst hiperłącza często różni się od pozostałych, aby wyróżnić się jako “możliwe do kliknięcia”. Możesz pracować ze słowami pogrubionymi lub pisanymi kursywą, dodając podkreślenie do zdań. A użycie cytatów blokowych lub wstępnie sformatowanego tekstu może pomóc w nakreśleniu podstawowych instrukcji lub kodu internetowego.

Nagłówki stron internetowych

Jednym z najważniejszych atutów Twojej typografii internetowej są znaczniki nagłówków. Jeśli nie znasz nagłówków HTML z zakresu od

do

pierwszy z nich ma największe znaczenie, a drugi najmniej. Ten znacznik jest przydatny do zrozumienia, ponieważ Google klasyfikuje Twoją domenę i strony internetowe na podstawie struktury treści. W ten sposób ostatecznie masz kontrolę nad tym, których słów kluczowych używasz i jakiej warstwy nagłówków wymagałbyś.

Mimo że standardowa specyfikacja HTML5 zawiera do 6 różnych stylów nagłówków, polecam korzystanie z 3-4. Nie ma potrzeby umieszczania ich wszystkich na swoich stronach. I jest bardzo mało prawdopodobne, że znajdziesz zastosowanie dla 6 różnych nagłówków. Przy pierwszym siadaniu do budowania stylów spróbuj przygotować kilka przykładów nagłówków, aby zobaczyć, co lubisz.

Photoshop jest doskonały do ​​tego scenariusza. Możesz również spróbować zakodować różne nagłówki w HTML, aby zobaczyć, jak wyglądają w przeglądarce. Ważne jest, aby pracować z przepływem stron i nagłówkami projektu według ich rangi.

Na przykład twoje

Tagi powinny wyróżniać się spośród wszystkich nagłówków Twojej strony.

i

to najpopularniejsze tagi i polecane przez Google do indeksowania zawartości strony. Korzystanie z efektów projektowych, takich jak pogrubiona czcionka, podkreślenia, kreskowane obramowania lub różne kolory, pomoże skoczyć ze strony.

Ważna jest również odległość jeśli chodzi o nagłówki lub dowolną część treści w tym zakresie. Upewnij się, że dodajesz dodatkowe marginesy między nagłówkami a głównym obszarem zawartości. Jeśli czcionka jest wystarczająco duża, każdy nagłówek powinien wyróżniać się jako własny blok podstawowy. Ten wygląd jest idealny, jeśli chcesz przyciągnąć uwagę czytelników jasnym przekazem.

Budowanie unikalnych hiperłączy

Na temat linków do stron jest wiele do powiedzenia. Tak czy inaczej będziesz musiał użyć hiperłączy w swoim kodzie. Są niezwykle ważne jako główny interfejs nawigacyjny między różnymi stronami w witrynie. Możesz również połączyć się z innymi blogami, a nawet zarchiwizowanymi wpisami na blogu w celach informacyjnych w późniejszym terminie.

Powinieneś bardzo ostrożnie wybrać tekst trzymany dla swojego linku. To jest konkretna treść, która będzie akcentowana stylem łącza. Na przykład „kliknij tutaj” jest bardzo popularny i najczęściej używany do bezpośredniego pobierania. Staraj się unikać tego systematycznego podejścia i zamiast tego uzyskaj trochę kreatywności z tekstem hiperłącza. Odwiedzający są bardziej skłonni kliknąć link, jeśli mogą również rozpoznać kontekst i być może dowiedzieć się, co będzie zawierać nowa strona.

Podczas stylowania linków należy wziąć pod uwagę następujące kwestie - jak wyglądałyby zmiany w konfiguracji strony, jakiego rodzaju koloru tła pracujesz, i jaki kolor ma tekst dla kontrastu?

Linki powinny pojawiać się rażąco poza stroną jako elementy klikalne - w końcu to jest ich funkcja. Dlatego stary niebieski z podkreśleniem efektu tekstu działa tak dobrze. Ale jeśli zauważysz, że alternatywny kolor działa lepiej, powinieneś go wypróbować. Nie ma jednego uniwersalnego rozwiązania dla projektów łączy. Wystarczy przejrzeć nieco sieć, a na pewno zestawisz coś wyjątkowego.

Jeden interesujący punkt to kilka funkcji, które powinieneś wypróbować unikanie. Rzeczy takie jak zmiana rodziny czcionek tekstu lub rozmiaru czcionki mogą być bardzo irytujące. Spowoduje to zniekształcenie i przesunięcie tekstu, co może spowodować, że kursor myszy znajdzie się poza strefą łącza. W podobny sposób powinieneś unikać dodawania dodatkowych marginesów / wypełnień do linków lub efektów najechania. Działają znacznie lepiej, gdy jesteś prosty. Zmiana koloru lub dodane podkreślenie znacznie wpływa na komfort użytkowania.

Konstrukcja stylizowanych list

Szanse są dobre, będziesz musiał także pracować z listami w pewnym momencie. Zawarte są zarówno uporządkowane, jak i nieuporządkowane listy w HTML. Są one idealne do oferowania niewielkiej kolekcji pomysłów, produktów, osób lub linków online w bardzo małej ilości miejsca. Stylizacja również nie różni się od akapitów lub nagłówków.

Użytkownicy powinni natychmiast zrozumieć, że patrzą na listę przedmiotów. Przechowuj każdy element listy osobno i umieść go w nowym wierszu na swojej stronie. Jeśli to możliwe, dodaj trochę dodatkowej przestrzeni między nimi. Daje to trochę oddechu i wydaje się być miłym rozpadem dla tekstu artykułu. Jeśli chcesz, możesz nawet pogrubić listy czcionek lub wcięć, aby odstąpić od standardowych marginesów układu.

Dodanie dodatkowych funkcji, które pomogą wyróżnić Twoją listę, nie jest wymagane. Ale jeśli lubisz styl blokowy, to naprawdę skupia się na twoich listach. Możesz spróbować dodać jasne tło lub ikony. Lista Apart ma świetny zapis na listach oswajania, które moim zdaniem zawierają bardzo potężne ciekawostki wiedzy. Ale jeśli zachowujesz liniowość treści stron i używasz bloków list tylko wtedy, gdy jest to potrzebne, nie powinieneś mieć żadnych problemów z projektem.

Jak tworzyć cytaty na stronie

Pojawienie się cytatów i cytatów jest obecnie bardzo ograniczone. We wczesnej sieci nie widziałeś zbyt wiele z tych elementów w użyciu. Być może w redakcjach, esejach lub artykułach edukacyjnych. Ale HTML5 z pewnością nieco zaktualizował reguły, co znacznie ułatwia cytowanie bloków.

Strona internetowa HTML5 Doctor zawiera fascynujące źródło informacji na ten temat. Omawiają użycie treści wewnątrz cytatów blokowych jako pojawiających się wewnątrz struktury dokumentu. Możesz więc dodawać nagłówki, akapity, a nawet listy i stopki. Główne zastosowanie a