#webtypography — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #webtypography, aggregated by home.social.
-
Ich hab mal ein Überblicksvideo zu Web-Fonts gemacht, was es da gibt (z.B. Variable Fonts) und wie man die performant und zugeschnitten verwenden kann (Subsetting, Preload-Hints und Format-Konvertierung):
https://youtu.be/6AxuFn0W3Ok#webdev #frontend #webfonts #typography #webtypography #tutorial #subsetting
-
Ich hab mal ein Überblicksvideo zu Web-Fonts gemacht, was es da gibt (z.B. Variable Fonts) und wie man die performant und zugeschnitten verwenden kann (Subsetting, Preload-Hints und Format-Konvertierung):
https://youtu.be/6AxuFn0W3Ok#webdev #frontend #webfonts #typography #webtypography #tutorial #subsetting
-
"As a web developer, you constantly work with text. And you will often make decisions on how this text will look, especially if you work without a designer. Even if you don't notice those choices, they are still here. And, frankly, some of you make bad choices.
In this guide, we'll go over key typography settings and learn how we can manipulate them with CSS to make text on your apps and websites look good by default. This tutorial will be useful for developers that want to get 80% of results with 20% of efforts, without diving head first into typography. It might come handy for people who are already good with typography but didn't work with web closely and want to quickly learn CSS equivalents of familiar concepts.
This article won't cover choosing a particular typeface for your projects or their classification. It will, however, cover what format your font should be in. Additionally, it won't cover topics related to the proper choice of quotes or when to use hyphens versus em dashes. But if you're interested in this kind of stuff, I really recommend Butterick's Practical Typography.
Instead, we'll concentrate on general adjustments to make text good-looking and easy to read, and more specifically, what CSS rules you'll need for that.
Lastly, remember that in design, rules can take you far, but you shouldn't be afraid to break them. Today I'll share some rules and recommendations, but that doesn't mean you can't do things the other way. If you're confident about your choice – please, break the rule! But if you're not sure – stick to sensible defaults."
https://sinja.io/blog/web-typography-quick-guide
#Typography #WebDev #WebDevelopment #WebDesign #FrontEnd #WebTypography #Design
-
✩ Tim Brown’s Flexible Typesetting is now yours, for free!
Required reading in elite design programs, it’s sold 1000s of copies and given a new generation of designers fresh mental models for meaningful, multidimensional typography.
https://tbrown.org/notes/2024/10/26/flexible-typesetting/ #WebTypography #ResponsiveTypography #typography #design #WebDevelopment #ABookApart #WebDesign #UX -
Introducing TODS - a #Typography and #OpenType default stylesheet.
The idea is to have a default #CSS file to set sensible typographic defaults for use on prose text, making particular use of the font features provided by OpenType. -
Explore OlegWock's concise guide on web typography specifically tailored for developers. Dive into the depths of this subject with this enlightening resource. #WebTypography #ForDevelopers https://buff.ly/3Xsj5yT
-
Explore OlegWock's concise guide on web typography specifically tailored for developers. Dive into the depths of this subject with this enlightening resource. #WebTypography #ForDevelopers https://buff.ly/3Xsj5yT
-
I always wanted to implement fluid typography like https://utopia.fyi/ - but I was afraid it wouldn't mix well with the tightly controlled typography I had already implemented...
After watching Matthias Ott's talk from CSS Day 2024 with fluid sine-based typography (https://www.youtube.com/watch?v=su6WA0kUUJE) - I just had to give it a go 😁
The result is _so_ much more satisfying - and it _does_ go well with tightly controlled typography 🤓
Before and after captures:
-
A rare learning opportunity for any web designer who wants to extend the reach of their sites beyond the Western world: Multilingual Typesetting on the Web with Marie Otsuka. A @letterformarchive online workshop. Two sessions: Mon, Jun 3 & Mon, Jun 10, 2024. https://letterformarchive.org/shop/multilingual-typesetting-on-the-web/
#Typography #WebTypography #Multiscript #MultilingualPublishing #MultilingualTypography #MultiscriptTypography #WebFonts #WebDesign
-
A rare learning opportunity for any web designer who wants to extend the reach of their sites beyond the Western world: Multilingual Typesetting on the Web with Marie Otsuka. A @letterformarchive online workshop. Two sessions: Mon, Jun 3 & Mon, Jun 10, 2024. https://letterformarchive.org/shop/multilingual-typesetting-on-the-web/
#Typography #WebTypography #Multiscript #MultilingualPublishing #MultilingualTypography #MultiscriptTypography #WebFonts #WebDesign
-
A rare learning opportunity for any web designer who wants to extend the reach of their sites beyond the Western world: Multilingual Typesetting on the Web with Marie Otsuka. A @letterformarchive online workshop. Two sessions: Mon, Jun 3 & Mon, Jun 10, 2024. https://letterformarchive.org/shop/multilingual-typesetting-on-the-web/
#Typography #WebTypography #Multiscript #MultilingualPublishing #MultilingualTypography #MultiscriptTypography #WebFonts #WebDesign
-
A rare learning opportunity for any web designer who wants to extend the reach of their sites beyond the Western world: Multilingual Typesetting on the Web with Marie Otsuka. A @letterformarchive online workshop. Two sessions: Mon, Jun 3 & Mon, Jun 10, 2024. https://letterformarchive.org/shop/multilingual-typesetting-on-the-web/
#Typography #WebTypography #Multiscript #MultilingualPublishing #MultilingualTypography #MultiscriptTypography #WebFonts #WebDesign
-
A rare learning opportunity for any web designer who wants to extend the reach of their sites beyond the Western world: Multilingual Typesetting on the Web with Marie Otsuka. A @letterformarchive online workshop. Two sessions: Mon, Jun 3 & Mon, Jun 10, 2024. https://letterformarchive.org/shop/multilingual-typesetting-on-the-web/
#Typography #WebTypography #Multiscript #MultilingualPublishing #MultilingualTypography #MultiscriptTypography #WebFonts #WebDesign
-
Suno SLAPS!
I wrote some hiphop lyrics and it delivered:
https://app.suno.ai/song/34c3da33-bb4c-4650-bc3e-a14ace7ffbf4
-
#Development #Releases
WebKit features in Safari 17.4 · Apple ships another noteworthy browser release https://ilo.im/15y66r_____
#Browser #WebApp #WebForm #WebTypography #Media #Frontend #HTML #SVG #CSS #JavaScript #WebAPI -
#Development #Releases
WebKit features in Safari 17.4 · Apple ships another noteworthy browser release https://ilo.im/15y66r_____
#Browser #WebApp #WebForm #WebTypography #Media #Frontend #HTML #SVG #CSS #JavaScript #WebAPI -
#Development #Playgrounds
Techniques to break words · A space to explore word-splitting in a table https://ilo.im/15y4oq_____
#Table #WebTypography #WebDesign #WebDev #Frontend #HTML #CSS -
Want to achieve tight vertical typographical control on the web like this?
The first step is getting to know font-size:
-
Want to achieve tight vertical typographical control on the web like this?
The first step is getting to know font-size:
-
Want to achieve tight vertical typographical control on the web like this?
The first step is getting to know font-size:
-
Want to achieve tight vertical typographical control on the web like this?
The first step is getting to know font-size:
-
New year.
New blog.
First post.The first step to properly aligning web typography is understanding font-size.
-
New year.
New blog.
First post.The first step to properly aligning web typography is understanding font-size.
-
New year.
New blog.
First post.The first step to properly aligning web typography is understanding font-size.
-
New year.
New blog.
First post.The first step to properly aligning web typography is understanding font-size.
-
#Development #Techniques
Baseline grids made easy (finally!) · Better web typography with consistent text alignments https://ilo.im/15xkl3_____
#Design #UiDesign #WebDesign #WebTypography #WebDev #Frontend #CSS -
-
Giulia Laco on the Importance of Typography for Your Websites
« Giulia talks about how designs need to consider the spaces into which text is put. Most people have a proclivity for the order in which they view a page, and knowing about this path across the page can help your readers access the text. The width of the text is also important; you want people to be able to read from side to side without having to move their head. How does this work across different device sizes, and what can be said about text which runs from right to left, or top to bottom? »
#typography #webtypography #graphicdesign
Podcast : https://wptavern.com/podcast/85-giulia-laco-on-the-importance-of-typography-for-your-websites
Article : https://wptavern.com/podcast/85-giulia-laco-on-the-importance-of-typography-for-your-websites
-
#Design #Launches
Variable Font Animator · Craft font animations online and export them as videos https://ilo.im/14prwi_____
#Typography #WebTypography #UiDesign #WebDesign #Tools #VariableFonts #Animation #Recorder #Video #WebM -
#Design #Collections
Mikko’s free fonts · Wide, narrow, bold, curvy, and distinctive open-source fonts https://ilo.im/14fios_____
#Typography #WebTypography #Typefaces #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #Fonts #Glyphs #Free -
#Design #Games
KernType · Learn the art of kerning through an interactive letter spacing game https://ilo.im/14egs2_____
#Typography #WebTypography #UiDesign #WebDesign #Typefaces #Fonts #Kerning -
#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts -
#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts -
#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts -
#Development #Techniques
Adapting typography to user preferences with CSS · Font adjustment to suit your reader’s liking and comfort https://ilo.im/14el4n_____
#WebTypography #Content #Readability #Accessibility #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #MediaQueries #CssCustomProperties #CssNesting #PrefersColorScheme #PrefersContrast #VariableFonts #Fonts -
Thank you @nathan for posting the podcast recording we had at @wceurope in Athens! I really enjoyed the conversation, so many great questions on my favorite topic: #webtypography and #readability
-
#Design #Opportunities
CaseCo: A case for variable fonts · Variable fonts can make a huge difference on your website https://ilo.im/146qxv_____
#Brand #Business #SEO #UxDesign #UiDesign #WebDesign #DesignSystems #CMS #WebPerformance #WebPerf #WebDevelopment #WebDev #Frontend #WebTypography #Typography #VariableFonts #Typefaces #Fonts #Accessibility #A11y #DarkMode #LightMode -
#Design #Collections
Collletttivo · Open-source typefaces of a small group of Italian designers https://ilo.im/13xn8o_____
#UiDesign #DigitalDesign #WebDesign #GraphicDesign #Typography #WebTypography #Typefaces #Fonts #OpenSource -
#Design #Resources
TASA Typeface Collection · Taiwan Space Agency’s modern and versatile typefaces are open source https://ilo.im/140v7t“TASA Explorer is a display typeface referencing Futura, the first typeface that landed on the moon.”
_____
#WebTypography #Typography #UiDesign #WebDesign #GraphicDesign #Typefaces #Fonts #OpenFontLicense #OpenSource #Freebies -
#Design #Resources
TASA Typeface Collection · Taiwan Space Agency’s modern and versatile typefaces are open source https://ilo.im/140v7t“TASA Explorer is a display typeface referencing Futura, the first typeface that landed on the moon.”
_____
#WebTypography #Typography #UiDesign #WebDesign #GraphicDesign #Typefaces #Fonts #OpenFontLicense #OpenSource #Freebies -
#Design #Resources
TASA Typeface Collection · Taiwan Space Agency’s modern and versatile typefaces are open source https://ilo.im/140v7t“TASA Explorer is a display typeface referencing Futura, the first typeface that landed on the moon.”
_____
#WebTypography #Typography #UiDesign #WebDesign #GraphicDesign #Typefaces #Fonts #OpenFontLicense #OpenSource #Freebies -
#Design #Resources
TASA Typeface Collection · Taiwan Space Agency’s modern and versatile typefaces are open source https://ilo.im/140v7t“TASA Explorer is a display typeface referencing Futura, the first typeface that landed on the moon.”
_____
#WebTypography #Typography #UiDesign #WebDesign #GraphicDesign #Typefaces #Fonts #OpenFontLicense #OpenSource #Freebies -
#Development #Introductions
The new @font-face syntax · Pros and cons of using the new vs. now deprecated syntax https://ilo.im/13z8eb_____
#Browser #WebTypography #WebDevelopment #WebDev #Frontend #CSS #VariableFonts #ColorFonts -
#Design #Launches
Kablammo · A nothing but ordinary font that makes the letters bop, bounce, and bloop https://ilo.im/13j8pu_____
#Kablammo #Font #VariableFont #GoogleFont #UxDesign #UiDesign #WebDesign #WebTypography #Typography #Typeface #Animation #Illustration #Comic -
#Design #Resources
Type design resources · Top creative resources for type designers and font lovers https://ilo.im/12kewr_____
#DigitalDesign #WebDesign #GraphicDesign #TypeDesign #Typography #WebTypography #Typeface #Font #WebFont #Books #Magazines #Articles #Talks -
#Design #Launches
Fixel Font · A versatile variable font with two styles, nine weights, and an open license https://ilo.im/12k16z_____
#UiDesign #WebDesign #WebTypography #WebDevelopment #WebDev #Frontend #Typeface #VariableFont #OpenLicense -
#Design #Resources
Tilda Sans · An expressive variable typeface with seven weights and an open license https://ilo.im/12hdqc_____
#UiDesign #WebDesign #WebTypography #WebDevelopment #WebDev #Frontend #Typeface #VariableFont #OpenLicense -
#Development #Techniques
Handwriting with the Canvas API · An alternative way to create custom typefaces and hand-drawn effects https://ilo.im/12gcxa_____
#WebTypography #Handwriting #WebDevelopment #WebDev #Frontend #API #SVG #CSS #JavaScript #Canvas #Typeface #Font #CustomFont -
#Development #Techniques
CSS container query units and fluid typography · New ways to create dynamically calculated typography rules https://ilo.im/12enwp_____
#WebDevelopment #WebDev #WebTypography #Frontend #CSS #ContainerQuery #CustomProperties #CssVariables #WebFont -
#Design #Development #Reviews
Glyphhanger · A way to considerably reduce the file size of a web font https://ilo.im/12bhck_____
#WebDevelopment #WebDev #WebPerformance #WebPerf #WebTypography #Tool #Frontend #Font #WebFont #VariableFont #Subset