15 ms·
Color fonts on Google Fonts
- one-more-minute 4y agoA nice example, not currently available on Google fonts AFAICT, is 'Gilbert': https://www.typewithpride.com https://www.typewithpride.com
- bufferoverflow 4y agoHow is it "nice"? It's almost unreadable.
- jtolmar 4y agoIt's clearly a title font. If someone uses that as a body font, it's hopefully a shitpost.
- lifthrasiir 4y agoIn fact, its design choice is questionable even as a title font. Normally the text color will be chosen so that it has enough contrast compared to the background. With color fonts you can't always change the text color, but you can still change the background. Gilbert however contains all hues in a single glyph, so some part of each glyph is always going to be hard to distinguish from the background without much care.
- bool3max 4y agoLooks extremely unreadable and ugly. Guess that's what happens when you're tasked with creating a font based on the "rainbow flag".
- anvic 4y ago
- derbOac 4y agoThat is a beautiful font. Is it distributed in the same format as what's discussed in the material.io post (COLRv1)? It's still a good example of what's possible; I'm just curious.
- lifthrasiir 4y agoThere is also a Hangul adaptation of Gilbert called Gilbeot [1]. It also has an interesting feature that censors words that discriminate LGBT people (akin to Sans Bullshit Sans). I do have a feeling that they are clearly decorative and yet still being overused for non-heading text, maybe this is a major problem with many color fonts. [1] https://rainbowfoundation.co.kr/gilbeot https://rainbowfoundation.co.kr/gilbeot
- nokeya 4y agoReminds me WordArt from MS Office
- deleted 4y ago[deleted]
- s1mon 4y agoUnfortunately there is no support for COLRv1 fonts on Safari (desktop or mobile).[0] There is support for COLRv0, so hopefully this will come to Safari/Webkit at some point.[1] [0] https://www.lambdatest.com/web-technologies/colr-v1 https://www.lambdatest.com/web-technologies/colr-v1 [1] https://www.lambdatest.com/web-technologies/colr https://www.lambdatest.com/web-technologies/colr
- onion2k 4y agoUnfortunately there is no support for COLRv1 fonts on Safari (desktop or mobile). The expectation that every user get's exactly the same experience regardless of what browser they're using has held the development of great user experiences on the web back for about two decades now. There's no reason why you shouldn't deliver a better experience for some users if their browser is more capable. Design a working minimal app. It'll probably be close to a plain HTML and CSS site that's rendered on a server. Then add in things that make it nicer to use while checking that the browser supports that feature so you don't break anything if it doesn't. Build up to a really nice experience. Progressively enhance the usr experience. This is literally how websites were built 20 years ago, but then developers got lazy and only wrote apps for the lowest common denominator, which meant any new features in browsers rarely good used, and at the same time slightly unusual browsers like Lynx got abandoned entirely. It really annoys me.
- wdb 4y agoOr Chrome shouldn't force a new colour font standard, they keep doing it, they could at least make sure creative tools has support for it.
- alberth 4y agoOff topic: why does Google use "material.io" as a domain to publish too?
- b3nji 4y agoNice, Word Art is back!
- ilaksh 4y agoIt's almost like the font package and rendering are the equivalent of "The New Print Shop" but much better.
- ilaksh 4y agoHm. I think it may now be possible to encode an entire NFT collection in a font. Anyway, hopefully Firefox will add support for COLRv1, at least for some platforms. FreeType has it apparently.
- wdb 4y agoNo word about the creative tools supporting this format?
- machina_ex_deus 4y agoAn interesting idea for a color font is a terminal font automatically supporting terminal colors (by the terminal escape characters). Sometimes you just pipe your output somewhere which isn't a real terminal, and having color support would be nice if all you needed to do was change fonts.
- TruthWillHurt 4y agoAmazing to see people doing such important work. As an engineer I should really step aside and let these guys run the internet.
- TruthWillHurt 4y agoThis site turned to a techdouche entrapanubro haven.
- amelius 4y agoAdd this to the list of falsehoods programmers believe about fonts.
- simondotau 4y agoAnything more complicated than ASCII text in a single monospace font is literally impossible to implement and nobody should ever attempt it.
- Jack5500 4y agoGoogle Fonts is still unlawful in Germany because it violates the DSGVO by leaking the IP to Google without user consent.
- zebracanevra 4y agoThat sounds like the entire internet is unlawful. How would a German access any content outside of Germany without going through the tens-hundreds of intermediate routers? There's nothing stopping those routers from logging IPs going through them.
- kmeisthax 4y agoThe issue isn't the existence of intermediary routing, it's the export of data outside the EU by an EU site. A German resident that wants to access Google or any other US site is fine. The packets are allowed to exit the EU because that's what they asked for. Using Google Fonts means that your EU users have to access Google, a US company, in order to read your site. Most browsers are configured to do this automatically and opting-out of that would be time-consuming and break the whole web. And using Google Fonts gives Google the unprecedented ability to snoop on third-party sites. Yes, they have promised not to do this, but their host government has also promised to break Google's promise for them. Taking that same logic and applying it to intermediary routing, the only time in which you'd have a GDPR export case is if you tried to access an EU website and your traffic was rerouted into the US or China. Which actually happens way more often than it should.
- wildrhythms 4y ago>using Google Fonts gives Google the unprecedented ability to snoop on third-party sites What 'snooping' is happening during a CSS import?
- kmeisthax 4y agoHosting a subresource of another website gives you `Referer`, at the very least. And the set of fonts requested is fingerprintable even if your browser didn't send that header. You can also fingerprint the browser further to tie that information into your ad profiles. Google promises explicitly to not do this, and I believe them. However, they can still be compelled by law enforcement to break their own promise, and that's what the EU is reasonably angry about.
- EmilyHughes 4y agoOnly the arabic ones look decent. The latin ones remind me of word cliparts.
- mdrzn 4y agoThey really do look like WordArt and ClipArt from 2003, maybe it's the color choices?
- smoe 4y agoTo me it's is not necessarily just the colors, but that with the Arabic script the new features are applied in a more tasteful, subtle way. Whereas the latin examples seem more like showing off what you could do, but probably shouldn't.
- nicoburns 4y agoThe emoji ones also seem to work quite well
- rikroots 4y agoI've posted this link before (as a ShowHN) - this is my attempt to "replicate" color fonts using my JS canvas library. Getting the effects to be both responsive and amenable to user accessibility choices, while also including ways for developers to adapt the effects via CSS and/or HTML data- attributes ... it's frustrating work. But at least they look pretty. https://scrawl-v8.rikweb.org.uk/demo/snippets-006.html https://scrawl-v8.rikweb.org.uk/demo/snippets-006.html
- morley 4y agoDesign is highly contextual, so I think it'll depend a lot on how they're used. These fonts seem a lot more polished than what you would find in old-school clip art packs. I can imagine some interesting use cases for these. And even if these fonts don't hit, people will make more!
- simondotau 4y agoOn a vaguely related note, I recall that classic Macintosh, sometime in the 1990s, had (possibly unofficial and/or hackish) operating system support for colour bitmap fonts. But I can't find any reference to this on Wikipedia or Google searches. I wonder if anyone else remembers this; perhaps there's an opportunity to document/archive something about typography which might otherwise get forgotten.
- marbletiles 4y agoI think you're thinking of the Amiga, which had support for ColorFonts – the Kara collection was made famous by Deluxe Paint
- LocalH 4y agoEven there, colorfont support was not part of the OS until 2.0 (or maybe 2.1, can’t remember). In the 1.x days you had to load the ColorFont wedge before you could use them
- simondotau 4y agoIn this instance I'm definitely talking about Macintosh.
- aspyct 4y agoI love the retro vibe of their isometric "Nabla" font :D
- ape4 4y agoWill this be abused like the <marquee> tag and animated gifs.
- dustinmoris 4y ago
- xrd 4y agoI'm surprised at how fun this article is, and how gorgeous fonts can look. And, it makes me, at least for a few seconds, want to switch back to Chrome from Firefox.
- pjerem 4y agoIt works perfectly on Firefox :) https://fonts.google.com/specimen/Nabla https://fonts.google.com/specimen/Nabla
- distantsounds 4y agoah, Clipart has found a new home!
- netmare 4y agoFor some reason Google Fonts rendering is just awful on my (Windows) machines. I tried to investigate, but got nowhere. They seem extremely jaggy and with uneven strokes, like they were only tested on 4K displays. I don't have the budget to go beyond 1080 at the moment. This has made me extremely averse to them, to the point where I simply avoid sites using them. And now they add color...
- its_bbq 4y agoThese are all vector fonts, I wonder if they'll work better for you
- kuschku 4y agoThe maximum size at which 1080p (2K) works is 23". The maximum size at which 1440p works is 30". The maximum size at which 2160p (4K) works is 40". If you’re using a larger size than the ones given above for a given resolution, you will have less than 96dpi, leading to fonts that break or become too thin, and icons that will be less recognizable. ________________________ P.S.: The same can be said for colors. While any CRT in the 90s but even early LCDs like the Fujitsu SIEMENS P17-2 from 2004 (now 30€ on eBay) gets 100% sRGB, full 8-bit colors at exactly 96dpi, many gaming monitors don’t even manage this today. There are still gaming monitors, 1080p at 30" or even 32" using 6-bit panels with FRC that barely hit 70% sRGB on sale today.
- raphlinus 4y agoCan you send me some screenshots? Very possibly you have some ClearType parameters set wrong on your system. We absolutely do test on 1080p (though I admit my work machines are all retina/4k at this point).
- bogwog 4y agoNext up is sound and interactivity in emojis, including a custom emoji scripting language and emoji platform, and then the inevitable "DOOM ported to emoji" projects. And of course, web browsers and text rendering become increasingly more complex and expensive to build/maintain because Google single-handedly decided it.
- pradn 4y agoAfter seeing the beautiful new Arabic fonts in this post, I can't go back to being happy with just simple text for the web. We're still so far from the beauty of calligraphy and even old metal typefaces, with their ligatures and all. We have to dream bigger.
- ilaksh 4y agoBrowsers are already at the level of complexity of operating systems.
- dom111 4y ago> DOOM ported to emoji Makes me think of Fontemon: https://www.coderelay.io/fontemon.html#player https://www.coderelay.io/fontemon.html#player https://github.com/mmulet/code-relay/blob/main/markdown/HowIDidIt.md https://github.com/mmulet/code-relay/blob/main/markdown/HowI... Perhaps combining this COLRv1 spec and the prior art it's doable today! https://github.com/mmulet/font-game-engine https://github.com/mmulet/font-game-engine
- cercatrova 4y agoRelated, EmojiCode (https://www.emojicode.org https://www.emojicode.org)
- manmal 4y agoTrue Type fonts have been Turing complete for a while. You‘d need to implement a small TT OS first, of course.
- miohtama 4y agoWhile the parenrt is an ironic comment, color fonts were a staple of computer graphics design during 90s and palettized graphics like VGA 320x200x256 mode. The art was lost with TrueType and now it is coming back. People who have used Deluxe Paint Animator remember this.
- traverseda 4y agoWhat's up with svg fonts? I suppose this is a binary format, and presumably smaller and faster to parse than compressed SVG fonts, but I admit I'm a bit surprised that this isn't an improvement to an existing SVG font ecosystem and is instead it's own thing. It seems that if this was legitimately useful (instead of just one more thing competitors are obligated to spend money on implementing) we'd have seen SVG fonts used for it already.
- CharlesW 4y agoSVG fonts are OpenType fonts, and my understanding is that new-ish support for SVG tables in OpenType fonts is what enables this. https://color.typekit.com/ https://color.typekit.com/ https://docs.microsoft.com/en-us/typography/opentype/spec/svg https://docs.microsoft.com/en-us/typography/opentype/spec/sv... https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html https://helpx.adobe.com/fonts/using/ot-svg-color-fonts.html "OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts”. OpenType-SVG fonts allow text to be shown with these graphic qualities, while still allowing it to be edited, indexed, or searched. They may also contain OpenType features that allow glyph substitution or alternate glyph styles."
- gardaani 4y agoSVG Fonts have never had good support in web browsers. SVG-in-OpenType fonts has some support, for instance in Firefox. Google Chrome teams refuses to implement SVG-in-OT. Instead, they wanted to implemented their COLRv1. https://bugs.chromium.org/p/chromium/issues/detail?id=306078#c18 https://bugs.chromium.org/p/chromium/issues/detail?id=306078...
- Beltalowda 4y agothe Mozilla position on COLRv1 is "Provides comparable design capabilities to OpenType-SVG, but in a more compact and lightweight form that integrates better into font rendering pipelines. Has the potential to supersede OpenType-SVG fonts in web use." So this seems like a good thing overall. Note that Firefox doesn't support it at this time.
- teknopaul 4y agoI can imagine the only people excited about this are G O o g L E
- msoad 4y agoThe gradient should look amazing for Chinese/Japanese/Korean stroke-based scripts. I can't wait to see them being developed. The Arabic scripts look amazing! Gradient support is bigger than color support imo
- ComputerGuru 4y agoThe Arabic scripts are breathtaking but I had some difficulty discerning the Reem Kufi examples. It might be just me, but I've never seen the right+left connected ع drawn that way in Kufi scripts. It seems both alien and a poor match for the rest of the characters in the Reem Kufi fonts - I first thought it was a ligature error!
- khaled 4y agoReem Kufi designer here, that is the original form of ع in Arabic and the only form used in manuscript Kufi. Kufi-inspired typefaces often use the more familiar form from later calligraphic styles. Reem Kufi has an alternate form as well, but it is not the default.
- ComputerGuru 4y agoThanks for the explanation, Khaled! I have some reading to do! Beautiful work, thanks for releasing these fonts and for sharing this info.
- nathancahill 4y agoSeeing the Arabic script and knowing the technology behind it that makes it possible to render is one of those rare "wow" moments for me.
- masswerk 4y agoI quite disliked the Latin fonts at first sight, but I like the Arabic ones just as much as I dislike the former. An occasion to contemplate that what may be not that great in the context of Western culture may be still a great thing and useful for another one.
- hoseja 4y agoArab calligraphy is really pretty.
- mfwit 4y agoWordart in 2022.
- malshe 4y agoThere are a few nice color fonts I have used in the past. One of my favorite is Raleway Color Semibold by Vidhunnan Murugan: https://typewithraleway.firebaseapp.com https://typewithraleway.firebaseapp.com
- djhaskin987 4y agoNever thought I'd see WordArt coming back 20 years later but here we are.
- VikingCoder 4y agoIn the future, there are no fonts. We will just send and receive streams of strokes. And then people who need it will use OCR to translate into text. Which won't always work very well.
- hnarn 4y agoWhat are you talking about? There's an example right here of how you would use it: https://developer.chrome.com/blog/colrv1-fonts/ https://developer.chrome.com/blog/colrv1-fonts/ More specifically: <div class="spicy" contenteditable spellcheck="false">hackernews</div> The text is right there. It's still HTML.
- VikingCoder 4y agoI'm painting the progression of where this is going. I'm not trying to describe this effort. I'm legit worried that Unicode will eventually fail, and we'll all just be sending streaming SVG to each other.
- hnarn 4y agoWhat’s your basis for believing this will happen? If anything the state of accessibility has improved over the past 20 years, not gotten worse.
- TheAceOfHearts 4y agoThis makes me feel old. I'm glad that the option is available for people that want and enjoy this kind of design, but for my part I'll probably disable this feature and continue to block custom fonts. Still, it's interesting to see that there's still room for innovation in the font space, even if I'm not in the target demographic.
- blueblob 4y agoWith the ability to add parameters to fonts, I wonder how long it will be until we have Turing Complete fonts.
- gorkish 4y agoPostscript fonts? Fully programmable font glyphs in the 80's. Little used, but very fun. I recall a typewriter font that would vary the glyphs position, weight and edges a bit to simulate coming from a manual typewriter. One could, if so inclined, build a complete COLRv1 font parser in PostScript.
- CharlesW 4y agohttps://litherum.blogspot.com/2019/03/addition-font.html https://litherum.blogspot.com/2019/03/addition-font.html "So this is pretty cool, but it turns out that the contextual substitution lookup type is really powerful. This is because the table that it references can be itself, which means it can be recursive." […] "So thats a pretty powerful virtual machine. I think the above is sufficient to prove Turing complete-ness."
- raphlinus 4y agoBehdad had this result earlier: https://twitter.com/behdadesfahbod/status/958065026262183936 https://twitter.com/behdadesfahbod/status/958065026262183936
- Diris 4y agoFont hinting is already turing complete[0]. (I learned about the in this[1] iceberg meme) [0] https://en.wikipedia.org/wiki/TrueType#Hinting_language https://en.wikipedia.org/wiki/TrueType#Hinting_language [1] https://suricrasia.online/iceberg/ https://suricrasia.online/iceberg/
- aaaaaaaaaaab 4y agoTrueType already has a Turing-complete bytecode.
- phkahler 4y ago>> Even if you’ve never heard of “color fonts,” you probably use them everyday "every day". as in "each day". The word "everyday" is an adjective.
- yaddaor 4y agoWould it work as "every day"?
- lalaithion 4y agoYes, "every day" and "everyday" have not-quite-the-same meaning.
- kmeisthax 4y agoIf Google uses it as a noun, it is a noun.
- LordDragonfang 4y agoSo is this statement linguistic prescriptivism, or descriptivism?
- kmeisthax 4y agoPrescriptivism is "Invalid syntax on line 32, column 14: 'everyday' is an adjective". Descriptivism is "shush, if people are using it this way then it's correct".
- cantSpellSober 4y agoIt's being used as an adverb to mean "daily"
- WiggleGuy 4y agoI think it works both ways?
- 4y ago
- daniel_iversen 4y agoI’ve heard google is bringing the <blink> tag back next!
- nkozyra 4y agoHard to argue that having this functionality in the type itself is better than having to do so in images. It has big advantages over SVGs, as well. I can copy styled text, for example. So it's not like this would empower people to do ugly web design that they couldn't already do. Per your point, I prefer CSS animations to having a blink tag, and people have managed to avoid using those too much the last 20 years.
- gfxgirl 4y agoAFAIK it was Apple that first added color to fonts in a modern OS. The fonts render in Safari and Firefox. Google is just publishing some fonts.
- gnicholas 4y agoDoes anyone here know how to connect with the folks working on this at Google (or elsewhere)? My work focuses on the intersection of color and text, so I would be interested to know who else is thinking about these topics. (Contact is in profile.)
- davelab6 4y agoYou can DM @googlefonts or email fonts@google.com, as explained in the GF FAQ https://developers.google.com/fonts/faq#how_do_i_contact_google_fonts https://developers.google.com/fonts/faq#how_do_i_contact_goo...
- Kukumber 4y agoWhen gamedevs enhance everyone's life
- mastax 4y agoInteresting that so many of the initial fonts are Arabic. They look beautiful, though.
- AtNightWeCode 4y agoCool, the examples do not look that great, but I can see the potential. Why material is poorly weighed is still a mystery though. As in this post.
- dheera 4y agoOh fantastic, just after I thought we were done with ugly gradients everywhere, we've re-invented Microsoft WordArt.
- gfxgirl 4y agoI'm wondering if/how my coding experience could be enhanced with this in my code editor.
- karaterobot 4y ago> With the ability to add variable axes too, the possibilities for customizing a COLRv1 font are literally infinite! Is it literally infinite, or is it a very large number? As far as I understand it, variable fonts are defined by ranges of finite length, and all CSS color spaces I know of are finite too. I'm being roughly a little pedantic, but mostly just wondering why they wrote it this way, and if I'm missing something. Big fans of Rob Lowe maybe?
- toddmorey 4y agoI'm both excited and scared by this development for the web.
- hdesh 4y agoPerhaps a naive question, as I don't understand this domain very well. How are these fonts different than, say just changing the color of the text?
- WorldMaker 4y agoColors (and gradients) per-stroke rather than per-glyph. (Coloring all of an "A" versus the three or more strokes that make an "A", for instance.) The most obvious examples are emoji which may need hundreds of strokes in many colors to be properly colored as we see them in most places (that aren't HN). Many emoji were rendered as bitmap images on many platforms to be able to get the colors correct prior to font support for color fonts.
- hnarn 4y agoDid you click the link and note the headline saying "What’s so special about the COLRv1 font format?" before asking this question?
- nerdponx 4y agoYou can do something like building a brand logo and embedding it in webpages and documents as actual text, in rather than an image.
- jfoster 4y agoIf you did that, what's the advantage? Instead of loading an image file, it loads a font file, which seems a lot like an image file when used that way.
- lalaithion 4y agoText is easier for screen readers to read, easier for search engines to parse, easier for control-F to find, easier to copy and paste. Text is a better format for text, and this allows for companies to embed their logotype design as text with a specific font as opposed to incentivizing them to use an image.