7 ms·
CSS Sans – A pure CSS font
- adiM 12y agoWould it be possible to use CSS to draw glyphs using data from Metafont source files?
- Turing_Machine 12y agoKaTeX does a lot of interesting CSS tricks. I don't think it goes all the way down to the Metafont level, though. https://github.com/Khan/KaTeX https://github.com/Khan/KaTeX
- deleted 12y ago[deleted]
- steakejjs 12y agoYou can already do regular fonts in pure css. See. Here's open sans in pure CSS. https://github.com/steakejjs/OpenSans-CSS https://github.com/steakejjs/OpenSans-CSS I've actually found its much nicer using this in my projects than using a font cdn or self hosting woff files. I do like the minimalism of css rules to creating this font as opposed to having a giant data section. It's pretty neat
- frikk 12y agoAll that's doing (I think) is encoding the font file as base64. You're still using the font binary blog. The link itself is actually drawing/creating the font itself in CSS. Different method entirely.
- steakejjs 12y agoYeah, it is only base64ing the woffs. The reason I post it is that it has all the benefits of this project (only CSS) without the downsides (being ridiculously hard to use).
- leereeves 12y agoNot that hard to use; just replace each letter with a span tag. It's a simple regex substitution or map().
- michaelmior 12y agoNot all the benefits. It requires web font support. I don't see this as a huge downside, but it is a fairly big difference.
- RubyPinch 12y agois there any browser that supports transforms (skews), but doesn't support web fonts?
- Pephers 12y agoI wouldn't call that a pure CSS font, as it's just a Base64 encoded WOFF font embedded in CSS as a data URI. It can save you for that extra HTTP request, though, if you only need to support modern browsers which support WOFF fonts.
- Moru 12y agoI miss the html-pages of old times. http://motherfuckingwebsite.com/ http://motherfuckingwebsite.com/ Just full of information. Or non-information. But full of it and not full of empty space or animated backgrounds that makes my cpu-fan convert to jet-engine.
- ceduic 12y agomotherfuckingwebsite.com is considered harmful. Try this one instead: http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- Moru 12y agoThat one sets sizes and width in pixels. This gets very tiny if you print it with something that doesn't auto-fix this... :-)
- vortico 12y agoThanks for this link! I've always love reading GNU manuals in HTML because it relies on your browser's navigation, which is always better than what any website could implement itself. Ctrl-F is fast because scrolling is trivial and doesn't require a Javascript callback for every pixel scrolled, and without a CSS-customized div after every paragraph, you can load web pages containing 2MB of text just fine.
- tarequeh 12y agoReally cool exercise in CSS. My first thought is that texts displayed using this font can't be selected/copied & won't be screen reader friendly. Might make for a great way to display your email or phone number on a site without worrying it would get scraped by marketers.
- sinaa 12y agoGreat idea. You could even generate a random mapping of the letters -> CSS classes on each load, making it very difficult for bots to decipher.
- aeosynth 12y agoWould it really though? Bots can beat CAPTCHA.
- glomph 12y agoThey could just make a map of the class attributes. It would be easy.
- sinaa 12y agoObviously it won't make it impossible to decipher, just harder (and perhaps not worth the effort). If the line order of each statement is also randomized and useless attributes are added, they'd have to pretty much compile the CSS and compare the attributes. The alternative way to beat all email obfuscation techniques is of course taking a snapshot and running OCR on it, but certainly not worth the effort/CPU time.
- developer1 12y agoNot as much effort as you might think. Command-line rendering of html (including css and js) and taking a screenshot is not very difficult. If a site used this method, and someone is highly motivated to break that captcha, the effort put in would be nothing compared to the benefit of bypassing the "security".
- 12y ago
- gkoberger 12y agoHere's another one; a bit more stylized and can be copy+pasted: http://people.mozilla.org/~mclaypotch/CSS-Sans/ http://people.mozilla.org/~mclaypotch/CSS-Sans/ (GitHub: https://github.com/potch/CSS-Sans https://github.com/potch/CSS-Sans)
- nunull 12y ago"can be copy+pasted" http://imgur.com/8SNbm0k http://imgur.com/8SNbm0k
- gklitt 12y agoVery cool how this project uses the font face to explore how CSS rendering has evolved over time. I find it strangely beautiful when rendered in IE 6/7, almost like an alien language. http://yusugomori.com/projects/css-sans/archive http://yusugomori.com/projects/css-sans/archive
- jnem 12y agoFinally, a legitimate reason for IE 6 to exist.
- michaelmior 12y agoThis is pretty cool. It's unfortunate that some characters (CGJQ) require masking with a background colour to get the desired shape. It would be nice if this could be resolved so this could be used on any background.
- namanbharadwaj 12y agoThis might be viable using Sass or Less, since they have support for variables, nested selectors, etc. Although I'm not really a front-end engineer, so I don't know exactly what would be involved.
- err4nt 12y agoSass or Less still output standard CSS in the end, which gets interpreted by the browsers. Anything written in Sass or Less would still have to work within the limitations of CSS.
- _nickwhite 12y agoVery nice! Now for the lower case, should be easy. :)
- scotchio 12y agoThis is really well done and polished. Great stuff. About a year ago when I was bored, I made a quick and dirty codepen [1] of the exact same thing you have here. I added a transition to it so you can type to switch the letters. I also made it so you can type with pure CSS letters [2]. It's nothing great like what you've done, but I'd thought I would share anyways. [1] http://codepen.io/ncerminara/pen/yFcfn http://codepen.io/ncerminara/pen/yFcfn [2] http://codepen.io/ncerminara/pen/cEbGC http://codepen.io/ncerminara/pen/cEbGC
- xasos 12y agoWoah the on keypress animations look awesome!
- cs- 12y agotransitions are really nice, apply those to this font and you got something
- shdon 12y agoThe non-webkit-transform is missing on the .t::before.
- saidajigumi 12y agoI've come to love autoprefixer[1] on a current project for just this reason. It's a CSS preprocessor that deals with prefixing and property syntax changes across browser versions. Usage: 1. Write unprefixed CSS 2. Tell autoprefixer what browser versions to support 3. It adds the correctly prefixed properties for you Interestingly, autoprefixer uses the property support data from caniuse.com to determine what prefixes to apply. [1] More info and link to interactive demo at: https://github.com/postcss/autoprefixer https://github.com/postcss/autoprefixer
- runeks 12y agoVery cool! FWIW, it feels more responsive to react on keydown rather than keyup, IMHO: http://codepen.io/runeks/pen/PwxdEm http://codepen.io/runeks/pen/PwxdEm
- novaleaf 12y agowhat would the practical usage of this be? Honest question.
- pcthrowaway 12y agoTypography that maintains a relative width to the rest of the page content and scales with everything else. Similar to how it's desirable to use CSS shapes over images.
- bcg1 12y agoI love this project, I think it is wonderful. I'm not sure of the practical usage but I don't care, it just strikes me as smart, and looks very nice.
- agumonkey 12y agoAppreciate the meta css rules to explain on hover. Now let's build an ascii rasterizer on top http://imgur.com/VyEAzsm http://imgur.com/VyEAzsm.
- wahsd 12y agoAnyone have an idea what that aberration is in the hook of the Q?
- baking 12y agoIt cuts off the end of the tail. Also look at how the tail of the "J" is done.
- wahsd 12y agoAre there any advantages to using this over other methods for large text? Also, can anyone think of any practical uses for this?
- err4nt 12y agowhat about responsive logos, or as a basis for some responsive CSS illustration?
- jradd 12y agothis is amazing!
- hardwaresofton 12y agoAt the risk of making an uninteresting comment -- I really love seeing cool/interesting work like this done by people who aren't devs in America. Not that there's anything wrong with American tech or devs particularly, but just that I feel like we're finally getting at the true promise of the internet. Great work, Found the characters really consistent in style, and obviously functional.
- err4nt 12y agoThis is the kind of stuff I come to Hacker News for! Inspirational, brilliant, beautiful, and awe-inspiring.
- Tomte 12y agoAs usual, the S looks strange. No wonder Knuth dedicated a whole chapter to this one letter in "Digital Typography".
- nightcracker 12y agoThe S looks out of place.
- lewtds 12y agoVery cool project but I fear that this approach will only work for relatively simple glyphs that can be broken down into 3 sections (main, :before and :after) whereas Chinese characters, for example, may take up a few dozen strokes.
- RazorX 12y ago<span class="N"></span> <span class="E"></span> <span class="A"></span> <span class="T"></span>
- sova 12y agoseriously just blew my mind with this.
- mobiuscog 12y agoA stupid question I imagine, but wouldn't em be more appropriate than px for the defined units ? Couldn't the size be defined proportionally to the expected size ?
- mehedi_ku06 12y agoHello! Thank you for your article. I’d like to try to compare it to my previous experience of learning English through Skype. I did around 10 conversations over Skype with a native speaker from http://preply.com/en/english-by-skype http://preply.com/en/english-by-skype. And I was pretty satisfied with their Quality. I think they have a strong teaching quality, following their course curriculum now I can speak English like a native they also provide local tutors, but I Want to try another option.
- coolguy43 12y agoThis is really great. I tried this chinese skype class at http://preply.com/en/chinese-by-skype http://preply.com/en/chinese-by-skype. Great animations and really cool!