* [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 'default style'dlutek.com
Font Pro is an excellent stack (built by Andrew Tavernor, even though the stack is marketed by Joe Workman). What this stack does, it does the best. However, Font Pro is limited to 8 instances of fonts and styles. That's why Font Pro will remain my general font manager and Source's 'Custom Fonts' will be used only to supplement the former when needed.
* All headers are always rendered in 'bold' weight – default setting in Source.
* All styles on this page are 'Base Style (Source)' – which means no custom styles are applied here.
* On this page, I don't use any partials, because I will have to rebuild them from scratch – in tune with new Source defaults, Font Pro styles and CONTAINER margins/paddings. Partials are on a separate page.
Headers & Paragraphs: sizes & line heights
Sizes and line hight are set as defaults in Source. These two metrics should be used throughout the website without a need for altering in individual text stacks, therefore, they are suitable for creating partials and externals. These metrics are fine-tuned to my particular taste. In specific circumstances, though, they may and should be adjusted – for example in the 'Small Print' style.
- 1rem = 10px
- Line height = 1.6rem
- All headers are set in Source to be rendered as "bold" by default
- H1 header small: 3.0rem - medium+: 4.7rem
- Paragraph small: 1.5rem - medium+: 1.9rem
1 - Fonts warehoused on a server
Proposed localization and hierarchy sample on server:
/public_html/warefonts1/notosans/22-notosans-bold_italic.woff2
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.
- 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
- 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
- 50-notosans-outline
- 51-notosans-shade
- 52-notosans-stencil
- 53-notosans-reversed
h1 – This is 'h1' header.
h2 – This is 'h2' header.
h3 – This is 'h3' header.
h4 – This is 'h4' header.
h5 – This is 'h5' header.
h6 – This is 'h6' header.
Headers – Always bold (Source default), always 'accent color'.
Paragraphs – The default (normal) size is: 1.5rem (small) and 2.0rem (medium+). The default line hight is: 1.6rem (16px) – Source defaults.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin posuere hendrerit. Sed et ante eget enim commodo iaculis. Nulla facilisi. Praesent lobortis lectus sed arcu viverra euismod. Duis a lectus tortor, ut consectetur ante. Aliquam in ligula id elit convallis rutrum. Nulla facilisi.
- List: the font-size is 94%; the line hight is a Source default 1.6rem; the padding is 0rem and the position is outside.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet. Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus.
This is what the simple quote in Markdown stack looks like.
© 2015- Robert Dlutek, Contact