Pogrubiony, pochylony lub podkreślony tekst na stronie internetowej

Pogrubiony, pochylony lub podkreślony tekst na stronie internetowej

przezAurelia Sypniewska
Czas czytania: 3 minut

Jedną z najczęściej spotykanych metod wyróżnienia tekstu na stronie internetowej jest jego pogrubienie. Prawdopodobnie dlatego, że pogrubiony font (czcionka elektroniczna) na stronie dużo bardziej rzuca się w oczy – o oczywiście o ile nie przesadzimy.

Zdecydowanie gorzej na tym polu radzi sobie podkreślony lub ukośny tekst. Co ciekawe te dwa ostatnie typy kojarzone są raczej z linkiem lub cytatem. Pytanie jednak brzmi jak uzyskać takie efekty w treści strony internetowej lub blogu.

Dodanie pogrubienia na tekście

Pogrubienie tekstu w HTML

Do pogrubienia, boldowania tekstu w języku HTML służy znacznik <b> lub zamiennie <strong>.  Nie oznacza to jednak, że oba te znaczniki muszą działać identycznie, ich funkcje można zmodyfikować za pomocą CSS. Domyślnie jednak jest to forma pogrubienia stosowana zamiennie. Dlatego w zależności od systemu CMS (i wykorzystywanego edytora) możemy spotkać się z jednym lub drugim.

See the Pen
Bold text in HTML and CSS by Aura (@Julka85)
on CodePen.0

Pogrubienie tekstu w CSS

Z pomocą CSS pogrubienie można uzyskać dzięki właściwości font-weight. Właściwość ta odpowiadającej za grubość czcionki co oznacza, że z jej pomocą możemy uzyskać nie tylko pogrubienie, ale także zrobić font cieńszym. Za zwyczaj właściwości tej nie używa się samodzielnie (nadaje się ją na blok lub znacznik np. <b>, <span>).

To właśnie z jej pomocą można manipulować grubością nadawaną z pomocą HTML.  Na przykład poprzez dodanie:

font-weight: bold;

font-weight przyjmuje kilka wartości takich jak 100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold, border. Oczywiście w praktyce nie będziemy na stronie wykorzystywać wszystkich tych wartości. Zazwyczaj używa się tylko 400/300 lub 600/700.

Cienki font – im mniejsza wartość tym węższe litery:

  • 100,
  • 200,
  • 300,

Normalny font:

  • 400,
  • 500,
  • normal

Pogrubiony font – im większa wartość liczbowa tym grubsze litery:

  • 600,
  • 700,
  • 800,
  • 900,
  • bold

Z pomocą tej właściwości bardzo łatwo możemy zmodyfikować działanie dowolnego znacznika HTML. np:

See the Pen font-weight by Aura (@Julka85) on CodePen.dark

UWAGA: nie każdy font posiada takie szerokości jak powyżej. Szerokość należy dobierać indywidualne.

Pochylony tekst

Nazywany także: kursywą, skośnym, ukośnym, pochylonym lub pochyłym. Istnieje z pewnością wiele określeń na ten sam efekt. Przeznaczenie tego efektu tekstu jest różnorodne. Począwszy od podkreślenia, że dany fragment np. jest cytatem, po chęć wyróżnienia nagłówka bez korzystania ze specjalnych znaczników.

Pochylenie tekstu (kursywa) w HTML

Efekt kursywy czyli jak już wspomniałam ukośnego tekstu z pomocą HTML możemy uzyskać dzięki znacznikom <i> lub <em> (ang. emphasis). Chociaż pierwotne zastosowanie obu znaczników było inne ich działanie, a właściwie efekt końcowy jest bardzo do siebie podobne.

See the Pen
HTML <i>, <em> by Aura (@Julka85)
on CodePen.0

Pochyły, ukośny tekst w CSS

W CSS pochylony tekst możemy uzyskać dzięki właściwości font-style ustawionej na jedną z dwóch wartości:

  • font-style: italic;
  • font-style: oblique;

Właściwość ta jest wykorzystywana raczej jako dekoracja niż fragmentu tekstu. Praktycznie nigdy się nie spotkałam by została użyta do pochylenia jednego słowa. Jest to bowiem mało praktyczne. Dlatego w przypadku pochylonego tekstu wykorzystuje się głównie HTML.

Dodanie podkreślenia oraz jego typy

Jak zobaczycie poniżej podkreślenie fontu (czcionki) nie jest w cale trudne.

Podkreślenie tekstu w HTML

Podkreślony wykorzystuje się głównie do przy pracy z hiperłączami. Bardzo często jest to ich charakterystyczna cecha – co czasem może prowadzić do małego zmieszania. W celu nadania jej innemu tekstowi wystarczy użyć znacznika <u>.

przykład <u>:

Lorem ipsum dolor sit amet, consectetur  adipiscing elit.

Lorem ipsum <u>dolor sit amet, consectetur</u> adipiscing elit.

Podkreślenie z pomocą CSS

CSS z kolei oferuje nam szeroki pakiet zróżnicowanych podkreśleń. I nie mam tu na myśli skomplikowanych efektów na linkach (gdyż bardzo często to efekt odpowiednio ustawionego tła). Tylko o bardzo proste rozwiązanie z:  text-decoration

Przykłady:

See the Pen
text-decoration by Aura (@Julka85)
on CodePen.0

Jak widzicie z pomocą CSS można uzyskać bardzo ciekawe efekty – podkreślenie nie musi być ciągłą linią a np. falowaną.

Możemy również nadawać linii różne kolory. Ja w przykładzie dodałam kolor red (czerwony) i blue (niebieski).