* [de]  BITTE BEACHTEN SIE:
Sie verwenden einen veralteten Browser. Es ist unsicher und nicht mehr für moderne Webstandards geeignet.
Bitte aktualisieren (oder ändern) Sie Ihren Browser, um unsere Website so anzuzeigen, wie sie angezeigt werden soll.
Wir empfehlen die Browser 'Safari', 'Firefox' oder 'Brave'.
DANKE
—Klicken Sie, um diese Nachricht zu schließen—
* [pl]  UWAGA:
Używasz przestarzałej przeglądarki. Nie jest ona bezpieczna i nie odpowiada nowoczesnym standardom sieciowym.
Zaktualizuj (lub zmień) swoją przeglądarkę, aby wyświetlać naszą stronę w sposób, w jaki powinna być widoczna.
Polecamy przeglądarki „Safari”, „Firefox” lub „Brave”.
DZIĘKUJEMY
—Kliknij, aby zamknąć tę wiadomość—
* [en]  PLEASE NOTE:
You are using an outdated browser. It is unsafe and no longer suitable for modern web standards.
Please, update (or change) your browser to view our site as it is intended to be seen.
We recommend 'Safari', 'Firefox' or 'Brave' browsers.
THANK YOU
—Click to dismiss this message—

Source's Custom Fonts
dlutek.com

On this page, I am trying to supplement FontPro with native Source Custom Fonts. The main header above is rendered by Font Pro as 'Font Vault 1' and 'Font Style 1' – for h1 PAGE TITLE exclusively.

In this case, I have the changa-extra_bold font assigned to all h1 Page Title headers in Source's settings and changalt class assigned to the Markdown stack's CSS, which renders all text in this stack, except h-1, as changa-light. This method is going to be used for all h1 headers that are not a PAGE TITLE. Note smaller size and lack of a shadow.

This is an example how same h1 header can be rendered differently by using both Font Pro and Custom Fonts. More flexibility is always a good thing – whether I use it or not.

I intend to use Font Pro as my main font manager. The User Fonts manager will have a supplemental role only, since it is less powerful than BWD font tools.

This box contains fonts assigned as default in Source framework (Helvetica Neue, bold and regular).

1 - Fonts warehoused on a server

Proposed localization and hierarchy sample on server:

/public_html/warefonts1/notosans/22-notosans-bold_italic.woff2

This box contains fonts assigned in 'Custom Fonts' stack as .forornd1 (fororounded-regular).

2 - Custom naming scheme

Fonts from different foundries use different naming schemes. In order to introduce some order and uniformity, I am attempting to normalize the font naming scheme. That includes: the prefix-number assigned to specific font-weight, hyphen/underscore order and wording.

Here it is (notosans and notoserif are used only as examples of font faces). As you can see, the left column is rendered in notosans face and the right column in notoserif face. This is achieved by assigning classes .notosans and .notoserif (note the period at the beginning) in Source's Custom Fonts stacks and notosans and notoserif (note the lack of a period at the beginning), respectively, to Markdown stacks.

  • 01-notosans-four
  • 03-notosans-eight
  • 05-notosans-hair
  • 07-notosans-ultra_light
  • 09-notosans-extra_light
  • 11-notosans-light
  • 13-notosans-thin
  • 15-notosans-regular/book
  • 17-notosans-medium
  • 19-notosans-semi/demi_bold
  • 21-notosans-bold
  • 23-notosans-extra_bold
  • 25-notosans-black/heavy
  • 50-notosans-outline
  • 51-notosans-shade
  • 52-notosans-stencil
  • 53-notosans-reversed
  • 02-notoserif-four_italic
  • 04-notoserif-eight_italic
  • 06-notoserif-hair_italic
  • 08-notoserif-ultra_light_italic
  • 10-notoserif-extra_light_italic
  • 12-notoserif-light_italic
  • 14-notoserif-thin_italic
  • 16-notoserif-regular/book_italic
  • 18-notoserif-medium_italic
  • 20-notoserif-semi/demi_bold_italic
  • 22-notoserif-bold_italic
  • 24-notoserif-extra_bold_italic
  • 26-notoserif-black/heavy_italic

This box contains fonts assigned in 'Custom Fonts' stack as .notosans.

3 - Assigning classes to fonts and to Markdown stacks

By assigning classes, we have more flexibility.

  • h1 header rendered in changa-extra_bold (assigned to all h1 headers in Source's Custom Fonts settings).
  • h2-to-h6 headers rendered in fororounded_bold (assigned to all headers but h-1 in Source's Custom Fonts settings).
  • non-header text rendered in notosans-regular (assigned to Markdown's stack as CSS class notosans).

Changa Extra Bold h-1 header

Foro Rounded h-2 header

Foro Rounded h-3 header

Foro Rounded h-4 header

Foro Rounded h-5 header
Foro Rounded h-6 header

4 - Assigning functions to fonts for their specific uses

Generally, I want to use as few font faces as possible. However, there are circumstances occasionally, when additional font faces need to be introduced – just to differentiate between specific blocks of text.

And so:

Changa ExtraBold

is always used for Page Title (h-1);

Changa Light

is always used for Page Subtitle (h-1) and for stacks with class changalt placed in their CSS classes box;

Foro Rounded

is always used for headers other than h-1 (h-2, h-3, h-4, h-5 and h-6);

Foro Rounded

is always used for less formal texts, like a content of pages. Could it be replaced by 'Tenso Slab'?

Noto Mono

This font is not assigned to any function just yet. Could be used for snippets of code.

Noto Sans

is always used for formal and technical texts, like explanations of website's workings – in most cases it replaces the 'default' Source font;

Noto Serif

is always used for contents of posts in WHAT'S NEW? blog.

Helvetica Neue (default Source font)

is used for selectors within dropdowns – for example to choose the year in the blog archive.

Tenso

is always used for notification texts, for example in cards. Also, whenever a smaller-sized text is needed – because this font-face is physically smaller than others at the same font-size setting.

Tenso Slab

This font is not assigned to any function just yet. Could it replace 'Foro Rounded'?

Piazzolla

This font could be assigned to "small-print" parts, as it is the smallest font-face of all that I have examples for. Most likely, it would be better than Tenso in this function, since it is a serif font.

5 - Visual samples of fonts

This box contains fonts assigned in 'Custom Fonts' stack as font family: fororounded1 and class: .forornd1 (fororounded-regular).

Now, I want to render this text as fororounded-regular, by assigning the class forornd1 to this particular Markdown stack.

This is what 'bold' looks like in forornd1 class.

Generally speaking, the forornd1 class text looks lighter and is a good choice for light backgrounds, when rendered in black/dark colors.

This box contains fonts assigned in 'Custom Fonts' stack as font family: fororounded2 and class: .forornd2 (fororounded-medium).

Now, I want to render this text as fororounded-medium, by assigning the class forornd2 to this particular Markdown stack.

This is what 'bold' looks like in forornd2 class.

The forornd2 class text looks heavier and is a good choice for very dark backgrounds, when rendered in white. 'Medium' weight on a dark background looks like 'regular' on a light background and is easier on eyes than 'regular'.

This box contains fonts assigned in 'Custom Fonts' stack as font family: tenso and class: .tenso (tenso-regular).

Now, I want to render this text as tenso-regular, by assigning the class tenso to this particular Markdown stack.

This is what 'bold' looks like in tenso class.

Generally speaking, the tenso class text looks lighter and is a good choice for light backgrounds, when rendered in black/dark colors.

This box contains fonts assigned in 'Custom Fonts' stack as font family: tensoslab1 and class: .tensoslab1 (tensoslab-regular).

Now, I want to render this text as tenso-medium, by assigning the class tensoslab1 to this particular Markdown stack.

This is what 'bold' looks like in tensoslab1 class ('medium' as 'bold').

Generally speaking, the tensoslab1 class text looks lighter and is a good choice for white/light backgrounds, when rendered in black/dark colors.

This box contains fonts assigned in 'Custom Fonts' stack as font family: tensoslab2 and class: .tensoslab2 (tensoslab-medium).

Now, I want to render this text as tensoslab-medium, by assigning the class tensoslab2 to this particular Markdown stack.

This is what 'bold' looks like in tensoslab2 class (true 'bold').

Generally speaking, the tensoslab2 class text looks heavier and is a good choice for dark/black backgrounds, when rendered in light/white colors.

This box contains fonts assigned in 'Custom Fonts' stack as font family: piazzolla1 and class: .piazzolla1 (piazzolla-medium ).

Now, I want to render this text as piazzolla-medium, by assigning the class piazzolla1 to this particular Markdown stack.

This is what 'bold' looks like in piazzolla1 class (true 'bold').

As we can see, 'piazzolla-medium' font is a bit too heavy (at least in small size), even when rendered in dark-gray rather than black. Unfortunatelly, 'piazzola' font family does not include 'regular' weight, which is a result of this font family being originated 'in print' rather than web use. That is a pity, because this is a nice font face. However, if I need to use this combination of 'piazzolla' medium/bold, it is not a totally bad choice.

© 2015- Robert Dlutek,    Contact

Last update: 31 July 2021