10 ms·
Inter UI, a typeface designed for user interfaces
- argimenes 8y agoThis is a beautiful typeface, but I can't tell capital 'I' as in Italy apart from lowercase 'l' as in 'lasagne'.
- cyberferret 8y agoScroll further down the page - there are alternative display options to disambiguate capital i from lowercase l as well as slashed zeroes etc.
- deleted 8y ago[deleted]
- blumomo 8y agoIt's a visually very pleasant font. Thanks for sharing this, definitely considering it now.
- ryanwhitney 8y agoLooks good! I haven't seen many variable fonts around yet. The samples include mock notebooks and poster layouts, but I'd love to see examples of it being used in an actual interface. (Outside of the site, which uses it.) Also—not mentioned too prominently on the site—but it's open source as well! Awesome work. https://github.com/rsms/inter https://github.com/rsms/inter
- open-source-ux 8y agoThe team behind the iA Writer app recently released three variable fonts with an open source licence on Github. Details here: https://ia.net/writer/blog/a-typographic-christmas https://ia.net/writer/blog/a-typographic-christmas
- ryanwhitney 8y agoWoah! I've followed their work and loved Nitti after finding it in their app, but I missed this. Thanks for sharing.
- ascom 8y agoIt's actually used on GitHub's homepage when you're logged out.
- kragen 8y agoTeX can use other fonts, but the default set of fonts used in TeX are "variable fonts". The term Knuth used was "metafonts", which is why the font-rasterizing program he wrote for TeX is called METAFONT. So you've probably read a number of books and many papers typeset in "variable fonts", as well as most of the math formulas on Wikipedia and in Jupyter.
- svat 8y agoIn fact Knuth wrote a wonderful article explaining the idea. The article is available online, and is just an explanation but a superb performance — “The Concept of a Meta-Font”, by Donald E. Knuth, in Visible Language, XVI 1 (Winter 1982): https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/the-concept-of-a-meta-font.pdf https://s3-us-west-2.amazonaws.com/visiblelanguage/pdf/16.1/... (Republished in the book/collection Digital Typography.) So he seems to have invented the idea, at least as far as computers go.
- rntz 8y agoIt's more accurate to say they were variable fonts. The Computer Modern used by modern LaTeX distributions was converted from METAFONT to Type 1 in 1992. In the process, specific parameter values had to be chosen - in my opinion, chosen badly, so as to make modern Computer Modern very difficult to read on screen at small sizes because it's too darn light. :( Reasonable replacements included in most LaTeX distributions include the XCharter or libertine packages for text fonts; eulervm or newtxmath for math fonts; or mathpazo for both.
- Kuraj 8y agoLooks pretty but I wish the website showed it as a webfont instead of just a picture, so I can see how it will really look on my system (the differences in hinting can be substantial)
- andrewthebold 8y agoCheckout the samples page: https://rsms.me/inter/samples/ https://rsms.me/inter/samples/ I didn't notice the navbar at the top at first too!
- deleted 8y ago[deleted]
- Kuraj 8y agoHey thanks! Unfortunately only the first block appears to be text :(
- derefr 8y agoThis font (under default metrics settings) reminds me of Apple’s San Francisco. Is it similar, or are my eyes just deceiving me? (I’d check myself, but I’m on my phone at the moment.)
- zepto 8y agoIt is ‘similar’ in every way.
- cpmsmith 8y agoIt's a very similar style with very similar objectives, so it's not entirely coincidence. It's also very similar to Google's Roboto for the same reasons.
- zepto 8y agoEven though the objectives are similar, it’s hard to tell apart from San Francisco, whilst roboto is quite clearly different.
- fredsted 8y agoTo me it looks almost the exact same, but there's some small differences. These two fonts are exceedingly similar.
- andrewthebold 8y agoI think if anybody is interested in using this as a webfont, you should take a look at the file sizes of the typeface. They're about 100-200kb each, which adds up if you're using multiple font weights. It could be significant depending on the context of your app. Apparently this is because the font has a lot of glyphs that may not exist in other optimized web fonts (relevant GitHub issue: https://github.com/rsms/inter/issues/53 https://github.com/rsms/inter/issues/53).
- cpmsmith 8y agoAs mentioned in that issue and the linked one, subsetting makes a huge difference, and can be done yourself. As not mentioned there, you can even split the subsets by Unicode range and let browsers handle which chunks to download. Browser support is even pretty good.[0] https://caniuse.com/#feat=font-unicode-range https://caniuse.com/#feat=font-unicode-range
- GordonS 8y agoHuh, I had no idea this was even a thing - that it's supported by even IE 11 is nothing short of incredible!
- ascorbic 8y agoI highly recommend using Font Squirrel for creating webfont packages. They support loads of options for reducing size, but the defaults are great too. https://www.fontsquirrel.com/tools/webfont-generator https://www.fontsquirrel.com/tools/webfont-generator
- m0zg 8y agoI love the way this font looks to an irrational extent. Will use in my work.
- bayindirh 8y agoIt has the 80s modern vibe with today's technology. It definitely tickles something deep down in my mind too.
- mstade 8y agoFor anyone like me who might think that this is a pretty looking typeface but not particularly fully featured, scroll down the page to this bit: https://rsms.me/inter/#features https://rsms.me/inter/#features This is an amazingly well featured typeface where the author clearly has considered a number of use cases, particularly in terms of legibility at small sizes which is important for UI. This looks great! File size may be an issue for public web UIs, as someone mentioned, but there are so many more places this could be used to great effect. Will definitely consider for future projects!
- GordonS 8y agoAh, I was thinking there was no slashed zero, but scrolled further after reading your comment - it is indeed there as an option!
- PostThisTooFast 8y agoIt's a failure at first glance. The capital I has no crossbars, making it indistinguishable from a lower-case L. Any font suffering from this defect is SHlT, and you shouldn't have to hunt around for alternate faces to "fix" it.
- TheAceOfHearts 8y agoFYI: it's a bit easier to spot the variations if you highlight both the Disabled and Enabled examples in a line. The light-green blocks by themselves definitely make it harder for me to make out the details, but once highlighted the improvements are much more obvious.
- qwerty456127 8y agoWhat's the difference between 2:34, FE—X and 12:34, FE—X, 4.2 and 4.2, (SEMI)PERMANENT and (SEMI)PERMANENT? I can see no difference.
- mbreese 8y agoI assume the long dashes are replaced with a single character. For the colon and decimal points, they are slightly higher. For the time, the colon lines up with the middle of the numbers instead of the baseline. The differences are very subtle (but nice).
- suddenstutter 8y agoA truly stunning font.
- lalaithion 8y agoLowercase l looks identical to capital i. It's pretty, but for informational displays, it can be very confusing.
- killercup 8y agoScroll down: You can use the cv04 font feature to change the style of the lowercase l!
- classichasclass 8y agoI like this much better than the typical Linux UI fonts, too. It looks cleaner and more visually pleasing. Would certainly enjoy using a desktop with this.
- andai 8y agoI just set my desktop UI to this font. everything is pretty now. It almost feels like I'm on macOS :)
- jeanlucas 8y agoBeautiful!
- rayalez 8y agoI'm not a designer, but to my non-professional eyes this looks good. Do you think this font would be a good choice for a text editor?
- 676339784 8y agoI'd stick to monospace fonts for text editors
- rayalez 8y agoEven if it's a SaaS app for general writing, not a code editor? (I guess I should've clarified this right away)
- jjcm 8y agoThis supports being monospaced by the looks of it - scroll down to the tabular data feature. The font really has a wide variety of options.
- crazygringo 8y agoIt's tabular numbers only, not letters. And "automatically monospacing" any font that is designed proportionally will look terrible, so stick to an entirely monospace font.
- zokier 8y agoDespite all the talk about being optimized for screen rendering, it sure looks lot blurrier and less even on my system than for example the classic Verdana, or the more modern Segoe UI Here is quick and dirty comparison shot: https://cdn.pbrd.co/images/HU2mq37.png?o=1 https://cdn.pbrd.co/images/HU2mq37.png?o=1
- johnday 8y agoThat does look way blurrier. Interesting though, since it seems to work fine on my screen. Are you using a standard pt / px size?
- jimbo1qaz 8y agoThe hinting renders poorly on your system. Aside from the fuzziness?, the T and top of z are thicker than bottom of z.
- crazygringo 8y agoThat's clearly rendering without any hints. The page mentions they have both hinted and unhinted files you can use... but they recommend only using them for Windows where users prefer that look. (You clearly do.) I'm guessing you're using the unhinted one?
- magicalhippo 8y agoI downloaded the zip, both the unhinted and hinted files looks the same in the font previewer at least. Compared to Segoe UI both look quite blurry. So I compared the lower-case alphabet in Wordpad (in Word all fonts look shit, way to go MS), and it seems the hinting is only applied to first four letters of the alphabet. https://imgur.com/a/b1POgyN https://imgur.com/a/b1POgyN edit: added difference image to the above album to highlight the issue Windows 10 1809.
- a-nikolaev 8y agoOn my Linux and Firefox, font looks unpleasantly blurred in small sizes on their page. Maybe our hinting settings are different than theirs but that should not be a problem in a quality font. Kerning in digits looks off in their example: https://i.imgur.com/AURrPtn.png https://i.imgur.com/AURrPtn.png (this is an example where fixed-width is disabled), don't know how pervasive this odd kerning is, or if this is bad only in the browser. Another example of bad kerning: https://i.imgur.com/PIYJgIz.png https://i.imgur.com/PIYJgIz.png One more example: https://i.imgur.com/bOM4MZB.png https://i.imgur.com/bOM4MZB.png
- deleted 8y ago[deleted]
- wongarsu 8y agoIt's a great font with a lot of features, and it is visually very similar with Roboto. I just wish it had a thinner variant (font weight 300).
- azinman2 8y agoAren’t all these sans-serif grotesque fonts just Helvetica emulators?
- mortenjorck 8y agoNot quite. There are actual Helvetica clones such a Arial and Nimbus Sans, but I would say these contemporary UI fonts fall somewhere between classic grotesques and the humanist types of Frutiger and Myriad.
- stev0lution 8y agoLooks like you just have to wait some more https://mobile.twitter.com/rsms/status/1078362207367290881 https://mobile.twitter.com/rsms/status/1078362207367290881
- wongarsu 8y agoThat's great news. Looking at the github there are even prerelease builds of a light variant [1] https://github.com/rsms/inter/issues/14 https://github.com/rsms/inter/issues/14
- abrowne 8y agoI and l (capital i and lowercase ell) look the same or nearly the same at normal sizes. So I'll stick with Source Sans Pro or Noto Sans.
- TheAceOfHearts 8y agoI really like the typeface, so I hope this comment won't come off as too negative. In the FAQ the author mentions that you can fetch the typeface directly from his site. I'd advise against relying on third-parties without contractual obligations to you in production. If you decide to take this risk anyway then you should take steps to reduce the risk of future security issues. The most important thing is to use use Subresource Integrity [0] on your <link> tags. However, since the author doesn't provide versioned URLs (the query strings are only being used to bust the cache, not to select which file is served), this would likely cause your site to break on each release. Usually CDNs give you a URL which includes the version as part of the path. Another issue is that SRI only checks top level resources, there's no equivalent for external fonts and images which get included from the stylesheet [1]. It doesn't seem like the largest attack vector, but you never know what kinds of browser bugs might pop up. Finally, Cache-Control has a max-age of 4 hours. If you don't expect these resource to change then you'd want the value to be way longer. [0] https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity https://developer.mozilla.org/en-US/docs/Web/Security/Subres... [1] https://github.com/w3c/webappsec-subresource-integrity/issues/40 https://github.com/w3c/webappsec-subresource-integrity/issue...
- lwansbrough 8y agoIf you're looking for a UI font that's non-specific to your design (ie. you're not designing a poster) then I recommend the following: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; Everything else is less user friendly. This loads instantly, looks perfect on the user's screen, and is guaranteed to look exactly as it's supposed to.
- kitsunesoba 8y agoAgreed. Few designs benefit enough from a custom font to justify the downsides of not using the standard system font. As an aside, we will soon be able to use system-ui in place of a manually constructed font stack: https://caniuse.com/#feat=font-family-system-ui https://caniuse.com/#feat=font-family-system-ui
- kolinko 8y agoWhat are the downsides, load time aside?
- kitsunesoba 8y agoBesides just the load time, there’s the “pop” effect of the text not being visible until the font loads (or slightly better but still not great, the page shifting around as default fonts get subbed out for your custom font with different metrics). On macOS and iOS specifically, the system font (San Francisco) has had a great deal of time and effort poured into readability — so much that rather than being a singular font, it’s a massive family of fonts or metafont with countless variants for various DPIs and use cases. For example, the “San Francisco” used for headings (h1, h2, etc) uses wider glyphs and more relaxed kerning, as is appropriate for headings and the “San Francisco” used for small text uses a variant that has its geometry tweaked to be more legible. It’s a free readability boost that all happens automatically when you use system-ui or -apple-system in your font stack. By using a custom font, you forfeit all of that.
- 8y ago
- zaroth 8y agoThe site seems to constantly crash mobile Safari in my iPhone X? I’m getting “A problem repeatedly occurred while trying to load...” after it crashes and tries to reload several times. I think the first time I’ve ever seen that actually.
- mntmn 8y agoI love this typeface and I’m using it for a lot of stuff @ MNT, including the Reform brand. And it’s also pleasant as a GUI font on Linux desktops.
- needle0 8y agoSince this font contains the feature, let me mention one of my pet peeves in the hopes of raising awarenes: whatever you do, do NOT blanket enable the Discretionary Ligatures (dlig) feature across all of your header/body text. Use it sparingly, pinpointed to where you know in advance there are specific glyphs in the text that need to look different. Enabling it all across your text with no regard on what text there will be will result in all kinds of unintended ligatures making the text appear bizarre, ugly and unprofessional, especially if there is any chance your text will be localized into non-latin languages.
- em-bee 8y agocan you give an example of where unintended ligatures could appear?
- Sharlin 8y agoDiscretionary ligatures are typically decorative in nature and should be used very sparingly, lest legibility deteriorates. See the examples at [1]. [1] https://www.fonts.com/content/learning/fontology/level-3/signs-and-symbols/ligatures-2 https://www.fonts.com/content/learning/fontology/level-3/sig...
- em-bee 8y agoah, like this example here: https://justmaku.org/2018-06-19-amazon-leaking-ebooks https://justmaku.org/2018-06-19-amazon-leaking-ebooks the st ligature is startling every time i see it, tripping me out of the flow of reading.
- TheRealPomax 8y agoThat capital U is kind of horrible though. No compensation at large size for what the human eye perceives as a line-curve discontinuity on the inside of the glyph?
- conanthe 8y agoI am split. This font is amazing - finally a better alternative to Helvetica, but wouldn't be better if they have used their energy on improving their CPUs?
- FavouriteColour 8y agoI think you might be confusing "Inter" with "Intel". This font is named "Inter UI" since its design goal is for use in user interfaces. It doesn't have anything to do with Intel.
- romanr 8y agoIs it English/Latin only? What about localized interfaces? Looks like apart from standard Helvetica/Apple/Microsoft fonts there’s a very small choice of fonts you can use if you have multi lingual UI. It’s like creating a Latin font is relatively easy, but very few of them go all the way to full Unicode support.
- alwillis 8y agoBy opening the font file using FontDrop (https://fontdrop.info https://fontdrop.info), you can see that it supports 39 languages: Afrikaans Albanian Azerbaijani Belarusian Bosnian Bulgarian Catalan Croatian Czech Danish Dutch English Estonian Finnish French German Hungarian Icelandic Italian Latvian Lithuanian Macedonian Maltese Norwegian Ossetic Polish Portugese Romanian Russian Serbian Slovak Slovenian Spanisch Swedish Turkish Ukrainian Uzbek Vietnamese Zulu
- webmaven 8y agoNeeds a [2017] in the title.
- Theodores 8y agoI had to choose a font recently, working with the client there were a few things such as 'no I don't want the eyeglasses g' and 'no I don't want descenders on numbers' and that was how we arrived at using 'Ubuntu' to fall back to the native font stack. This I was pleased with as Ubuntu is a system font on Ubuntu so working on a website where there is no need to download a 'Google Font' helps immensely when the cache is off. However, I didn't like the 'M' and 'W' in Ubuntu, so I think I will be suggesting that we revise the font to this neat Inter UI font, loaded with 'defer' and the system fallbacks including Ubuntu. This font is a very neat piece of work. It satisfies the 'g' and numbers requirements and is sans-serif. I can't wait to get working with it.
- jszymborski 8y agoVery pretty, but am I the only person who, at first glance, thinks it's not all that distinguishable from Helvetica? It's got an Arial-style 'R', but short of that...
- ncmncm 8y agoSigh. Yet another sans-serif font family. Yes, they are easier to design, and easier to parameterize, which is nice for you, the designer. But they are not nice for me, the reader. Using a sans font says to me that your comfort is more important than mine, and that your time is worth more than mine and everyone else's, combined. In Firefox, I have disabled web fonts, and use Libertine everywhere. That choice is denied to me in Firefox on my phone.
- avel 8y agoI don't quite understand your criticism of sans-serif fonts. However I wanted to address your last sentence. Perhaps you could try to see if the "Stylus" add-on works on Firefox mobile. I haven't tried it myself but it should.