Recent searches

No recent searches

Search options

Only available when logged in.
techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome

Administered by:

Server stats:

4.6K
active users

techhub.social: AboutStatusProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.2

#fluidtypography

0 posts0 participants0 posts today
eigenstil<p><a href="https://webinale.de/user-experience-design/dynamic-web-typography-rubberband/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">webinale.de/user-experience-de</span><span class="invisible">sign/dynamic-web-typography-rubberband/</span></a></p><p>Mein Highlight für den Tag bisher bei der <a href="https://troet.cafe/tags/webinale" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webinale</span></a>: Rubberband Design - Dynamic Web <a href="https://troet.cafe/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> (von Jan Persiel <a href="https://bsky.app/profile/janpersiel.com" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">bsky.app/profile/janpersiel.co</span><span class="invisible">m</span></a>) Super cooler Input für den Prozess, wie mensch <a href="https://troet.cafe/tags/Webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Webdesign</span></a> verbessern kann!</p><p><a href="https://troet.cafe/tags/responsivedesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>responsivedesign</span></a> <a href="https://troet.cafe/tags/fluidtypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fluidtypography</span></a></p>
N-gated Hacker News<p>🎨💦 In the latest episode of “Designers Have Too Much Time,” OddBird flutters around the idea of typography that’s as fluid as their ability to sidestep practicality. 😅💻 Because nothing screams innovation like spending eons toggling between light/dark modes and color schemes while the rest of the world wonders... "But why?" 🙃✨<br><a href="https://www.oddbird.net/2025/02/12/fluid-type/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/2025/02/12/fluid-t</span><span class="invisible">ype/</span></a> <a href="https://mastodon.social/tags/DesignersHaveTooMuchTime" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignersHaveTooMuchTime</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/DigitalInnovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DigitalInnovation</span></a> <a href="https://mastodon.social/tags/CreativeDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CreativeDesign</span></a> <a href="https://mastodon.social/tags/TypographyTrends" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TypographyTrends</span></a> <a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HackerNews</span></a> <a href="https://mastodon.social/tags/ngated" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ngated</span></a></p>
Hacker News<p>Reimagining Fluid Web Typography — <a href="https://www.oddbird.net/2025/02/12/fluid-type/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/2025/02/12/fluid-t</span><span class="invisible">ype/</span></a><br><a href="https://mastodon.social/tags/HackerNews" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HackerNews</span></a> <a href="https://mastodon.social/tags/Reimagining" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Reimagining</span></a> <a href="https://mastodon.social/tags/Fluid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Fluid</span></a> <a href="https://mastodon.social/tags/Web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Web</span></a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> <a href="https://mastodon.social/tags/Trends" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Trends</span></a> <a href="https://mastodon.social/tags/FutureOfWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FutureOfWeb</span></a></p>
pablolarah<p>🟠 Reimagining Fluid Typography<br>Are we responding to the right inputs?<br>by Mia <span class="h-card" translate="no"><a href="https://front-end.social/@mia" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>mia</span></a></span> </p><p><a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> </p><p><a href="https://www.oddbird.net/2025/02/12/fluid-type/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">oddbird.net/2025/02/12/fluid-t</span><span class="invisible">ype/</span></a></p>
Steven Roland<p>Discover how to create fluid typography using Tailwind CSS! Learn to implement responsive text that adapts seamlessly across different screen sizes. <a href="https://mastodon.social/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/ResponsiveDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ResponsiveDesign</span></a><br><a href="https://stevenroland.com/posts/creating-fluid-typography-with-tailwind-css" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">stevenroland.com/posts/creatin</span><span class="invisible">g-fluid-typography-with-tailwind-css</span></a></p>
pablolarah<p>🟢🔴 Fluid typography in design systems: from design to code<br>by @felixoginni at @uxdesigncc <br><a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> </p><p><a href="https://uxdesign.cc/fluid-typography-in-design-systems-from-design-to-code-2b5f46a729b4" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">uxdesign.cc/fluid-typography-i</span><span class="invisible">n-design-systems-from-design-to-code-2b5f46a729b4</span></a></p>
London Web Standards<p>State of the Browser 2024 is 1 month away.</p><p><a href="https://2024.stateofthebrowser.com/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">2024.stateofthebrowser.com/</span><span class="invisible"></span></a></p><p>Tell everyone.</p><p><a href="https://mastodon.world/tags/SotB2024" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SotB2024</span></a> <a href="https://mastodon.world/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.world/tags/WebMidi" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebMidi</span></a> <a href="https://mastodon.world/tags/A11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>A11y</span></a> <a href="https://mastodon.world/tags/Aria" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Aria</span></a> <a href="https://mastodon.world/tags/AssistiveTechnology" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AssistiveTechnology</span></a> <a href="https://mastodon.world/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.world/tags/WebEcosytstem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebEcosytstem</span></a> <a href="https://mastodon.world/tags/Funding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Funding</span></a> <a href="https://mastodon.world/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.world/tags/W3C" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>W3C</span></a> <a href="https://mastodon.world/tags/OWA" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OWA</span></a> <a href="https://mastodon.world/tags/OpenWebAdvocacy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenWebAdvocacy</span></a></p>
London Web Standards<p>We have 2 more speaker to announce for this year's State of the Browser but you're going to have to wait to hear about those.<br><a href="https://2024.stateofthebrowser.com/speakers/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">2024.stateofthebrowser.com/spe</span><span class="invisible">akers/</span></a><br><a href="https://mastodon.world/tags/SotB2024" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SotB2024</span></a> <br><a href="https://mastodon.world/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <br><a href="https://mastodon.world/tags/WebMidi" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebMidi</span></a> <a href="https://mastodon.world/tags/WebAudio" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAudio</span></a> <br><a href="https://mastodon.world/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.world/tags/FluidLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidLayout</span></a> <a href="https://mastodon.world/tags/FluidSpacing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidSpacing</span></a> <br><a href="https://mastodon.world/tags/Browsers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Browsers</span></a> <a href="https://mastodon.world/tags/Funding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Funding</span></a> <br><a href="https://mastodon.world/tags/A11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>A11y</span></a> <a href="https://mastodon.world/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> <br><span class="h-card" translate="no"><a href="https://mastodon.design/@DavidDarnes" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>DavidDarnes</span></a></span> <br><span class="h-card" translate="no"><a href="https://front-end.social/@katiefenn" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>katiefenn</span></a></span> <br><span class="h-card" translate="no"><a href="https://mastodon.social/@Richr" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Richr</span></a></span> <br><span class="h-card" translate="no"><a href="https://toot.cafe/@seaotta" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>seaotta</span></a></span> <br><span class="h-card" translate="no"><a href="https://mastodon.social/@SteveFaulkner" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>SteveFaulkner</span></a></span></p>
Henry Bley-Vroman<p>Excited to share `tailwindcss-fluid-font-size`, a new fluid typography Tailwind plugin.</p><p>I’ve been iterating on Tailwind approaches to fluid typography for a couple years. tailwindcss-fluid-font-size is more flexible and, to me, the most ergonomic and idiomatically “Tailwindy” of the solutions I’ve built or read about.</p><p>Open minded Tailwind haters might even be interested in at least the design.</p><p><a href="https://tailwindcss-fluid-font-size.olets.dev/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">tailwindcss-fluid-font-size.ol</span><span class="invisible">ets.dev/</span></a></p><p><a href="https://hachyderm.io/tags/Tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tailwind</span></a> <a href="https://hachyderm.io/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> <a href="https://hachyderm.io/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://hachyderm.io/tags/CSSClamp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSClamp</span></a> <a href="https://hachyderm.io/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEnd</span></a></p>
pablolarah<p>🟢🔴 Creating Fluid Typography with the CSS clamp() Function<br>by Daine Mawer at @sitepointdotcom <br><a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webfonts</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/dainemawer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dainemawer</span></a> </p><p><a href="https://www.sitepoint.com/fluid-typography-css-clamp-function/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">sitepoint.com/fluid-typography</span><span class="invisible">-css-clamp-function/</span></a></p>
pablolarah<p>🟤🔴 Retrofitting fluid typography<br>Feat.: @creativeboom <br>by Richard Rutter @clagnut <span class="h-card" translate="no"><a href="https://mastodon.social/@Richr" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Richr</span></a></span> <br><a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Typography</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/Responsive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Responsive</span></a> <a href="https://mastodon.social/tags/Utopia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Utopia</span></a> </p><p><a href="https://clagnut.com/blog/2428/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">clagnut.com/blog/2428/</span><span class="invisible"></span></a></p>
zeldman<p><a href="https://front-end.social/tags/HowIDidIt" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HowIDidIt</span></a>: Rebuilding Creative Boom’s article page using&nbsp;Utopian&nbsp;fluid typography: one adaptive design with no media queries, less compromise across viewports, and far less design and development debt.</p><p>♛ Retrofitting fluid typography | <span class="h-card" translate="no"><a href="https://mastodon.social/@Richr" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>Richr</span></a></span></p><p><a href="https://clagnut.com/blog/2428/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">clagnut.com/blog/2428/</span><span class="invisible"></span></a> <a href="https://front-end.social/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://front-end.social/tags/development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>development</span></a> <a href="https://front-end.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdesign</span></a> <a href="https://front-end.social/tags/fluidtype" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fluidtype</span></a> <a href="https://front-end.social/tags/fluidtypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fluidtypography</span></a> <a href="https://front-end.social/tags/adaptivelayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>adaptivelayout</span></a></p>
pablolarah<p>🔵 Utopia SCSS library<br>By Trys Mudford @trysmudford <span class="h-card" translate="no"><a href="https://mastodon.social/@trys" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>trys</span></a></span> <br>To assist developers using SCSS &amp; Utopia, we’ve published utopia-core-scss.<br><a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>typography</span></a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webfonts</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/scss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scss</span></a> </p><p><a href="https://utopia.fyi/blog/utopia-core-scss/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">utopia.fyi/blog/utopia-core-sc</span><span class="invisible">ss/</span></a></p>
pablolarah<p>🟪 Container Query Units and Fluid Typography<br>by Stephanie Eckles @5t3ph<br> <span class="h-card" translate="no"><a href="https://front-end.social/@5t3ph" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>5t3ph</span></a></span> <br><a href="https://mastodon.social/tags/ContainerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQuery</span></a> <a href="https://mastodon.social/tags/ContainerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQueryUnits</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> </p><p><a href="https://moderncss.dev/container-query-units-and-fluid-typography/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">moderncss.dev/container-query-</span><span class="invisible">units-and-fluid-typography/</span></a></p>
pablolarah<p>🟪 Container Query Units and Fluid Typography<br>by Stephanie Eckles @5t3ph <span class="h-card"><a href="https://front-end.social/@5t3ph" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>5t3ph</span></a></span> <br><a href="https://mastodon.social/tags/ContainerQuery" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQuery</span></a> <a href="https://mastodon.social/tags/ContainerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ContainerQueryUnits</span></a> <a href="https://mastodon.social/tags/FluidTypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FluidTypography</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> </p><p><a href="https://moderncss.dev/container-query-units-and-fluid-typography/" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">moderncss.dev/container-query-</span><span class="invisible">units-and-fluid-typography/</span></a></p>
David Hellmann<p>Thanks for the 200 Stars! 😊<br><a href="https://github.com/davidhellmann/tailwindcss-fluid-type" rel="nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/davidhellmann/tailw</span><span class="invisible">indcss-fluid-type</span></a></p><p><a href="https://mastodon.social/tags/tailwind" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwind</span></a> <a href="https://mastodon.social/tags/tailwindcss" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tailwindcss</span></a> <a href="https://mastodon.social/tags/fluidtype" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fluidtype</span></a> <a href="https://mastodon.social/tags/fluidtypography" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fluidtypography</span></a></p>
TrendingLive feeds
About