While I was looking for a cool font to use, I have come across Datalegreya. I really like its original look, and the idea of using ligatures and contextual alternates to add another layer to characters is really intriguing.
Datalegreya is based on Alegreya Sans SC, a beautiful sans-serif small caps font. The interesting twist is the use of character combinations such as d|2a|1t|3a|2 to overlay a line chart (or a variation of one) onto standard characters. You can try this on Font Library itself.
The basic format is as follows:
Type the character you want to style, for example d.
Add a combination of | (pipe) and a number between 0 and 3 to determine the height of the line after it crosses the character (by default it starts with 0 before the first character).
Continue until the end of the text.
There are other features including the x-axis and y-axis legend, a min/max value indicator, and neutral spaces, all described in the README file included with the fonts.
If you plan to use this font as a Web font, be careful as the OTF files are quite large; anyway, when converted to the WOFF2 format, their size reduces significantly. I am not sure this is a good use of the font, anyway, since the text itself is hardly readable if the font is not correctly loaded for any reason; nevertheless, I find it undoubtedly cool.
I am a fan of open-source software since forever. Lately, while looking at fonts for a website, I've again come across open-source fonts. The main reason I like them is that open licenses leave no doubt about where and how you can use a font: personal projects, commercial projects, desktop applications, websites, and so on – which are instead usually limited with commercial licenses.
Do open-source fonts have to look unprofessional? Not at all. The League of Moveable Type has a great manifesto that explains why open-sourcing fonts is a good idea, and they offer some very good-looking fonts too; in fact, I still use the very popular Raleway, and for a while I've been quite in love with the less popular, futuristic-looking Orbitron.
There are many resources where to find, try, and download open-source fonts:
A quick thing I have learned today, which I thought was more difficult and it would take more time to get right than it actually does.
Do you know that effect when you click on a link to a section in a page (say from the nav) and the page smoothly scrolls until said section? Well, it is just a CSS property called... scroll-behavior with value... smooth. Duh.
Example:
html {
scroll-behavior: smooth;
}
There are many other scroll-related properties related to snap points and margins, but this one alone goes a long way already.
I love colors. Whenever I have a chance to use colors, I do. At the risk of it looking kitsch, I like quite much color gradients because of the many colors they include.
Although nowadays the preference goes towards minimalism and color “exhuberance” is mostly frowned upon, it seems there has been a resurgence of gradients in Web pages. There are nice tools that help both with the choice of colors and with translating that into CSS properties, for example:
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
When it comes to Web design, though, choosing the right colors is not just a matter of taste but also of usability. Is using many colors too distracting? Does it make it difficult to read the text? Is it annoying?
A tool I find useful for this is the Contrast Checker, which returns a score on the contrast between a background color and a foreground color. With a gradient, this check is more complex because of the “changing” nature of the background.
I am still on a quest to figure out the best way to make gradient, font, and text color to work beautifully together.