{"id":27988,"date":"2024-06-07T05:00:00","date_gmt":"2024-06-07T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=27988"},"modified":"2024-10-18T08:49:55","modified_gmt":"2024-10-18T06:49:55","slug":"responsywny-design-precyzyjna-kontrola-typografii","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/responsywny-design-precyzyjna-kontrola-typografii\/","title":{"rendered":"Responsywny design: precyzyjna kontrola typografii"},"content":{"rendered":"\n<p>Nowoczesne technologie rozwijaj\u0105 si\u0119 na naszych oczach \u2013 od pierwszych komputer\u00f3w z dost\u0119pem do Internetu (<a href=\"https:\/\/www.nck.pl\/szkolenia-i-rozwoj\/projekty\/kongres-kultury\/aktualnosci\/poczatek-internetu-w-polsce-alek-tarkowski\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >w Polsce 17 stycznia 1991<\/a>) po Internet na wyci\u0105gni\u0119cie r\u0119ki w naszych kieszeniach. Udzia\u0142 urz\u0105dze\u0144 mobilnych (z wy\u0142\u0105czeniem tablet\u00f3w) w 2024 <a href=\"https:\/\/explodingtopics.com\/blog\/mobile-internet-traffic\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >stanowi\u0142 61.21%<\/a> globalnego ruchu na stronach internetowych.<\/p>\n\n\n\n<p>Wed\u0142ug statystyk <a href=\"https:\/\/www.goodfirms.co\/resources\/web-design-research-small-business\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >73,1% projektant\u00f3w<\/a> stron internetowych zgadza si\u0119, \u017ce nieresponsywny projekt jest g\u0142\u00f3wn\u0105 przyczyn\u0105 porzucania stron przez odwiedzaj\u0105cych.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/statista.png\"><img decoding=\"async\" width=\"717\" height=\"447\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/statista.png\" alt=\"Udzia\u0142 urz\u0105dze\u0144 mobilnych w ruchu internetowym\" class=\"wp-image-27989\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/statista.png 717w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/statista-300x187.png 300w\" sizes=\"(max-width: 717px) 100vw, 717px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 <a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Udzia\u0142 urz\u0105dze\u0144 mobilnych w ruchu internetowym<\/a><\/figcaption><\/figure>\n\n\n\n<p>Z artyku\u0142u dowiesz si\u0119 m.in.: na czym polega podej\u015bcie tradycyjne do typografii oraz jak zastosowa\u0107 p\u0142ynn\u0105 typografi\u0119.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Nowe wyzwania<\/strong><\/h2>\n\n\n\n<p>Powszechny dost\u0119p do urz\u0105dze\u0144 mobilnych spowodowa\u0142, \u017ce pojawi\u0142o si\u0119 nowe wyzwanie \u2013 dostosowywanie zawarto\u015bci strony (tekst\u00f3w, obraz\u00f3w, film\u00f3w itd.) do rozmiaru ekranu urz\u0105dzenia, z kt\u00f3rego korzysta u\u017cytkownik.<\/p>\n\n\n\n<p>Je\u015bli zagadnienia z <a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_intro.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >zakresu responsywno\u015bci<\/a> s\u0105 Ci obce, polecam zapozna\u0107 si\u0119 z poj\u0119ciami:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_mediaqueries.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Media query<\/a> \u2013 to kod CSS, kt\u00f3ry jest ukierunkowany na okre\u015blone cechy urz\u0105dzenia, takie jak rozmiar ekranu czy orientacja.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Viewport<\/a> \u2013 to widoczny dla u\u017cytkownika obszar strony internetowej.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.php\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >CSS units<\/a> \u2013 PX, PT, EM, REM, %, VW, VH, VMIN i VMAX jako jednostki CSS. Mo\u017cna je podzieli\u0107 na dwie kategorie: bezwzgl\u0119dne i wzgl\u0119dne.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_media_query_breakpoints.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Breakpoints<\/a> \u2013 tzw. punkt przerwania, to okre\u015blony punkt w projekcie strony internetowej lub aplikacji, w kt\u00f3rym uk\u0142ad tre\u015bci zmienia si\u0119, aby lepiej dopasowa\u0107 si\u0119 do rozmiaru ekranu urz\u0105dzenia).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podej\u015bcie tradycyjne<\/strong><\/h2>\n\n\n\n<p>Typografia jest istotnym elementem strony internetowej. Zastosowanie atrybut\u00f3w typograficznych, takich jak skala, odst\u0119py i rozmiar, <strong>mo\u017ce wp\u0142ywa\u0107 pozytywnie lub negatywnie na odbi\u00f3r<\/strong>, u\u017cyteczno\u015b\u0107 czy dost\u0119pno\u015b\u0107 strony.<\/p>\n\n\n\n<p>Osi\u0105gni\u0119cie zadowalaj\u0105cego efektu wizualnego mo\u017cliwe jest dzi\u0119ki dynamicznemu rozwojowi CSS.<br>CSS umo\u017cliwia korzystanie z r\u00f3\u017cnych w\u0142a\u015bciwo\u015bci np.:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>media query,<\/li>\n\n\n\n<li>uk\u0142ad elastyczny (flex),<\/li>\n\n\n\n<li>uk\u0142ad siatki (grid),<\/li>\n<\/ul>\n\n\n\n<p>aby osi\u0105gn\u0105\u0107 responsywny design. <a href=\"https:\/\/medium.com\/readytowork-org\/10-best-practices-for-frontend-web-development-a-guide-for-beginners-6858ba6f6ade\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Media query<\/a> pozwala programistom okre\u015bli\u0107, jak powinna wygl\u0105da\u0107 strona internetowa dla r\u00f3\u017cnych rozmiar\u00f3w ekranu.<\/p>\n\n\n\n<p>Je\u015bli korzystamy z media query (breakpoints), warto\u015bci ulegaj\u0105 zmianie w okre\u015blonych punktach. S\u0105 to zdefiniowane w kodzie warto\u015bci szeroko\u015bci ekranu, dla kt\u00f3rych projektanci definiuj\u0105 wygl\u0105d stron internetowych. Zmiany te nast\u0119puj\u0105 skokowo. Same breakpoint mog\u0105 wykorzystywa\u0107 r\u00f3\u017cne jednostki.<\/p>\n\n\n\n<p>Poni\u017cej najprostszy przyk\u0142ad z breakpoints w px:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@media screen and (max-width: 765px) {\n  div.example {\n    font-size: 16px;\n  }\n}\n@media screen and (min-width: 765px) {\n  div.example {\n    font-size: 36px;\n  }\n}\n<\/pre><\/div>\n\n\n<p>Zgodnie z powy\u017cszym, div.example b\u0119dzie mia\u0142 rozmiar tekstu 36px, je\u015bli ekran b\u0119dzie wi\u0119kszy lub r\u00f3wny 768px, ale 16px, je\u015bli b\u0119dzie mia\u0142 mniej ni\u017c 768px. Nie jest to narz\u0119dzie doskona\u0142e. Wyst\u0119puje zasada \u201e<strong>albo albo<\/strong>\u201d i nie ma nic p\u0142ynnego pomi\u0119dzy. <\/p>\n\n\n\n<p>Inne przyk\u0142ady tradycyjnego podej\u015bcia, w kt\u00f3rym zastosowane s\u0105 breakpoints z warto\u015bciami podanymi w rem:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n:root {\n  --font-size-basic: 1rem; \/* 16px *\/\n}\n\n\/* Between 768px and 1023px *\/\n@media screen and (min-width: 48rem) and (max-width: 64rem) {\n  :root {\n    --font-size-basic: 1.125rem; \/* 18px *\/\n  }\n}\n\n\/* 1024px or bigger *\/\n@media screen and (min-width: 64rem) {\n  :root {\n    --font-size-basic: 1.5rem; \/* 24px *\/\n  }\n}\n\n\/* Applying the font-size *\/\nbody {\n  font-size: var(--font-size-basic);\n}\n<\/pre><\/div>\n\n\n<p>Taki kod sprawi, \u017ce rozmiar tekstu b\u0119dzie dostosowywa\u0142 si\u0119 do ekran\u00f3w o r\u00f3\u017cnych szeroko\u015bciach. Jednak <strong>efekt mo\u017ce nie by\u0107 do ko\u0144ca zadowalaj\u0105cy<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Na drodze do p\u0142ynno\u015bci<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2022\/01\/modern-fluid-typography-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Pierwsza prawdziwa implementacja<\/a> p\u0142ynnej typografii w CSS pojawi\u0142a si\u0119 wraz z wprowadzeniem CSS <em>calc<\/em> i jednostek <em>vw<\/em> i <em>vh<\/em>.<\/p>\n\n\n\n<p>Funkcja calc() w CSS umo\u017cliwia wykonywanie oblicze\u0144 matematycznych.<\/p>\n\n\n\n<p>Jednostki vw oraz vh s\u0105 jednostkami wzgl\u0119dnymi w \u017caden spos\u00f3b nie s\u0105 powi\u0105zane z podstawowym rozmiarem fontu. Zamiast tego s\u0105 one wzgl\u0119dne w stosunku do wielko\u015bci ekranu (okna roboczego), kt\u00f3ry kontroluje u\u017cytkownik.<\/p>\n\n\n\n<p>Jedna jednostka viewport* to 1% wielko\u015bci ekranu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>vw \u2013 1% szeroko\u015bci viewport (czyli 100px dla ekranu 1920px to <a href=\"https:\/\/webcode.solutions\/en\/tools\/px-to-vw\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >5,208vw<\/a>),<\/li>\n\n\n\n<li>vh \u2013 1% wysoko\u015b\u0107 viewport,<\/li>\n<\/ul>\n\n\n\n<p><em>* <\/em><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Viewport<\/a> = to widoczny dla u\u017cytkownika obszar strony internetowej.<\/p>\n\n\n\n<p>Poni\u017cej kod zapisany z wykorzystaniem funkcji calc() oraz breakpoint\u00f3w jako prekursor p\u0142ynnej typografii:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.fluid {\n  font-size: 14px;\n}\n@media screen and (min-width: 768px) {\n  .fluid {\n    font-size: calc(16px + 16 * ((100vw - 768px) \/ (1024 - 768)));\n  }\n}\n@media screen and (min-width: 1024px) {\n  .fluid {\n    font-size: 32px;\n  }\n}\n<\/pre><\/div>\n\n\n<p>Powy\u017cszy przyk\u0142ad wygl\u0105da na skomplikowany, dlatego podzielmy go na segmenty.<\/p>\n\n\n\n<p>Minimalny rozmiar fontu to 16px.<\/p>\n\n\n\n<p>Je\u015bli ekran ma minimum 768px szeroko\u015bci, w\u00f3wczas font jest obliczany i b\u0119dzie reagowa\u0142 na szeroko\u015b\u0107 ekranu (ze wzgl\u0119du na u\u017cycie jednostki wzgl\u0119dnej vw).<\/p>\n\n\n\n<p>Dla ekranu o minimalnej szeroko\u015bci 1024px jego rozmiar jest ustalony i wynosi 32px, niezale\u017cnie od tego, jak du\u017cy ekran b\u0119dzie.<\/p>\n\n\n\n<figure class=\"wp-block-table aligncenter\"><table><tbody><tr><td><strong>Ekran<\/strong><\/td><td><strong>Font [px]<\/strong><\/td><\/tr><tr><td>1200<\/td><td>32<\/td><\/tr><tr><td>1024<\/td><td>32<\/td><\/tr><tr><td>980<\/td><td>29.25<\/td><\/tr><tr><td>860<\/td><td>21.75<\/td><\/tr><tr><td>768<\/td><td>16 <em>*<\/em><\/td><\/tr><tr><td>320<\/td><td>16<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>* 100vw = 768px<br>(16 + 16 * ((768 &#8211; 768) \/ (1024 &#8211; 768)) = 16<\/em><\/p>\n\n\n\n<p>Powy\u017cszy <a href=\"https:\/\/css-tricks.com\/snippets\/css\/fluid-typography\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >kod roz\u0142o\u017cony w formie wzoru<\/a> wygl\u0105da nast\u0119puj\u0105co:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.fluid {\n font-size: &#x5B;value-min];\n}\n\n@media (min-width: &#x5B;breakpoint-min]) {\n  .fluid {\n    font-size: calc(&#x5B;value-min] + (&#x5B;value-max] - &#x5B;value-min]) * ((100vw - &#x5B;breakpoint-min]) \/ (&#x5B;breakpoint-max] - &#x5B;breakpoint-min])));\n  }\n}\n\n@media (min-width: &#x5B;breakpoint-max]) {\n  .fluid {\n    font-size: &#x5B;value-max]\n  }\n}\n<\/pre><\/div>\n\n\n<p>Cho\u0107 funkcja calc() znacznie u\u0142atwi\u0142a tworzenie responsywnych projekt\u00f3w CSS, to programi\u015bci chcieli czego\u015b wi\u0119cej.<\/p>\n\n\n\n<p>Tworzenie p\u0142ynnego fontu w powy\u017cszy spos\u00f3b jest mo\u017cliwe, ale to do\u015b\u0107 skomplikowany proces i wymaga napisania du\u017cej ilo\u015bci kodu, a dobry programista to\u2026 \ud83d\ude09 W\u0142a\u015bnie dlatego powsta\u0142a metoda clamp().<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fluid Typography<\/strong><\/h2>\n\n\n\n<p>Jedn\u0105 z wielu korzy\u015bci stosowania funkcji clamp() jest brak konieczno\u015bci dodawania dodatkowych breakpoint\u00f3w dla zabezpieczenia strony przed skrajnymi przypadkami, a tak\u017ce brak konieczno\u015bci stosowania wymy\u015blnych oblicze\u0144. Dzi\u0119ki zastosowaniu clamp() wielko\u015b\u0107 tekstu skaluje si\u0119 p\u0142ynnie i wygl\u0105da poprawnie niezale\u017cnie od wielko\u015bci ekranu.<\/p>\n\n\n\n<p>CSS clamp() oferuje to, co najlepsze z metod min() oraz max(). Przyjmuje trzy parametry:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>warto\u015b\u0107 minimaln\u0105,<\/li>\n\n\n\n<li>warto\u015b\u0107 preferowan\u0105,<\/li>\n\n\n\n<li>warto\u015b\u0107 maksymaln\u0105.<\/li>\n<\/ul>\n\n\n\n<p>Mo\u017cna u\u017cywa\u0107 dowolnych jednostek miary\/unit\u00f3w (vw, vh, px, % itd.).<\/p>\n\n\n\n<p>clamp(min, preferowana, maksymalna)<\/p>\n\n\n\n<p>clamp(20px, 50%, 5rem)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>minimum \u2013 r\u00f3wny minimalnemu rozmiarowi czcionki,<\/li>\n\n\n\n<li>preferowana \u2013 okre\u015bla spos\u00f3b skalowania p\u0142ynnej typografii,<\/li>\n\n\n\n<li>maksimum \u2013 r\u00f3wny maksymalnemu rozmiarowi czcionki.<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Funkcja clamp<\/a>(MIN, PREFERED, MAX) jest rozwi\u0105zywane jako max(MIN, min(VAL, MAX)).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Popracujmy na przyk\u0142adzie<\/strong><\/h3>\n\n\n\n<p>Rozwa\u017cmy nast\u0119puj\u0105cy przyk\u0142ad:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nbody {\n  font-size: clamp(1rem, 4vw, 3rem);\n}\n<\/pre><\/div>\n\n\n<p>Rozmiar fontu b\u0119dzie waha\u0142 si\u0119 mi\u0119dzy 16px a 48px, a domy\u015blny rozmiar b\u0119dzie wynosi\u0142 4vw (czyli 4% szeroko\u015bci ekranu, np.: dla szeroko\u015bci 1024px font ma rozmiar 40.96px).<\/p>\n\n\n\n<p>Zastosowanie clamp() mo\u017ce pom\u00f3c nam stworzy\u0107 p\u0142ynne rozmiary tekstu, kt\u00f3re dostosuj\u0105 si\u0119 do ekranu <a href=\"https:\/\/blog.logrocket.com\/fluid-vs-responsive-typography-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >o dowolnym rozmiarze<\/a>. Powy\u017cszy <strong>kod ma jednak pewne wady<\/strong>.<\/p>\n\n\n\n<p>P\u0142ynna typografia (wykorzystuj\u0105ca tylko jednostki vw\/vh jako preferowane) nie jest doskona\u0142a. Powy\u017cszy przyk\u0142ad reprezentuje problem z dost\u0119pno\u015bci\u0105 i je\u015bli b\u0119dziemy opierali si\u0119 jedynie na jednostkach viewport, nasz kod nie b\u0119dzie spe\u0142nia\u0142 <a href=\"https:\/\/sii.pl\/blog\/wyszukiwarka\/wcag\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">kryteri\u00f3w WCAG<\/a> dotycz\u0105cych <a href=\"https:\/\/adrianroselli.com\/2019\/12\/responsive-type-and-zoom.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >rozmiaru tekstu<\/a> (rozmiar tekstu mo\u017ce zosta\u0107 powi\u0119kszony do 200% bez u\u017cycia technologii wspomagaj\u0105cych, nie wymagaj\u0105c od u\u017cytkownika chc\u0105cego odczyta\u0107 ca\u0142y wiersz, przesuwania tekstu w poziomie przy zmaksymalizowanym <a href=\"https:\/\/www.w3.org\/Translations\/WCAG21-pl\/#zmiana-rozmiaru-tekstu\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >oknie ekranu<\/a>)&nbsp;.<\/p>\n\n\n\n<p>Bezpieczniejszym podej\u015bciem b\u0119dzie jednoczesne <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >zastosowanie rem<\/a>. Jednostka rem skaluje si\u0119 wraz z powi\u0119kszaniem. Uwzgl\u0119dnienie w preferowanej warto\u015b\u0107 kombinacji vw oraz rem pozwoli na zachowanie zar\u00f3wno warto\u015bci szeroko\u015bci ekranu jak i preferencji skalowania u\u017cytkownika.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Okre\u015blanie warto\u015bci preferowanej w clamp() w jednostkach rem<\/strong><\/h3>\n\n\n\n<p>Jak wobec tego okre\u015bli\u0107 warto\u015b\u0107 preferowan\u0105 w clamp() w jednostkach rem?<\/p>\n\n\n\n<p>Dla przyk\u0142adu stw\u00f3rzmy tekst o rozmiarze 16px na ekranach 320px i 19px na ekranach 1280px. Oto jak ta czcionka zwi\u0119kszy\u0142aby si\u0119 wraz z rozmiarem ekranu:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/font_size_interpolation.jpg\"><img decoding=\"async\" width=\"690\" height=\"322\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/font_size_interpolation.jpg\" alt=\"Wykres clamp\" class=\"wp-image-27991\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/font_size_interpolation.jpg 690w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/font_size_interpolation-300x140.jpg 300w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 <a href=\"https:\/\/blog.logrocket.com\/fluid-vs-responsive-typography-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Wykres clamp<\/a><\/figcaption><\/figure>\n\n\n\n<p>Aby maksymalnie wykorzysta\u0107 mo\u017cliwo\u015bci clamp oraz jednostek rem i vw mo\u017cemy sami obliczy\u0107 wszystkie niezb\u0119dne warto\u015bci.<br><br>Poni\u017cszy wz\u00f3r obrazuje kroki, kt\u00f3re musieliby\u015bmy wykona\u0107, aby skorzysta\u0107 z jednostek vw oraz rem, aby odwzorowa\u0107 powy\u017csze wymagania.<\/p>\n\n\n\n<p>Dla przyk\u0142adu za\u0142\u00f3\u017cmy, \u017ce minimalna szeroko\u015b\u0107 ekranu to 320px i font 16px, maksymalna to 1200px i font 24px.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nconst parameters = {\n  minWidth: 320,\n  maxWidth: 1200,\n  minFontSize: 16,\n  maxFontSize: 24,\n  pxPerRem: 16,\n};\n\nconst minWidth = parameters.minWidth \/ parameters.pxPerRem;     \nconst maxWidth = parameters.maxWidth \/ parameters.pxPerRem;      \nconst fontRemMin = parameters.minFontSize \/ parameters.pxPerRem;       \nconst fontRemMax = parameters.maxFontSize \/ parameters.pxPerRem;       \n\nconst slope = (fontRemMax - fontRemMin) \/ (maxWidth - minWidth);     \nconst yAxisIntersection = -minWidth * slope + fontRemMin;            \nconst clampFunc = `clamp(${fontRemMin}rem, ${yAxisIntersection.toFixed(4)}rem + ${(slope * 100).toFixed(4)}vw, ${fontRemMax}rem)`;\n<\/pre><\/div>\n\n\n<p>Teraz przeanalizujmy to wszystko krok po kroku.<br>Na samym pocz\u0105tku wszystkie warto\u015bci wyra\u017cone w px nale\u017cy przeliczy\u0107 na warto\u015bci w rem.<br>W kolejnym kroku obliczamy nachylenie (slope) zgodnie z <a href=\"https:\/\/pl.khanacademy.org\/math\/cc-eighth-grade-math\/cc-8th-linear-equations-functions\/8th-slope\/a\/slope-formula\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >zasadami matematyki<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/slope_diagram-1.jpg\"><img decoding=\"async\" width=\"491\" height=\"480\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/slope_diagram-1.jpg\" alt=\"Slope diagram\" class=\"wp-image-27995\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/slope_diagram-1.jpg 491w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/slope_diagram-1-300x293.jpg 300w\" sizes=\"(max-width: 491px) 100vw, 491px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Slope diagram<\/figcaption><\/figure>\n\n\n\n<p>Obliczamy dla warto\u015bci preferowanej punkt przeci\u0119cia wykresu na osi y i sk\u0142adamy wszystko w ca\u0142o\u015b\u0107.<\/p>\n\n\n\n<p>Po podstawieniu liczb otrzymamy nast\u0119puj\u0105ce r\u00f3wnania:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nconst parameters = {\n  minWidth: 320,\n  maxWidth: 1200,\n  minFontSize: 16,\n  maxFontSize: 24,\n  pxPerRem: 16,\n};\n\nconst minWidth = 320 \/ 16 = 20;     \nconst maxWidth = 1200 \/ 16 = 75;      \nconst fontRemMin = 16 \/ 16 = 1;       \nconst fontRemMax = 24 \/ 16 = 1.5;       \n\nconst slope = (1.5 - 1) \/ (75 - 20) = 0.5 \/ 55 = 0.00909;     \nconst yAxisIntersection = -20 * 0.00909 + 1 = -0.18181818181818182 + 1 = 0.8181818181818181;            \nconst clampFunc = clamp(1rem, -0.8182rem + 0,909vw, 1.5rem); \n<\/pre><\/div>\n\n\n<p>Wynik:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nfont-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);\n<\/pre><\/div>\n\n\n<p>Troch\u0119 trudne, prawda? A mia\u0142o by\u0107 lepiej, ni\u017c z wykorzystaniem calc()!<br>Dobra wiadomo\u015b\u0107 jest taka, \u017ce w Internecie mo\u017cna znale\u017a\u0107 gotowe generatory tego rozwi\u0105zania:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.marcbacon.com\/tools\/clamp-calculator\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Clamp() Function Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/clamp.font-size.app\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Font-size Clamp Generator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/clamp-generator.netlify.app\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Clamp Generator<\/a><\/li>\n<\/ul>\n\n\n\n<p>Dodatkowo, warto sprawdzi\u0107 dzia\u0142anie <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/modern-fluid-typography.vercel.app\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >generatora tworz\u0105cego wizualizacj\u0119<\/a> dzia\u0142ania clamp(). Poni\u017cej przyk\u0142ad dzia\u0142ania clamp():<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/clamp_video.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-fc5ba9ff-1583-45f1-82bd-42bbeff66fd0\" href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/index.html\">index<\/a><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/index.html\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-fc5ba9ff-1583-45f1-82bd-42bbeff66fd0\">Pobierz<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Wsparcie<\/strong><\/h2>\n\n\n\n<p>Funkcja clamp() jest nadal uznawana za \u2018working draft\u2019, ale mimo to ma szerokie wsparcie przegl\u0105darek i mo\u017cna z niej korzysta\u0107.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse.png\"><img decoding=\"async\" width=\"1024\" height=\"429\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse-1024x429.png\" alt=\"Can I use\" class=\"wp-image-28001\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse-1024x429.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse-300x126.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse-768x322.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/canIuse.png 1501w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 <a href=\"https:\/\/caniuse.com\/?search=clamp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Can I use<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Zako\u0144czenie<\/strong><\/h2>\n\n\n\n<p>Funkcja clamp() w CSS jest u\u017cyteczn\u0105 i elastyczn\u0105 metod\u0105 nie tylko dla rozmiaru fontu, ale tak\u017ce dla innych mierzalnych element\u00f3w takich jak kolor, obramowanie, margines, wype\u0142nienie itd. Dzi\u0119ki temu mo\u017cna niewielkim nak\u0142adem pracy uzyska\u0107 dynamiczne efekty wizualne, reaguj\u0105ce na zmian\u0119 rozmiaru okna przegl\u0105darki.<\/p>\n\n\n\n<p>Jednak nie zawsze p\u0142ynna typografia wykorzystuj\u0105ca szeroko\u015b\u0107 ekranu g\u0142\u00f3wnego jest rozwi\u0105zaniem problem\u00f3w skalowania. Mo\u017ce wyst\u0105pi\u0107 sytuacja, w kt\u00f3rej lepszym rozwi\u0105zaniem by\u0142oby wykorzystanie szeroko\u015bci kontenera. Za te mo\u017cliwo\u015bci odpowiada container queries. To jest jednak temat na osobny artyku\u0142.<\/p>\n\n\n\n<p><strong>Najlepsze praktyki dotycz\u0105ce responsywnej\/p\u0142ynnej typografii<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uwzgl\u0119dnienie czytelno\u015bci i dost\u0119pno\u015bci w rozmiarze czcionki \u2013 w\u0142a\u015bciwy rozmiar czcionki zapewnia, \u017ce tre\u015b\u0107 jest \u0142atwa do odczytania i zrozumienia dla wszystkich u\u017cytkownik\u00f3w.<\/li>\n\n\n\n<li>Responsywna typografia pomaga zachowa\u0107 r\u00f3wnowag\u0119 mi\u0119dzy r\u00f3\u017cnymi elementami projektu na r\u00f3\u017cnych urz\u0105dzeniach, dlatego wa\u017cne jest, aby rozmiary czcionek by\u0142y odpowiednio skalowane na r\u00f3\u017cnych urz\u0105dzeniach.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Literatura<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.nck.pl\/szkolenia-i-rozwoj\/projekty\/kongres-kultury\/aktualnosci\/poczatek-internetu-w-polsce-alek-tarkowski\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Pocz\u0105tek internetu w Polsce \u00ad\u2013 Alek Tarkowski<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.goodfirms.co\/resources\/web-design-research-small-business\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Website Design Stats And Trends For Small Businesses \u2013 GoodFirms Research<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_intro.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Responsive Web Design \u2013 Introduction<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_rwd_mediaqueries.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Responsive Web Design \u2013 Media Queries<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/cssref\/css_units.php\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >CSS Units<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_media_query_breakpoints.asp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >How TO \u2013 Typical Device Breakpoints<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/readytowork-org\/10-best-practices-for-frontend-web-development-a-guide-for-beginners-6858ba6f6ade\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >10 Best Practices for Frontend Web Development: A Guide for Beginners<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webcode.solutions\/en\/tools\/px-to-vw\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >PX to VW &amp; PX to VH converter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/fluid-typography\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Fluid Typography<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/Translations\/WCAG21-pl\/#zmiana-rozmiaru-tekstu\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Zmiana rozmiaru tekstu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >CSS values and units<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.khanacademy.org\/math\/cc-eighth-grade-math\/cc-8th-linear-equations-functions\/8th-slope\/a\/slope-formula\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Slope formula<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.glinka.co\/blog\/clamp-calculator\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Simplifying Responsive Font Sizing with a Clamp Calculator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/caniuse.com\/?search=clamp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Can I use clamp?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >clamp()<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.logrocket.com\/min-max-clamp-css-functions\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >A guide to the min(), max(), and clamp() CSS functions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/CSS_layout\/Responsive_Design\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Responsive design<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.logrocket.com\/fluid-vs-responsive-typography-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Fluid vs. responsive typography with CSS clamp<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.bitsrc.io\/css-clamp-the-responsive-combination-weve-all-been-waiting-for-f1ce1981ea6e\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >CSS Clamp(): The Responsive Combination We\u2019ve All Been Waiting For<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/clamp.font-size.app\/?config=eyJyb290IjoiMTYiLCJtaW5XaWR0aCI6IjUwMHB4IiwibWF4V2lkdGgiOiI5MDBweCIsIm1pbkZvbnRTaXplIjoiMTZweCIsIm1heEZvbnRTaXplIjoiNDhweCJ9\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Font-size Clamp Generator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.geeksforgeeks.org\/css-clamp-method\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Metoda CSS Clamp().<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2022\/01\/modern-fluid-typography-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Modern Fluid Typography Using CSS Clamp<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/frontlive.pl\/blog\/css-fluid-typography\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Nowoczesny CSS &#8211; min(), max() i clamp()<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.lukaszbacik.pl\/clamp-css\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Funkcja clamp w CSS<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/css-tricks.com\/linearly-scale-font-size-with-css-clamp-based-on-the-viewport\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Linearly Scale font-size with CSS clamp() Based on the Viewport<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/1stplace.pl\/blog\/responsywnosc-czym-jest-definicja-projektowanie-zalety-stron-rwd\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Responsywno\u015b\u0107 \u2013 czym jest? Definicja, projektowanie, zalety stron RWD<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/thriveagency.com\/news\/75-mobile-surfing-stats-on-internet-traffic-from-mobile-devices-updated\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >75+ Mobile Surfing Stats on Internet Traffic From Mobile Devices (Updated)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.statista.com\/statistics\/277125\/share-of-website-traffic-coming-from-mobile-devices\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Percentage of mobile device website traffic worldwide from 1st quarter 2015 to 4th quarter 2023<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.goodfirms.co\/resources\/web-design-research-small-business\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Website Design Stats And Trends For Small Businesses \u2013 GoodFirms Research<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.madebymike.com.au\/writing\/fluid-type-calc-examples\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Fluid typography examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.aleksandrhovhannisyan.com\/blog\/fluid-type-scale-with-css-clamp\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Creating a Fluid Type Scale with CSS Clamp<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/blog.logrocket.com\/css-container-queries-guide\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >A guide to CSS container queries<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/adrianroselli.com\/2019\/12\/responsive-type-and-zoom.html\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Responsive Type and Zoom<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/explodingtopics.com\/blog\/mobile-internet-traffic\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Internet Traffic from Mobile Devices (May 2024)<\/a><\/li>\n<\/ol>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;27988&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;6&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 6)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Responsywny design: precyzyjna kontrola typografii&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 6)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Nowoczesne technologie rozwijaj\u0105 si\u0119 na naszych oczach \u2013 od pierwszych komputer\u00f3w z dost\u0119pem do Internetu (w Polsce 17 stycznia 1991) &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/responsywny-design-precyzyjna-kontrola-typografii\/\">Continued<\/a><\/p>\n","protected":false},"author":641,"featured_media":28005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[2213,1512,930,294],"class_list":["post-27988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-css","tag-poradnik","tag-e-commerce","tag-responsive-web-design"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2024\/05\/Responsywny-design-precyzyjna-kontrola-typografii.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/27988"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/641"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=27988"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/27988\/revisions"}],"predecessor-version":[{"id":29341,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/27988\/revisions\/29341"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/28005"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=27988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=27988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=27988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}