Jak dostosować właściwości tekstu w Adobe XD

Gdy masz tekst w projekcie Adobe XD, możesz zacząć zmieniać właściwości tekstu. Te właściwości obejmują rodzinę czcionek, rozmiar czcionki, grubość czcionki, wyrównanie, odstępy między znakami (kerning i śledzenie), odstępy między wierszami (interlinię), wypełnienie, obramowanie (pociągnięcie), cień (cień) i rozmycie tła. Przyjrzyjmy się więc, jak te właściwości są stosowane.

O czytelności i wyborze czcionek

Wybór czcionki ma kluczowe znaczenie. Możesz mieć wiele czcionek do wyboru w swoim systemie, ale tylko kilka wybranych uzna je za dobry wybór do czytania na ekranie. Niektóre cechy, których należy szukać przy wyborze czcionki, obejmują:

• Szeryfowe czy nieszeryfowe? Poniżej widać rodzinę czcionek w stylu szeryfowym na górze i jedną w stylu bezszeryfowym na dole. Szeryfy mają niewielki występ, który kończy pociągnięcie litery. Z drugiej strony bezszeryfowy nie ma tej drobnej projekcji. Czcionki bezszeryfowe wyglądają bardziej nowocześnie i są popularnym wyborem w przypadku interaktywnych aplikacji i stron internetowych. W przeszłości wierzono, że rodziny czcionek z szeryfami są łatwiejsze do odczytania, gdy jest duża ilość tekstu. Testy przeprowadzone za pomocą urządzeń śledzących ruch gałek ocznych dowiodły, że nie ma większej różnicy w czytelności między szeryfową a bezszeryfową, więc możesz wybrać dowolny styl, o ile zwrócisz uwagę na niektóre z pozostałych cech czcionki.

  Na górze krój szeryfowy, na dole bezszeryfowy.

• Proste, równe szerokości linii: ponieważ twój tekst będzie tworzony z pikseli, najlepiej nie zmieniać szerokości tekstu. Na podglądzie w pikselach widać różnicę między czcionką o różnej szerokości (u góry) a czcionką o stałej szerokości.

  Górna czcionka ma różne grubości i cienkie linie, które tworzą czcionkę; dolna czcionka jest spójna i łatwiejsza do odczytania na ekranie.

• Silne liczniki: Liczniki to dziury, które widzisz w literach takich jak „O”, „B” i „R”. Zwróć uwagę na to, jak duże są te liczniki, ponieważ mogą one również powodować problemy z czytelnością, jeśli zamykają się, gdy są wyświetlane jako piksele na ekranie. Pojawia się widok pikselowy dwóch różnych rodzin czcionek; zobacz, jak liczniki wyglądają w każdym w porównaniu do siebie.

  Poszukaj silnych otwartych liczników w wyborze rodziny czcionek.

• Zjazdy i wysokość nasadki: Krótkie zjazdy i niskie wysokości nasadek są ważne dla czytelności na ekranie. U góry widać rodzinę czcionek z krótkimi dolnymi krawędziami i niskimi wersalikami; u dołu czcionka z długimi dolnikami i wysokimi kapslami.

  Rodzina czcionek z krótkimi dolnymi końcami i niskimi nasadkami jest zazwyczaj łatwiejsza do odczytania na ekranie.

Wybór rodziny czcionek

Teraz, gdy wiesz, co sprawia, że ​​wybór czcionki jest lepszy pod względem czytelności, użyj panelu Właściwości, aby wybrać jedną z nich. Podczas dokonywania wyboru należy zwrócić uwagę na następujące kwestie:

• Rodzina czcionek: po wprowadzeniu na ekranie jakiegoś typu, możesz go zaznaczyć i wybrać menu rozwijane Rodzina czcionek w sekcji Tekst panelu Właściwości. Jeśli znasz czcionkę, którą chcesz, po prostu zacznij wpisywać nazwę czcionki w polu tekstowym Rodzina czcionek, a jeśli jest w twoim systemie, zostanie znaleziona na twojej liście.

  Nie zapominaj, że masz dostępne czcionki za pośrednictwem Adobe TypeKit.

• Grubość czcionki: po wybraniu rodziny czcionek możesz wybrać grubość z menu rozwijanego Grubość czcionki. W zależności od czcionek, które masz w swoim systemie, będziesz mieć różne opcje grubości czcionki.

  Wybierz rodzinę czcionek i grubość czcionki.

• Rozmiar czcionki: Możesz po prostu wpisać rozmiar czcionki w polu tekstowym Rozmiar czcionki, ale jeśli nie masz pewności, jaki rozmiar działa najlepiej, możesz umieścić kursor pod polem tekstowym Rozmiar czcionki, a następnie kliknąć i przeciągnąć. Poszukaj strzałki z dwoma grotami przed przeciągnięciem. Przeciąganie w górę zmniejsza rozmiar; dół zwiększa rozmiar.

  Kliknij i przeciągnij, aby wizualnie zmienić rozmiar czcionki.

• Wyrównanie: Możesz zmienić zaznaczony tekst na Wyrównaj do lewej, do środka lub do prawej za pomocą przycisków Wyrównanie w sekcji Tekst panelu Właściwości.
• Odstępy między znakami : Odstępy między znakami odnoszą się do odstępów między znakami. Nazywa się to śledzeniem . Tutaj widzisz wynik zwiększenia odstępów między znakami.

  Znaki w normalnych odstępach, ustawione na 0 (zero), a następnie ustawione na 150.

Zauważ, że możesz użyć tej samej techniki „kliknij i przeciągnij”, która jest dostępna w polu tekstowym Rozmiar czcionki, aby wizualnie zmienić odstępy między znakami.

Możesz także wizualnie zmienić wielkość odstępów między znakami, klikając i przeciągając.

• Wysokość wiersza: wysokość wiersza jest wiodącym , czyli odstępem między wierszami tekstu. Może to odgrywać ważną rolę w projektowaniu informacji, więc upewnij się, że używasz tego konsekwentnie w całym projekcie. Możesz także umieścić kursor poniżej pola tekstowego Wysokość linii i kliknąć i przeciągnąć w górę lub w dół, aby zmniejszyć lub zwiększyć wysokość linii.
• Kolor: Zmień kolor wypełnienia, klikając pole obok opcji Kolor wypełnienia w panelu Właściwości. Wykonujesz to zadanie w taki sam sposób, jak w przypadku każdego kształtu. Zaznacz pole Wypełnienie i wybierz kolor z Próbnika kolorów. Możesz również wybrać przezroczystość tekstu ze slajdu Przezroczystość dostępnego po prawej stronie Próbnika kolorów.
• Obramowanie: zastosowanie obramowania powoduje obrysowanie tekstu. Nie jest to zalecane, ponieważ może powodować problemy z czytelnością. Używaj go oszczędnie i być może tylko dla efektów specjalnych. Poniższy obrazek przedstawia przykład większego kroju pisma z cienką kreską i białym wypełnieniem na ciemniejszym tle. W takiej sytuacji ramka może działać, ale nie z mniejszym tekstem.

  Mała ramka z białym wypełnieniem na ciemnym tle.