Ostatnia mila w dostarczaniu treści. Czytelność tekstu w WordPressie.
•
0 gefällt mir•77 views
„Ostatnia mila” to termin pochodzący z logistyki i oznacza specyficzne warunki występujące podczas finalnego dostarczenia przesyłki przez kuriera do odbiorcy końcowego. Czego możemy nauczyć się od największych firm kurierskich świata? Czy wytworzenie treści i jej publikacja jest ostatnim działaniem twórcy? Co może zrobić developer, aby jego motyw lepiej sprzedawał swoją zawartość? Jakie mechanizmy zaszyte w WordPressie możemy użyć do zwiększenia czytelności? Na te i kilka innych pytań odpowiedź znajdziesz w tej prezentacji. Twoja witryna będzie jak paczkomat postawiony w mieszkaniu Twojego odbiorcy, a to wszystko dlatego, że #TypografiaMaZnaczenie.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Ostatnia mila w dostarczaniu treści. Czytelność tekstu w WordPressie.
- 1. Ostatnia mila w dostarczaniu treści. − Czytelność tekstu w WordPressie.
- 16. Czytelność. − Font: Nexa Rust Script L.
- 31. article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } Kontrast. − (calc) Źródło: https://www.smashingmagazine.com/2020/07/css-techniques-legibility/
- 49. ab ab ab ab ab ab ab ab ab ab ab ab ab abababab 6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72 +1 +2 +3 +12
- 50. body {font-size: 100%;} /* 16px */ Wielkość fontów. − (font-size) h5 {font-size: 1.618rem;} /* 1rem×1,618 */ h4 {font-size: 2.618rem;} /* 1rem×1,618×1,618 */ h3 {font-size: 4.236rem;} /* 1rem×1,618×1,618×1,618 */ h2 {font-size: 6.854rem;} /* 1rem×1,618×1,618×1,618×1,618*/ h1 {font-size: 11.089rem;} /* 1rem×1,618×1,618×1,618×1,618×1,618 */ small {font-size: 0.618rem;} /* 1rem ÷ 1,618 */
- 51. body {font-size: 100%; line-height: 1.618;} /* 1×1,618 */ Rytm pionowy. − (line-height, margin) h5 {font-size: 1.618rem;} h4 {font-size: 2.618rem;} h3 {font-size: 4.236rem;} h2 {font-size: 6.854rem;} h1 {font-size: 11.089rem;} small {font-size: 0.618rem;} p {margin-bottom: 1.618rem;} /* 1rem×1,618 */ h1, h2, h3, h4, h5 {margin-top: 1.618rem;} /* 1rem×1,618 */
- 52. body { font-size: calc(16px + 0.618vw); line-height: calc(16px + 1.618vw); } CSS (calc)+viewport
- 53. − type-scale.com
- 55. © Wojtek Równanek − – marcinandrzejewski.pl/o-alchemii- matematyce-i-typogra fi i-w-wordpressie/
- 57. Wartość @mediaquery (punkt graniczny) Szerokość (viewport) ab ab wartość min wartość max
- 58. Wartość min (punkt graniczny) Szerokość (viewport) ab ab wartość min wartość max ab ab ab ababab max (punkt graniczny) wartość optymalna (fluid)
- 60. "settings": { "typography": { "fluid": true } } Płynność na tak!
- 61. "settings": { "typography": { "fluid": true }, "fontSizes": [ { "size": "3rem", "fluid": { "min": "3rem", "max": "6rem" }, "slug": "large", }, }
- 62. --wp--preset--font-size--large: clamp(3rem, 3rem + ((1vw - 0.48rem) * 1.592), 6rem); --wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max}); „Rezultat”.
- 63. --wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});
- 64. fl uid-responsive font-size calculator Modern fl uid typography editor ๏ websemantics.uk/tools/responsive-font-calculator/ ๏ modern- fl uid-typography.vercel.app --wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});
- 73. − – zecerka.pl
- 76. p[lang="en"] { text-align: justify; hyphens: auto; } p[lang=„pl"] { text-align: left; hyphens: none; } Nadzieja… − (‐ + hyphens: manual CSS)
- 81. − – jasnopis.pl