Transcript Typografia
Typografia Podstawy projektowania graficznego Projektowanie strony internetowej Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Podstawy • Co to jest typografia? • Pismo klinowe • Hieroglify • Znaki fenickie, cyrylica… • 1436 – Gutenberg – pierwsze ruchome czcionki • Współczesne czcionki Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Podstawy • Co to jest font? – Fizyczny środek stosowany do tworzenia kroju pisma (nie ważne, czy to jest maszyna do pisania, wzornik, bloki czy kod PostScript) – Foremka do ciastka • Co to jest krój pisma? – Zestaw znaków, liter, cyfr itp. Charakteryzujących się tym samym charakterystycznym wzorem. – Ciastko Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Podstawy Jednostki miary bezwzględne 3 cale 76,2 milimetra 216 punktów 18 pica Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Podstawy Jednostki miary relatywne Firet – em Związany ze stopniem pisma Tradycyjnie określa odstępy pomiędzy literami Firet jest równy wielkości pisma Wysokość x pisma Wysokość małej litery „x” Zależy od stopnia pisma Kluczowa przy projektowaniu layotu Mało ważna w przypadku layoutów stron internetowych Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Podstawy Pojęcia dodatkowe Krój szeryfowy vs. Krój bezszeryfowy Ramka Kerning Interlinia Linia podstawowa Linia średnia Rodzina kroju pisma Roman (antykwa) Kursywa (italik) Pogrubiona (boldface) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Czym jest typografia na www? Powiedzcie… 90% skuteczność rozpoznawania Helvetici przez małpki Czy web to tylko obrazki? www jako nośnik informacji I tak dalej… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Kontrast Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Rozmiar 10 pt 12 pt 14 pt 18 pt 22 pt 28 pt 32 pt 48 pt 60 pt Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Hierarchia <h1>Nagłówek stopnia 1</h1> <h2>Nagłówek stopnia 2</h2> <h3>Nagłówek stopnia 3</h3> <h4>Nagłówek stopnia 4</h4> <h5>Nagłówek stopnia 5</h5> <h6>Nagłówek stopnia 6</h6> Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Przestrzeń Niech tekst „oddycha” Koncentruje, przyciąga uwagę… Block break (padding lub margin) Tracking (letter-spacing) Leading (line-height) Indentation (padding lub margin) Łukasz Bis źródło: http://www.webdesignerdepot.com Paragraph break (padding lub margin) Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Odpowiedni krój pisma Internet woli bezszeryfowe kroje pisma (Arial, Verdana, Helvetica…) Serif (Times New Roman) (Verdana) Sans Serif Nagłówki można wyróżniać szeryfowymi krojami… odwrotnie niż w przypadku tradycyjnej typografii… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Kolor Półtony vs. Pełny kolor Aktywny Nieaktywny Uwaga!!! Ta prezentacja jeszcze będzie trwać 30 minut. Link Zabawa kolorem Łukasz Bis SPRAWDŹNAWWW Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Stopień pisma UPPERCASE versus lowercase TYTUŁ Używanie wersalików jest dobrym pomysłem w przypadku tytułów, nagłówków, etc. Taki tekst jest wtedy dobrze wyróżniony i czytelny. AKAPITY, KTÓRE W CAŁOŚCI SĄ PISANE WERSALIKAMI WYMAGAJĄ DUŻO UWAGI OD CZYTAJĄCEGO. PRZECZYTAJ TEN TEKST I POMYŚL ILE CZASU CI TO ZAJĘŁO. Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Wyróżnienia Bold Istotniejszy tekst można pogrubić. Italik Underline Nie wolno podkreślać tekstu, który nie jest linkiem!!! Zamiast tego, tekst można pochylić. W każdym bądź razie, nie można pogrubiać wszystkiego . Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Co ma znaczenie? Techniczne aspekty Pamiętajmy, że nie każdy ogląda nasza stronę internetowa na wyświetlaczu (monitorze) najwyższej jakości. Uwaga!!! antyaliasing Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Popularne czcionki Bezszeryfowe Arial Arial Black Comic Sans MS Trebuchet MS Szeryfowe Times New Roman Georgia Courier New Verdana Tahoma Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Jak dobrać czcionkę? http://www.typetester.org/ Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Gdzie, co i jak? Optymalizacja funkcjonalności serwisów internetowych, J. Nielsen, H. Loranger, Helion 2007 Typografia, G. Ambrose, P. Harris, PWN 2006 http://ilovetypography.com/ (z 18.03.2010) http://www.webdesignerwall.com/ (z 18.03.2010) http://www.tomontheweb2.ca/ (z 18.03.2010) http://www.markboulton.co.uk/ (z 18.03.2010) http://www.typetester.org/ (z 18.03.2010) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów Typografia Koniec Dzięki za uwagę Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów