# Font A font is a typographic resource whose properties control text appearance and rendering in CSS. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Intel Reverses Decision To Cancel Their Open-Source Font Project DevFeed: [Intel Reverses Decision To Cancel Their Open-Source Font Project]() Original publisher: [Read original article]() Author: Michael Larabel Published: 2026-09-12T13:45:00Z Content type: news Language: en Sources: [Phoronix]() Topics: [Font](), [intel](), [Open Source](), [GitHub]() Tags: [cost](), [desktop-linux](), [developers](), [github](), [intel](), [linux-benchmarking](), [linux-hardware-benchmarks](), [linux-hardware-reviews](), [linux-how-to](), [linux-performance](), [linux-server-benchmarks](), [open-source](), [open-source-graphics](), [phoronix](), [phoronix-test-suite](), [source](), [ubuntu-benchmarks](), [ubuntu-hardware]() ### AI overview Intel reversed its decision to archive Intel One Mono, an open-source monospaced font for developers. The project had been archived after limited recent activity but was restored two days later and will remain maintained. The article also notes the discontinuation or archiving of several other Intel open-source projects. ### Source excerpt Amid Intel cutting back on open-source projects over the past two years as cost cutting measures at the company, their latest open-source project on the chopping block was the peculiar font they developed a few years back. The project was archived this week only to change course two days later... ## 20+ Best Free Fonts Perfect for Art Deco-Inspired Designs DevFeed: [20+ Best Free Fonts Perfect for Art Deco-Inspired Designs]() Original publisher: [Read original article]() Author: Eric Karkovack Published: 2026-09-11T07:15:57Z Content type: article Language: en Sources: [Speckyboy Design Magazine]() Topics: [Font]() Tags: [design](), [display-fonts](), [fonts](), [legibility](), [ligatures](), [logo-fonts](), [post](), [sans-serif-fonts](), [serif-fonts](), [variable-fonts]() ### AI overview A curated collection of more than 20 free Art Deco fonts for designers, covering serif and sans-serif styles with options for logos, headlines, titles, monograms, and branding. The selection includes varied weights, alternate characters, ligatures, and approaches to legibility. ### Source excerpt Are you looking for the perfect free Art Deco font? We have both serif and sans-serif variants, and all will add a touch of elegance to your project. The post 20+ Best Free Fonts Perfect for Art Deco-Inspired Designs appeared first on Speckyboy Design Magazine. ## GIMP 3.2.6 Released With Some Early Preparations Toward Eventual GTK4 Port DevFeed: [GIMP 3.2.6 Released With Some Early Preparations Toward Eventual GTK4 Port]() Original publisher: [Read original article]() Author: Michael Larabel Published: 2026-09-10T22:12:22Z Content type: news Language: en Sources: [Phoronix]() Topics: [Font](), [Security](), [Software](), [macOS](), [bug](), [Linux](), [Windows]() Tags: [bug](), [bug-fixes](), [desktop-linux](), [fonts](), [linux](), [linux-benchmarking](), [linux-hardware-benchmarks](), [linux-hardware-reviews](), [linux-how-to](), [linux-performance](), [linux-server-benchmarks](), [macos](), [open-source-graphics](), [performance](), [phoronix](), [phoronix-test-suite](), [release](), [security](), [software](), [ubuntu-benchmarks](), [ubuntu-hardware](), [windows]() ### AI overview GIMP 3.2.6 has been released with performance improvements for loading many fonts, better responsiveness in text and font-list interactions, early codebase preparations for a future GTK4 port, the ability to use Cut on layer groups, and a new Rotation dynamic painting input for newer Wacom pens. The release also adds a macOS package alongside Linux and Windows packages and includes security and bug fixes. ### Source excerpt The long-awaited GIMP 3.0 release for transitioning from GTK2 to GTK3 only saw its stable release last year. But with GTK4 already being out for years, GIMP developers have begun making some very early preparations toward an inevitable GTK4 port... ## Compose Multiplatform 1.12.0 Released DevFeed: [Compose Multiplatform 1.12.0 Released]() Original publisher: [Read original article]() Author: Elvira Mustafina Published: 2026-08-26T13:28:41Z Content type: release Language: en Sources: [Kotlin : A concise multiplatform language developed by JetBrains | The JetBrains Blog]() Topics: [multiplatform](), [compose-hot-reload](), [MCP Server](), [Model Context Protocol](), [releases](), [Web](), [compose-for-desktop](), [Font]() Tags: [compose-for-desktop](), [compose-for-web](), [compose-hot-reload](), [compose-multiplatform](), [fonts](), [mcp](), [mcp-server](), [model-context-protocol](), [multiplatform](), [releases](), [ui](), [web]() ### AI overview Compose Multiplatform 1.12.0 introduces an experimental MCP server for Compose Hot Reload, enabling AI coding agents to reload applications, inspect rendered UI and semantic trees, simulate interactions, and read logs. The release also adds automatic web font fallback and a more flexible desktop window and dialog API. ### Source excerpt Compose Multiplatform 1.12.0 is out! This version brings new tooling for AI assistants, improvements to web resource management, and finer control over desktop window states. Here are the highlights of this release: For a complete overview of the changes, check out What's new in Compose Multiplatform 1.12.0 or the release notes on GitHub. Get Started [...] ## 25+ Free Minimal Fonts for Modern Design DevFeed: [25+ Free Minimal Fonts for Modern Design]() Original publisher: [Read original article]() Author: Paul Andrew Published: 2026-08-25T15:22:37Z Content type: article Language: en Sources: [Speckyboy Design Magazine]() Topics: [Font](), [Open Source](), [App]() Tags: [branding](), [design](), [display-fonts](), [fonts](), [geometric-fonts](), [legibility](), [logo-design](), [minimal-design](), [monospace-fonts](), [open-source](), [post](), [readability](), [sans-serif-fonts](), [serif-fonts](), [typography-design](), [ui](), [web-fonts]() ### AI overview A curated collection of free minimalist fonts for modern design, covering typefaces suited to branding, logos, posters, print, digital projects, and readable small text. ### Source excerpt A curated collection of the best free fonts for minimalist design. Check out the full round-up and add them to your design library. The post 25+ Free Minimal Fonts for Modern Design appeared first on Speckyboy Design Magazine. ## Moxy - My new programming font DevFeed: [Moxy - My new programming font]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2026-06-16T07:00:00Z Content type: opinion Language: en Sources: [Kaushik Gopal's Site]() Topics: [Font](), [Programming]() Tags: [download](), [files](), [fonts](), [jetbrains](), [ligatures](), [mono](), [plex](), [programming](), [programming-font]() ### AI overview The article introduces Moxy, a programming font built on Recursive with opinionated character choices and fixes, incorporating some glyph ideas from Lilex. It explains the font's customizable character choices and provides installation instructions for the v1 release. ### Source excerpt Every time I switch or try out a new font, I track it in my my-new-programming-font series. Some of the popular ones: IBM Plex Mono, Recursive, Commit Mono, Berkeley Mono. This time's a little different. It's one I've "made" myself, and I'm calling it Moxy. Built on strong bones ## Moxy is built on top of Recursive. It's a stretch to call it a new font -- it's Recursive with a set of opinionated character choices and a few fixes to the original. There's two things I love about Recursive: it's one of the most legible and clear fonts out there it's got flair1 Recursive was also a pioneer in pushing what variable type fonts can do. Another font I've been testing and playing with is Lilex. It's popular again because editors like Zed use it as the default. Lilex is really just IBM Plex Mono with a set of special characters and ligature choices. It's an excellent font in many ways, and one I often find myself switching to. Lilex has a few ligatures I absolutely love for programming. So, with the power of AI coding, I thought to myself: what if I had Recursive but with some of the glyphs of Lilex? Thus was born Moxy. What's different: ## The font ships with my specific Recursive character choices baked in. But you can swap them in and out depending on your preference. Install it ## Download the v1 release, unzip it, and install the .ttf files like any other font. Alternatively, use brew: brew install --cask kaushikgopal/tools/font-moxy People understandably love and swear by JetBrains Mono. They keep asking why I don't cite or bring it up. I love that JetBrains Mono exists, but I find it a "drab" font -- and that's not always a bad thing. When you look at Recursive, it makes a statement. ↩︎ ## Swift at Apple: Migrating the TrueType Hinting Interpreter DevFeed: [Swift at Apple: Migrating the TrueType Hinting Interpreter]() Original publisher: [Read original article]() Author: Scott Perry Published: 2026-06-12T10:00:00Z Content type: article Language: en Sources: [Swift.org]() Topics: [Swift](), [Font](), [Memory Safety](), [Security](), [Memory safety verification](), [Web](), [pdf]() Tags: [apple](), [applications](), [code](), [fonts](), [memory-safety](), [performance](), [security](), [swift](), [web]() ### AI overview Apple describes rewriting its TrueType hinting interpreter from C to memory-safe Swift for Fall 2025 releases. The rewrite addresses the security risks of processing untrusted fonts and reportedly improves performance by 13% on average. ### Source excerpt TrueType is a widely used vector font standard for rendering text in web pages, PDFs, operating systems, and applications. Familiar fonts like Helvetica, Garamond, and Monaco are all built on TrueType outlines. The format specifies a hinting interpreter intended to help outlines rasterize faithfully on low-resolution displays. Modern high-resolution displays enable beautiful typography from outlines alone, but TrueType fonts that need hinting to render legibly remain in use and we continue to support them. Font parsers process data from untrusted sources, making the TrueType hinting interpreter a security-critical attack surface. To make the format more resilient on Apple platforms, we rewrote its hinting interpreter from C to memory-safe Swift for the Fall 2025 releases. In addition to memory safety, we also improved performance: on average, our Swift interpreter runs 13% faster than the C interpreter it replaced. To accompany this post, we've also published the source code of the Swift TrueType hinting interpreter. We hope sharing our experience helps others doing similar work in Swift. TrueType and the hinting engine Apple developed TrueType in the late 1980s and released it with the launch of System 7 in 1991. TrueType was a major breakthrough for the time: it gave font developers enormous control over how glyphs are displayed, with an advanced grid-fitting algorithm and a sophisticated hinting engine built around a special-purpose bytecode interpreter. TrueType did all this on computers that were vastly less powerful than today's, so it had to be extremely well-tuned for performance. Then the internet revolutionized how fonts were used. TrueType became embeddable in PDF files in 1994 and in web pages in 2008, and it remains as relevant as ever. However, these new use cases brought additional risk: TrueType could now be exposed to untrusted fonts from anywhere on the internet. TrueType fonts may contain programs the hinting engine runs through a bytecode interpr ## Web Accessibility Myths: Can a Font Choice Violate the ADA? DevFeed: [Web Accessibility Myths: Can a Font Choice Violate the ADA?]() Original publisher: [Read original article]() Author: Alexa Published: 2025-12-21T07:45:00Z Content type: article Language: en Sources: [Blog-Main]() Topics: [Web Content Accessibility Guidelines](), [Web Accessibility (a11y)](), [Font](), [Accessibility](), [web design]() Tags: [accessibility](), [accessibility-guidelines](), [accessibility-requirements](), [accessibility-ux](), [accessible](), [color](), [fonts](), [legibility](), [sans-serif-fonts](), [serif-fonts](), [wcag](), [web-accessibility](), [web-content-accessibility-guidelines]() ### AI overview This article explains that WCAG and the ADA do not require a specific font family. It distinguishes typeface choice from accessibility requirements involving text resizing, color contrast, and avoiding images of text. ### Source excerpt On December 9th, 2025, U.S. Secretary of State Marc Rubio ordered diplomats to stop using Calibri -- a sans serif font -- and to switch back to Times New Roman. Normally, a change in typeface wouldn't make headlines, but Rubio's department took the unusual step of decrying Calibri as both unprofessional and wasteful. ## Text rendering and effects using GPU-computed distances DevFeed: [Text rendering and effects using GPU-computed distances]() Original publisher: [Read original article]() Published: 2025-11-01T17:20:06Z Content type: tutorial Language: en Sources: [The Last Static Blog RSS]() Topics: [GPU](), [signed distance functions](), [Font](), [Algorithm](), [Mobile]() Tags: [algorithm](), [code](), [compute](), [effects](), [fonts](), [gpu](), [graphics](), [math](), [mobile](), [prog](), [render](), [text]() ### AI overview This tutorial explains how to compute signed distance fields for text glyphs on the GPU. It covers extracting glyph outlines, representing lines and Bézier curves as cubics, implementing the algorithm in a shader, and the trade-offs and effects enabled by the approach. ### Source excerpt Text rendering is cursed. Anyone who has worked on text will tell you the same; whether it's about layout, bi-directional, shaping, Unicode, or the rendering itself, it's never a completely solved problem. In my personal case, I've been working on trying to render text in the context of a compositing engine for creative content. I needed crazy text effects, and I needed them to be reasonably fast, which implied working with the GPU as much as possible. The distance field was an obvious requirement because it unlocks anti-aliasing and the ability to make many great effects for basically free. In this article, we will see how to compute signed distance field on the GPU because it's much faster than doing it on the CPU, especially when targeting mobile devices. We will make the algorithm decently fast, then after lamenting about the limitations, we will see what kind of effects this opens up. Progressive build of the 'あ' glyph from the Mochiy Pop One font Extraction of glyph outlines Non-bitmap fonts contain glyphs defined by outlines made of closed sequences of lines and (quadratic or cubic) Bézier curves. Extracting them isn't exactly complicated: FreeType or ttf-parser typically expose a way to do that. For the purpose of this article, we're going to hard code the list of the Bézier curves inside the shader, but of course in a more serious setup those would be uploaded through storage buffers or similar. Using this tiny program, a glyph can be dumped as series of outlines into a fixed size array: struct Bezier { vec2 p0; // start point vec2 p1; // control point 1 vec2 p2; // control point 2 vec2 p3; // end point }; #define N 42 #define NC 2 const int glyph_A_count[2] = int[](33, 9); const Bezier glyph_A[42] = Bezier[]( Bezier(vec2( 0.365370, -0.570817), vec2( 0.374708, -0.631518), vec2( 0.332685, -0.687549), vec2( 0.339689, -0.748249)), Bezier(vec2( 0.339689, -0.748249), vec2( 0.339689, -0.748249), vec2( 0.344358, -0.764591), vec2( 0.351362, -0.771595)), Bezier(vec2 ## Wear OS Accessibility Considerations DevFeed: [Wear OS Accessibility Considerations]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-09-06T07:38:33.218000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Android](), [Compose](), [screen](), [Font]() Tags: [accessibility](), [accessible](), [android](), [compose](), [screen]() ### AI overview A discussion of accessibility considerations for Wear OS apps, focusing on how the small form factor differs from phones and tablets. It explains why TalkBack remains a major focus and highlights built-in components, content descriptions, and list behavior. ### Source excerpt Lately, I've been learning about Wear OS development. As I'm also an accessibility specialist, I've naturally also been looking into the accessibility aspects of Wear OS. The small form factor impacts many things typically associated with accessibility. Not everything can work, or is working, the same as with, for example, phones and tablets. It's been fascinating to dive into the topic and learn more about it. In this blog post, I'll give pointers on Wear OS accessibility and share some of the learnings I've had. For transparency, I must note that my perspective is very Pixel-y, as I have a Pixel Watch 3. Let's dive in! Screen Reader Seems to Be on the Main Stage Most of the available documentation about Wear OS accessibility focuses on making apps accessible for screen reader users. The Accessibility on Wear OS-page first mentions font size and rotary input (which we'll discuss later in this blog post), and then proceeds to optimizing apps for TalkBack (the built-in screen reader), which takes up most of the page. And I'm not surprised - that's the case with most of the accessibility documentation for any platform. And don't get me wrong, screen reader accessibility is important, but there's often this misconception that that's all accessibility is. However, it's not just screen readers - there are many other sides to it. In Wear OS's case, however, I think that it might even be warranted to keep the screen reader accessibility on the main stage of the accessibility documentation. The reason for that is that many other things work out of the box. I mean, of course, there are ways to make them not work, but unless you're misusing components, most of the things work. The "Optimize your app for Talkback" section in the forementioned documentation comes down to basics: Use built-in components, as they already have the semantics, accessibility actions, focus handling, etc. included. Add content descriptions to tiles and complications. Tip! If you're wondering what to w ## 5 Useful CSS functions using the new @function rule DevFeed: [5 Useful CSS functions using the new @function rule]() Original publisher: [Read original article]() Published: 2025-08-13T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS functions](), [CSS](), [Design system](), [Font]() Tags: [code](), [css](), [css-functions](), [design](), [examples](), [fonts](), [properties](), [syntax](), [tricks](), [typography]() ### AI overview A tutorial demonstrating five practical uses for CSS custom functions introduced with the new @function rule. The examples cover negating values, creating opacity variants, fluid typography, and conditionally rounded borders, with emphasis on clearer and more organized CSS. ### Source excerpt CSS custom functions are a gamechanger. Here are 5 really useful examples. ## Practice, a book on design and craft by Figma DevFeed: [Practice, a book on design and craft by Figma]() Original publisher: [Read original article]() Author: Amber Bravo Published: 2025-05-07T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Font](), [App]() Tags: [2025](), [articles](), [book](), [design](), [figma](), [graphic-design](), [innovation](), [inspiration](), [technologies]() ### AI overview Figma presents Practice, its third annual Config magazine, as a book about design and craft. The article explains how Other Means and type designer Kia Tasbihgou combined historical bookmaking references with contemporary visual design, and extended the book's drop caps into a complete typeface showcased on Figma Sites. ### Source excerpt What does it take to master craft? Patience, precision, and a willingness to push boundaries. ## NixOS Logo and Branding Update DevFeed: [NixOS Logo and Branding Update]() Original publisher: [Read original article]() Author: NixOS Published: 2025-04-28T11:00:00Z Content type: release Language: en Sources: [NixOS Announcements]() Topics: [NixOS](), [Documentation](), [Font]() Tags: [branding](), [documentation](), [logo](), [nixos](), [update]() ### AI overview This announcement reviews the history of the NixOS logo and explains inconsistencies and ambiguities in its design and documentation, including geometry, gradients, logo anatomy, clearspace, and font guidance. ### Source excerpt History The NixOS logo was originally designed by Simon Frankau for Haskell as part of the 2009 Haskell logo contest. Simon kindly gave permission for the design to be used by the NixOS project, and it was made official in November 2009. In 2015, a new version of the logo with a "hexagon design" was created by Tim Cuthbertson and added to the homepage. In March of 2017, it officially superseded the previous logo and was added to the nixos-artwork repository. Over the years, there have been many updates to the logo and repository, including: Converting the logotype to paths, removing the dependency on users having the designated font installed. Adding documentation about the font used to create the logotype, guide layers, and colors Introducing various logo variants, including a vertical variant, an all-white variant, and a rainbow variant Motivation to change An incredible amount of work has gone into creating and improving the logo and its documentation. However, it suffers from some inconsistencies and many parts of it are still ambiguous. The image below is a zoomed in view of the bottom of the NixOS logo with a horizontal line drawn starting at the bottom left of the snowflake. If you open the image and zoom in, you will see that the edges of the snowflake are not parallel to the horizontal line. Additionally, the edges of the snowflake are not collinear with each other. A zoomed in view of the bottom of the NixOS logo showing that the lambdas are not collinear or flat. The image below shows the paths that define the gradient for the lambdas. There are two gradient definitions that are different and ideally they would be the same. A view of the NixOS logo source showing two gradient definitions ## The Accessibility Problems Caused by Incorrect Text Truncation in Android Apps DevFeed: [The Accessibility Problems Caused by Incorrect Text Truncation in Android Apps](<https://devfeed.tech/articles/the-problem-of-trun-38505.md>) Original publisher: [Read original article](<https://eevis.codes/blog/2025-04-26/the-problem-of-trun/>) Author: Eevis Panula Published: 2025-04-26T07:31:38.151000Z Content type: article Language: en Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>) Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Android](<https://devfeed.tech/topics/android.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>), [Font](<https://devfeed.tech/topics/font.md>), [Large Screen](<https://devfeed.tech/topics/large-screen.md>) Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [android](<https://devfeed.tech/tags/android.md>), [cognitive-load](<https://devfeed.tech/tags/cognitive-load.md>), [text](<https://devfeed.tech/tags/text.md>), [users](<https://devfeed.tech/tags/users.md>) ### AI overview The article examines how Android apps truncate text with ellipses when it does not fit, often without a way to expand the hidden text. It argues that this can prevent users, especially those using larger font sizes or smaller displays, from accessing important labels and context. ### Source excerpt Imagine that you're in an unfamiliar location. You can see a signpost, but it's old, and most of the letters of the words have been scratched off. The names in the signs all seem similar, given the couple of letters you can see. And you need to get somewhere, but the signpost is not helping at all. You're lost. As the title gives away, I'm writing about something starting with ) Original publisher: [Read original article]() Author: Matt Kane; Florian Lefebvre; Emanuele Stoppa; Nate Moore Published: 2025-04-15T00:00:00Z Content type: release Language: en Sources: [The Astro Blog]() Topics: [Astro](), [API](), [Font](), [SVG](), [Core Web Vitals]() Tags: [api](), [astro](), [components](), [core-web-vitals](), [experimental](), [fonts](), [google](), [performance](), [shopping](), [state](), [svg](), [web-apis]() ### AI overview Astro 5.7 introduces stable Sessions and SVG components, plus an experimental Fonts API. The Fonts API supports local fonts and built-in providers with automatic optimizations, while Sessions securely store server-side user data across Astro features. ### Source excerpt Astro 5.7 has a basketload of treats, including stable Sessions and SVG components and a new Experimental Fonts API. ## How to enable custom fonts in Obsidian Mobile DevFeed: [How to enable custom fonts in Obsidian Mobile]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2025-02-05T08:00:00Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Obsidian](), [CSS](), [Font](), [Electron]() Tags: [css](), [fonts](), [how-to](), [snippet]() ### AI overview A tutorial showing how to enable custom fonts in Obsidian Mobile by converting a font file to base64, embedding it in a CSS snippet, and entering the custom font name in Obsidian's appearance settings. The author reports that the method works on mobile and can also be configured on desktop and synced. ### Source excerpt One of the challenges with note taking apps on mobile is the limited font selection. While desktops let you install custom fonts system-wide, mobile platforms are much more restrictive. However, there's an elegant solution for Obsidian given it's an electron app. Obsidian allows you to inject a CSS snippet to tweak the appearnace of the app. CSS allows you to embed base64 encoded fonts directly in them for styling text 💡. I figured let's try this and see if it works on mobile. Works like a charm! Here's how to do it: 1. convert your font1 file to base64 and store in the clipboard ### # do this on a terminal app base64 -i | pbcopy 2. Create a new CSS snippet in Obsidian (Settings > Appearance > CSS snippets) and add your font declaration: ### @font-face { font-family: custom-font-name; font-weight: 350 900; src: url(data:application/octet-stream;base64,); } Remember to enable the snippet after creating it. Also font files can get large when converted to base64. So you're not going to be able to type out that encoded string. 3. Activate custom font in Obsidian ### Under Settings > Appearance > (Text|Monospace) Font, enter "custom-font-name". It won't show up in the dropdown but if you type the name exactly, you'll see a checkmark after a second and your new font is enabled. I typically do the above on my desktop and sync settings to my mobile. But nothing stops you from doing it directly on your mobile (if you don't have sync enabled). I now have my favorite reading font applied across my notes on mobile and my favorite monospace one applied to all the code in them! Obsidian on Android with custom fonts I encoded a variable font for convenience so i didn't have to declare italicized, bolded, etc. versions of the font. ↩︎ ## Change font-weight based on the user's screen DPI DevFeed: [Change font-weight based on the user's screen DPI]() Original publisher: [Read original article]() Author: Stanko Published: 2025-02-03T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Font](), [CSS](), [Media Queries](), [pixel](), [User Experience](), [Web Development]() Tags: [accessibility](), [browser](), [css](), [fonts](), [pixel](), [user-experience]() ### AI overview This tutorial explains that thin font weights can become blurry and difficult to read on low-DPI screens. It demonstrates progressive enhancement with CSS media queries: use a more readable default weight for low-DPI displays and apply a thinner weight on high-DPI displays. The technique can also be applied to font size and icon line width. ### Source excerpt A lot of us as developers have hi-DPI screens, and we can easily forget to test the websites we build on low-DPI screens. One common issue I noticed is that thin font weights can be hard to read on low-DPI screens. Since there are fewer pixels to render details, fine lines can appear blurry due to anti-aliasing. Here is an example of the same text rendered on two screens with different device pixel ratios. At the top is a hi-DPI screen (with a pixel ratio of 2), and below is a low-DPI screen (with a pixel ratio of 1). The font used is Inter, 24px tall, with a font weight of 100. This problem is a great example of how we can use progressive enhancement to improve the user experience. We'll set a default font weight that is readable on low-DPI screens, then use CSS media queries to target hi-DPI screens and apply thinner fonts. Here is a code example: // Default font weight for low-DPI screens h1 { font-weight: 300; } // Progressive enhancement for hi-DPI screens // Making font thinner and more elegant @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { h1 { font-weight: 100; } } This will set the font weight to 300 on low-DPI screens and 100 on hi-DPI screens. Feel free to adjust these values as needed. Additional applications # This is an example using font weight, but you can apply the same technique to other properties, such as font size or icon line width. Simulating low-DPI on Mac # This is a great tip from StackOverflow: Open System Settings > Accessibility > Zoom > Advanced > Uncheck "Smooth Images" Zoom out your browser to 50% Turn on the system Zoom (the default shortcut is Option + ⌘ + 8) This should give you a good idea of how your website appears on a low DPI screen. Sorry, Windows and Linux users! If you have a good solution for your system, please open a GitHub issue, and I'll add it here. ## Figma 2024: We shipped it, you shaped it DevFeed: [Figma 2024: We shipped it, you shaped it]() Original publisher: [Read original article]() Author: Figma Published: 2024-12-04T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Artificial Intelligence](), [Font](), [Canvas]() Tags: [ai](), [community](), [core](), [design](), [feature](), [figma](), [releases](), [typography](), [ui](), [updates](), [workflows]() ### AI overview Figma reviews its 2024 releases, highlighting the UI3 redesign, AI-related improvements, Figma Slides, multi-edit, typography enhancements, and community-driven product development. ### Source excerpt From flagship features to little big updates, we take a look at how you shaped what we shipped in 2024. ## My new programming font - Commit Mono DevFeed: [My new programming font - Commit Mono]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2024-09-21T07:00:00Z Content type: opinion Language: en Sources: [Kaushik Gopal's Site]() Topics: [Font](), [Programming](), [Website]() Tags: [programming](), [programming-font]() ### AI overview The author shares Commit Mono as their primary programming font, announces that the website now uses it for code, and notes that they customized some characters. ### Source excerpt I've been using this font for a while as my primary programming font and referenced it in one of my newsletters. Thought i'll share this more prominently. This website now uses Commit Mono for code. I customized a few of the characters: There are better ways to design than putting a big effort into making something look special. Special is generally less useful than normal, and less rewarding in the long term. Special things demand attention for the wrong reasons, interrupting potentially good atmosphere with their awkward presence. -- Jasper Morrison, Super Normal Manifesto ## Font Size Considerations for Accessibility DevFeed: [Font Size Considerations for Accessibility]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2024-02-02T03:45:42.565000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Font](), [Android](), [Testing](), [Compose]() Tags: [accessibility](), [android](), [blog-post](), [testing]() ### AI overview This article explains why accessibility work should address more than screen readers, focusing on font sizing in Android apps. It discusses how larger font settings can cause text to overflow or be clipped and introduces testing with device settings, emulators, and Compose previews. ### Source excerpt Discussions about accessibility, especially in software development, often center around screen reader accessibility. With that, I mean that if accessibility is considered, it's mostly about, for example, content descriptions, setting correct semantics, and then leaving it there. Don't get me wrong, it is important. But the problems arise when only taking these actions for accessibility and calling it done. In some apps, those actions also bring many good things for other users. But in others, many issues that create barriers to usage can be missed if the attention is only on screen reader-related accessibility. In this and a couple of future blog posts, I'll share some things you can check to find accessibility issues, and suggest ideas for fixing them. As you might guess, these are not related to screen reader accessibility. This first blog post is about font sizing. By the way, I'm currently writing my master's thesis, and its goal is to create an accessibility checklist for Android devs to help create more accessible Android apps. The initial checklist is live, and I'm collecting feedback, so if you want to help me, check the Android Accessibility Checklist and then answer a couple of questions in this Google Form. I'm really, really thankful for anyone participating! Alright, let's get started. Font Size One interesting thing related to font sizing is that about 25% of Android users increase the font size. (source: Appt.org) So this is a big group of our users! Sometimes, accessibility is dismissed because it's said to be something that concerns only a small group of users. A quarter of the user base is already a considerable amount of users - actually, it can be bigger than, for example, some language your app supports. But if the user increases font size, it might cause problems with, for example, text overflowing or being clipped. We will explore some of these issues later in this blog post, but first, let's talk about how to test your app for different font ## Top 10 things we shipped this year DevFeed: [Top 10 things we shipped this year]() Original publisher: [Read original article]() Author: Jenny Xie Published: 2023-12-07T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Font]() Tags: [component](), [dev](), [developers](), [experiment](), [features](), [figma](), [fonts](), [library](), [product-development](), [prototyping](), [updates]() ### AI overview Figma highlights ten favorite updates released in 2023, including Dev Mode, font picker previews on the canvas, and component details and playground features that support developer handoff, iteration, and experimentation. ### Source excerpt From the Handoff Hero to the Scroll-Stopper, we crown our favorite updates among the quality-of-life improvements and spotlight-stealing features rolled out in 2023. ## Slashed 0 in IBM Plex - freeze alt. characters in otf fonts DevFeed: [Slashed 0 in IBM Plex - freeze alt. characters in otf fonts]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2023-11-27T01:41:42Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Font](), [ibm](), [Open Source](), [Zsh]() Tags: [commands](), [fonts](), [ibm](), [install](), [open-source](), [plex]() ### AI overview This tutorial explains how to permanently enable selected alternative glyphs in an OpenType font. Using IBM Plex Mono as an example, it covers obtaining the complete OTF file, identifying stylistic character sets, and using pyftfeatfreeze to generate a customized font variant. ### Source excerpt OpenType fonts have font features or variants that you can use to represent certain characters differently. For example, my beloved IBM Plex Mono1 has quite a few alternative glyphs to pick from: I prefer the single story "g" and slashed "0" characters for clarity. But you'll find no obvious way to turn these version of the characters on permanently. After searching and trying quite a few ways to do this, I found an approach that works pretty well. This blog post will explain how you can pick alternative characters that come with certain open type fonts like IBM Plex Mono and build a version of the font that will permanently switch these alternative character variants on. Step 1: obtain the complete .otf font file ## It's important to have your source .otf file have the complete list of characters. If your font doesn't have these to begin with, this approach will not work. As an example, IBM Plex Mono's full otf can be downloaded here. Step 2: identify the alternative character sets you want ## Upload your font to wakamaifondue.com. You'll get a neat summary of your font and all the available features variants. Step 3: use pyftfeatfreeze ## pyftfeatfreeze is a fantastic open source tool that allows you to create a new version of your font with the specific set of alternative characters chosen. Here's the entire set of commands I used to generate my variant of IBM Plex Mono: #!/bin/zsh fontSuffix="KG" # create a new directory for your font mkdir -p "IBM-Plex-Mono-$fontSuffix" # change to directory that has original otf font cd IBM-Plex-Mono # install the tool pipx install opentype-feature-freezer # Pick the right combination of stylistic characters # By default IBM Plex Mono ships: # Regular - styled g; styled a (with caps) # Italic - plain g ; plain a (without cap) # I prefer keeping it all consistent # so I change my italic fonts to also have the styled versions of g/a # In the non-italic versions of IBM Plex Mono, change # ss03 - slashed 0 for f in $(fd -HI ibmple ## Recursive: An Open-Source Monospaced Font for Programming DevFeed: [Recursive: An Open-Source Monospaced Font for Programming]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2022-08-19T07:00:00Z Content type: opinion Language: en Sources: [Kaushik Gopal's Site]() Topics: [Font](), [Open Source](), [Programming](), [macOS]() Tags: [download](), [fonts](), [macos](), [open-source](), [programming-font]() ### AI overview The author describes Recursive as a legible, high-quality monospaced programming font released by ArrowType in early 2020. The article highlights its open-source nature and shares the author's personal customizations and download options. ### Source excerpt I'm always looking for legible, high-quality monospaced fonts for programming. I started with IBM Plex Mono, dabbled with a few others like Input Mono, even built a few from source like Iosevka, fell in and out of love with various others. In early 2020, the foundry ArrowType released Recursive which has now become my daily driver. Your browser doesn't support HTML5 video. Download the video instead. What really got me hooked with Recursive -- besides it being a gorgeous typeface -- was the fact that it was open source and you could build it from source yourself (like Iosevka). Here are the customizations I've made for myself: Download Recursive ## I could keep extolling the virtues of this font but if you're curious to just download and try it, here's a couple of ways: Go to the main website and hit the big blue "Get" button. If you prefer my variant and are on MacOS: brew install --cask kaushikgopal/tools/font-recursive-kg Or just download it here. ## Google Fonts Pairings for Use in Figma DevFeed: [Google Fonts Pairings for Use in Figma]() Original publisher: [Read original article]() Published: 2022-06-02T13:00:00Z Content type: article Language: en Sources: [Material.io - Material Design]() Topics: [Font](), [Figma](), [Google]() Tags: [figma](), [fonts](), [google]() ### AI overview A collection of handpicked Google Fonts pairings that can be used in Figma. ### Source excerpt See our handpicked Google Fonts pairings in use, and start using them now in Figma [Next page]()