Hierarchia jest przekazywana za pomocą różnic w grubości czcionki, rozmiarze, wysokości wiersza i odstępach między literami. Zaktualizowana skala typograficzna porządkuje style w 6 rolach, których nazwy opisują ich przeznaczenie: wyświetlanie, tytuł, etykieta, tekst, liczba i łuk. Nowe role są niezależne od rozmiaru ekranu, co ułatwia ich stosowanie w różnych przypadkach użycia.
Style wyświetlania
Wyświetlacz służy do wyświetlania długich, krótkich ciągów tekstu, które zawierają najważniejsze informacje, istotne dane, poziom ufności lub wyraziste momenty związane z marką.
- DisplayLarge to największy nagłówek. Wyświetlane informacje to największe teksty na ekranie, zarezerwowane dla krótkich, łatwo zauważalnych najważniejszych informacji, istotnych danych, poziomu ufności lub wyrazistych momentów marki, które zyskują dzięki widocznemu rozmiarowi i stylizacji.
- DisplayMedium to drugi co do wielkości nagłówek. Wyświetlane informacje to największy tekst na ekranie, zarezerwowany dla krótkich, łatwych do odczytania najważniejszych informacji, istotnych danych, poziomu ufności lub wyrazistych momentów marki, które zyskują dzięki widocznemu rozmiarowi i stylizacji.
- DisplaySmall to najmniejszy nagłówek. Wyświetlane informacje to największe teksty na ekranie, zarezerwowane dla krótkich, łatwo zauważalnych najważniejszych informacji, istotnych danych, poziomu ufności lub wyrazistych momentów marki, które zyskują dzięki widocznemu rozmiarowi i stylizacji.
Tytuł
Tytuł to tekst hierarchiczny używany jako mechanizm nawigacji, np. tytuł strony, sekcji lub podsekcji (w przypadku TitleSmall).
- TitleLarge to największy tytuł. Tytuły są mniejsze niż wyświetlane informacje. Zazwyczaj są one zarezerwowane dla tekstu o średnim znaczeniu, który jest krótszy, i nie są zalecane w przypadku komponentów interaktywnych, a raczej nagłówków lub podtytułów stron.
- TitleMedium to tytuł średni. Tytuły są mniejsze niż wyświetlane informacje. Zazwyczaj są one zarezerwowane dla tekstu o średnim znaczeniu, który jest krótszy, i nie są zalecane w przypadku komponentów interaktywnych, a raczej nagłówków lub podtytułów stron.
- TitleSmall to najmniejszy tytuł. Tytuły są mniejsze niż wyświetlane informacje. Zazwyczaj są one zarezerwowane dla tekstu o średnim znaczeniu, który jest krótszy, i nie są zalecane w przypadku komponentów interaktywnych, a raczej nagłówków lub podtytułów stron.
Etykieta
Etykieta jest używana w przypadku tekstu na poziomie komponentu, który opisuje działanie, jakie nastąpi po interakcji. Najczęstszym i najbardziej rozpowszechnionym zastosowaniem etykiety jest tekst zagnieżdżony w przycisku.
- LabelLarge to największa etykieta. Etykiety służą do wyświetlania wyróżnionego tekstu, np. etykiety na przyciskach tytułu, i są stosowane w komponentach interaktywnych.
- LabelMedium to średnia etykieta, która jest najczęściej używana. Etykiety służą do wyświetlania tekstów, np. etykiety głównej na przyciskach, i są stosowane w komponentach interaktywnych.
- LabelSmall to mała etykieta. Etykiety służą do wyświetlania tekstów, takich jak etykieta dodatkowa na przyciskach, etykiety na przyciskach kompaktowych, stosowane do komponentów interaktywnych.
Tekst główny
Tekst główny jest przeznaczony do tekstu treści, np. akapitów tekstu głównego, tekstu używanego w złożonych wizualizacjach danych, sygnatur czasowych i metadanych.
- BodyLarge to największy rozmiar tekstu. Tekst główny to zwykle dłuższe fragmenty tekstu, w których dobrze sprawdzają się mniejsze czcionki. W dłuższych partiach tekstu zalecamy użycie czcionki szeryfowej lub bezszeryfowej.
- BodyMedium to drugi co do wielkości element tekstu głównego. Tekst główny to zwykle dłuższe fragmenty tekstu, w których dobrze sprawdzają się mniejsze czcionki. W dłuższych partiach tekstu zalecamy użycie czcionki szeryfowej lub bezszeryfowej.
- BodySmall to trzeci co do wielkości element tekstu głównego. Tekst główny to zwykle dłuższe fragmenty tekstu, w których dobrze sprawdzają się mniejsze czcionki. W dłuższych partiach tekstu zalecamy użycie czcionki szeryfowej lub bezszeryfowej.
- BodyExtraSmall to najmniejszy rozmiar tekstu głównego. Tekst główny to zwykle dłuższe fragmenty tekstu, w których dobrze sprawdzają się mniejsze czcionki. W dłuższych partiach tekstu zalecamy użycie czcionki szeryfowej lub bezszeryfowej.
Cyfry
Style tekstu liczbowego są używane w przypadku cyfr i zwykle ograniczają się do kilku znaków. Może przyjmować bardziej wyraziste właściwości przy większych rozmiarach wyświetlacza. Zapewnia elastyczność w zakresie rozszerzania osi szerokości przy minimalnych problemach z lokalizacją i skalowaniem czcionki.
- NumeralsExtraLarge to największa rola dla cyfr. Domyślnie cyfry mają stałą szerokość. Podkreślają i wyrażają liczby, które można szybko odczytać i które składają się tylko z 2 lub 3 znaków. Nie wymagają lokalizacji, np. na ekranie ładowania lub w selektorze czasu.
- NumeralsLarge to druga co do wielkości rola cyfr. Cyfry domyślnie używają odstępów tabelarycznych. Są to długie ciągi cyfr, które są ograniczone do dużych wyświetlaczy czasu, gdzie nie jest wymagana lokalizacja, np. odliczanie czasu lub selektor czasu.
- NumeralsMedium to trzecia co do wielkości rola cyfr. Cyfry domyślnie używają odstępów tabelarycznych. Są to średniej wielkości liczby ograniczone do krótkich ciągów cyfr, które nie wymagają lokalizacji, np. liczba kroków lub selektor czasu.
- NumeralsSmall to czwarta co do wielkości rola dla cyfr. Cyfry domyślnie używają odstępów tabelarycznych. Są one przeznaczone do liczb, które wymagają wyróżnienia w mniejszej skali, gdzie nie jest wymagana lokalizacja, np. w przypadku selektorów daty i godziny.
- NumeralsExtraSmall to najmniejsza rola dla cyfr. Domyślnie cyfry mają stałą szerokość. Są one przeznaczone do numerów, które muszą pomieścić dłuższe ciągi cyfr, w przypadku których nie jest wymagana lokalizacja, np. w przypadku danych pomiarowych podczas treningu.
Łuk
Tekst nagłówka łuku jest używany w przypadku zakrzywionego tekstu, który stanowi wskazówki w interfejsie, np. tekst czasu i zakrzywione etykiety. Dostosowana oś czcionki, która optymalizuje typografię wzdłuż krzywej i uwzględnia różne odstępy między znakami, gdy są one umieszczone u góry w porównaniu z dołem zakrzywionego ekranu.
Góra
- ArcLarge jest przeznaczony do nagłówków i tytułów w formie łuku. Łuk to tekst wzdłuż zakrzywionej ścieżki na ekranie, zarezerwowany dla krótkich ciągów tekstowych nagłówków u góry lub u dołu ekranu, takich jak nakładki potwierdzenia.
- ArcMedium jest przeznaczony do nagłówków i tytułów w układzie łuku. Łuk służy do wyświetlania tekstu wzdłuż zakrzywionej ścieżki na ekranie. Jest zarezerwowany dla krótkich ciągów tekstowych nagłówków u góry lub u dołu ekranu, takich jak tytuły stron.
- ArcSmall jest przeznaczony do krótkich ciągów tekstowych w kształcie łuku. Łuk jest przeznaczony dla tekstu wzdłuż zakrzywionej ścieżki na ekranie. Jest zarezerwowany dla krótkich zakrzywionych ciągów tekstowych u góry ekranu, takich jak tekst z godziną.
Dół
- ArcLarge jest przeznaczony do nagłówków i tytułów w formie łuku. Łuk to tekst wzdłuż zakrzywionej ścieżki na ekranie, zarezerwowany dla krótkich ciągów tekstowych nagłówków u góry lub u dołu ekranu, takich jak nakładki potwierdzenia.
- ArcMedium jest przeznaczony do nagłówków i tytułów w układzie łuku. Łuk służy do wyświetlania tekstu wzdłuż zakrzywionej ścieżki na ekranie. Jest zarezerwowany dla krótkich ciągów tekstowych nagłówków u góry lub u dołu ekranu, takich jak tytuły stron.
- ArcSmall jest przeznaczony do krótkich ciągów tekstowych w kształcie łuku. Łuk służy do wyświetlania tekstu wzdłuż zakrzywionej ścieżki na ekranie. Jest zarezerwowany dla krótkich zakrzywionych ciągów tekstowych u dołu ekranu, takich jak wezwanie do działania.
Skład
Pionowe składanie tekstu opiera się na dopełnieniu, ramkach ograniczających i liniach bazowych, aby zapewnić czytelność tekstu w dowolnym rozmiarze. Podejmując decyzje dotyczące składu tekstu, zmiany rozmiaru tekstu, gęstości i używania tekstu w układach adaptacyjnych, weź pod uwagę kwestie techniczne i konwencje obowiązujące na Twojej platformie.
Korzystanie z wartości podstawowej
Linia bazowa to niewidoczna linia, na której opiera się wiersz tekstu. W Material Design linia bazowa jest ważną specyfikacją przy pomiarze pionowej odległości między tekstem a elementem.
Sprawdzanie czytelności
Aby zwiększyć czytelność czcionek wyświetlanych w aplikacji, przeprowadź te testy czytelności.
Cyfry tabelaryczne i o stałej szerokości
W miejscach, w których wartości mogą się często zmieniać, animować lub szybko zmieniać, np. w odliczaniu, selektorach lub bieżących danych fitness, używaj cyfr tabelarycznych (nazywanych też cyframi o stałej szerokości) zamiast cyfr proporcjonalnych.
Używaj liczb tabelarycznych o stałej szerokości, aby zachować optyczne wyrównanie wartości i ułatwić skanowanie oraz wyrównywanie, a także uniknąć przeskakiwania liczb lub sąsiedniego tekstu.
Wysokość wiersza
Wysokość wiersza to odstęp między poszczególnymi wierszami tekstu, który jest bezpośrednio powiązany z rozmiarem czcionki. Na zegarku przestrzeń pionowa jest ograniczona, więc wysokość wiersza jest zoptymalizowana, aby zapewnić czytelność, a jednocześnie zmaksymalizować liczbę wierszy tekstu widocznych w widocznym obszarze.
Dodatkowa wysokość wiersza
W Jetpack Compose i na Androidzie typografia automatycznie zyskuje dodatkową wysokość wiersza w ostatnim wierszu, aby zapobiec nakładaniu się dłuższych znaków. Dlatego niektóre testy zrzutów ekranu nie są idealnie dopasowane.
Dodatkowe informacje o wysokości wiersza
| Styl domyślny (rozmiar tekstu / wysokość wiersza) | Domyślna wysokość wiersza w każdym wierszu | Dodatkowa wysokość wiersza tylko w przypadku ostatniego wiersza | Obliczenia |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127,5%) | 40 / 51 (11/127,5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123,3%) | 30 / 37 (7/123,3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112,5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126,6%) | 15 / 19 (4/126,6%) (18+1) |
| 14 / 16 | 2 (114%) | +2 (128,5%) | 14 / 18 (4/128,5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116,6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |