CSS Class Generator for Font Noto Sans
Some days ago, I was on a search for a font to substitute for Segoe UI. The substitute was desired because Segoe UI requires a license to be purchased for use on a website.
During my search, Noto Sans was mentioned most often as a substitute for Segoe UI.
Noto Sans is a variable font. A variable font is one where a single font file can provide variable aspects — like italic, condensed, and a range of font weights. Before variable fonts, a web page had to load a separate file for each font variation that was used on a web page.
Noto Sans being a variable font might account for part of its popularity over other suitable substitution fonts. Further, it seems to be a popular choice on its own merits as a primary website font.
The CSS Class Generator for Font Noto Sans tool provides formatted text and CSS code for various font aspects you can specify. It is likely to come in handy for learning about Noto Sans and for implementing it on your website.
Older desktop and laptop systems can't use the Noto Sans font's variable aspects. But Noto Sans can still be used. It's just that one or more of the variable aspects might not get rendered.
One variable aspect you'll find at the above-linked generator is the font weight:
The weight can vary from 100 to 900. Weight 400 is generally considered normal. Weight 700 is generally considered bold. With variable font weight, what you publish can be considerably lighter or heavier than normal or bold.
Another variable aspect at the generator is font width:
You can specify a width from 62.5 (very condensed) to 100 (normal width).
The generator formats the CSS for a class definition with your font formatting selections.
I realize I've introduced two topics in this article and I apologize if it is confusing.
-
One topic is the generator for the font Noto Sans. That was intended to be the primary topic.
-
The other topic is variable fonts. There is so much to say about variable fonts that it is merely mentioned here. The web pages at the these three links contain more information about variable fonts.
To close the article, let me reiterate that the generator at the tools page can be used for creating classes to use font Noto Sans on your website. It can also be useful for becoming acquainted with variable fonts.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
