VF Characters for UX
September 4th 2023 by Sehr Type
We include some basic characters that we think might be useful in UX design in all of our variable fonts, which can be seen below:
↑ ↗ → ↘ ↓ ↙ ← ↖
↔ ↕ ✓ ▫◻□ △▽
If there are more characters for use in UX design that you’d like to see as a part of our variable fonts, we’d love to hear about it! Drop us a line by following this link.
When using these characters we find that it’s probably a good idea to make sure the user can’t highlight them, which is easily accomplished by adding these three css attributes to the tag containing the glyph or glyphs:
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
HTML:
<div id="animateOnHoverExample2">
<p>Home</p>
<p>Fonts</p>
<p>Learn</p>
<p>Ethos</p>
</div>
CSS:
#animateOnHoverExample2 p {
font-size: 3.2rem;
line-height: 4rem;
font-variation-settings: 'wght' 400;
cursor: pointer;
text-align: right;
}
#animateOnHoverExample2 p:hover {
font-variation-settings: 'wght' 600;
transition: 250ms ease-in-out;
text-align: right;
}
The animation that we’re using to “pulse” the glyphs is below, you’re welcome to use any of these codesnippets on any project you like.*
*Provided you have a license for the variable font you’re using.