..opublikowałem czwartek, 27 lipca 2017 20:56

Estetyczne podkreślenie czcionki Roboto Light

Post na temat:
Nastrój:

Pamiętam jak kiedyś - podczas Mojej przygody z GNU/Linux - lubowałem się w czcionce Droid Sans Fallback 10, która bardzo przypadła Mi do gustu w środowisku KDE dla OpenSUSE. Dziś od dłuższego już czasu natomiast gustuję w popularnym i szeroko wykorzystywanym foncie Roboto - a konkretniej jego wersji Light, która szczególnie Mi się podoba z uwagi na swą przejrzystość i czytelność.

Stąd też naturalnie użyłem tej czcionki w tekstach postów na Mojej stronie domowej. Miałem tylko jedno "ale": ku Mojemu zaskoczeniu podkreślony wariant Roboto Light nie prezentował się dobrze: podkreślenie zdawało się nachodzić na litery, będąc ponadto od nich zauważalnie grubszym (!). W efekcie wszystkie podkreślone słowa czy frazy w tej czcionce prezentowały się nieestetycznie.

Jako rozwiązanie, użyłem innego ostylowania dla HTMLowego tagu <u> w treści postów:

.SinglePost p u
{
text-decoration: none;
border-bottom: 1px dotted white;
}

gdzie:

  1. text-decoration: none - usuwa standardowe podkreślenie z podkreślonego tekstu.
  2. border-bottom: 1px dotted white - definiuje nowe podkreślenie w formie dolnego obramowania (użyłem "dotted" jako że bardzo gustuję w subtelniejszym, kropkowanym podkreśleniu - dla konwencjonalnego byłoby oczywiście "solid").


Efekt dla porównania na obrazku poniżej:


BTW, uwielbiam CSS m.in. właśnie za to, że umożliwia modyfikowanie takich detali/niuansów, jak elementarne podkreślenia, pogrubienia, itp.

Brak komentarzy:

Prześlij komentarz