Twista Sans - Working With Type

About
Gallery
Variable Font
Glyphs

Pure, simple, rounded comes this sans-serif companion for the escheresque display typeface Twista. With a wide range of weights it supports the typographic possibilities of Twista but it also works on it’s own. And beside it simplicity, there is a special clever feature: Letters of all weights share the same width. Twista Sans is an uniwidth typeface. Uniwidth should be not to confused with monospaced typefaces, where all characters share one single width; in uniwidth typefaces characters are proportional but share the same width across all weights. This distinctive feature influences the design of the typeface and offers a wide range of potential applications.

Twista Sans is designed as a variable font with a width axis ranging from Thin to Black. The uniwidth nature of this typeface makes it ideally suited for elegant hover effects and use in UI.

The typeface supports a wide range of Latin languages (400+) and features a set of small numerals in a unique design, as well as circled numbers and arrows. There is an alternative single-story “a” and an alternative uppercase “I”. With its nine predefined weights, Twista Sans is the perfect choice for packaging design—whether combined with the Twista font family or used on its own—also for branding or editorial applications. The variable version of Twista Sans unfolds its full potential in digital, animated environments.

Some examples demonstrating the potential of the uniwidth typeface Twista Sans Variable, including the necessary CSS and JS code.

Effects on a Paragraph

Javascript divides the text into sentences, and each sentence is highlighted when the mouse hovers over it.

Variable fonts represent a revolutionary advancement in typography, allowing designers to explore infinite variations within a single font file. The Twista Sans typeface demonstrates this flexibility beautifully, offering seamless transitions between weights. By hovering over this paragraph, you can witness how the font dynamically transforms, creating an engaging and interactive reading experience. This technology opens new possibilities for responsive design, animation, and creative expression in digital typography. The smooth interpolation between font variations provides designers with unprecedented control over their typographic choices, making variable fonts an essential tool for modern web design.

How it works

CSS
.hover-paragraph {
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 300;
}

.hover-paragraph .sentence {
    display: inline;
    transition: all 0.4s ease;
    cursor: pointer;
}

.hover-paragraph .sentence:hover {
    font-weight: 700;
}

JS
const hoverParagraph = document.getElementById('word-paragraph');
const hoverText = hoverParagraph.textContent;
const hoverSentences = hoverText.trim().split(/(?<=[.!?])\s+/);

hoverParagraph.innerHTML = hoverSentences.map(sentence => 
    `<span class="sentence">${sentence}</span>`
).join(' ');

Automatic sequential animation

Automatic animation through all words of the paragraph. Note the little extra delay effect. Starts from the beginnig on mouse movment.

How it works

CSS
.auto-paragraph {
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 300;
}

.auto-paragraph .word {
    display: inline-block;
    font-weight: 300;
    color: #333;
    transition: font-weight 0.8s ease;
}

.auto-paragraph .word.active {
    font-weight: 700;
    transition: font-weight 0.2s ease;
}

JS
const autoParagraph = document.getElementById('word-paragraph-2');
const autoText = autoParagraph.textContent;
const autoWords = autoText.trim().split(/\s+/);

autoParagraph.innerHTML = autoWords.map(word => 
    `<span class="word">${word}</span>`
).join(' ');

const autoWordElements = autoParagraph.querySelectorAll('.word');
let currentIndex = 0;

function animateWords() {
    autoWordElements.forEach(word => word.classList.remove('active'));
    autoWordElements[currentIndex].classList.add('active');
    currentIndex = (currentIndex + 1) % autoWordElements.length;
}

setInterval(animateWords, 300);

Proximity effect

Text highlighting effect in a circular shape around the mouse pointer.

How it works

CSS
.proximity-paragraph {
  font-size: 1.3rem;
  line-height: 1.8;
  font-weight: 300;
}

.proximity-paragraph .word {
    display: inline-block;
    font-weight: 300;
    color: #333;
    transition: all 0.3s ease;
}

.proximity-paragraph .word.near {
    font-weight: 700;
}

JS
const proximityParagraph = document.getElementById('word-paragraph-3');
const proximityText = proximityParagraph.textContent;
const proximityWords = proximityText.trim().split(/\s+/);

proximityParagraph.innerHTML = proximityWords.map(word => 
    `<span class="word">${word}</span>`
).join(' ');

const proximityWordElements = proximityParagraph.querySelectorAll('.word');
const proximityRadius = 150;

proximityParagraph.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    proximityWordElements.forEach(word => {
        const rect = word.getBoundingClientRect();
        const wordX = rect.left + rect.width / 2;
        const wordY = rect.top + rect.height / 2;

        const distance = Math.sqrt(
            Math.pow(mouseX - wordX, 2) + Math.pow(mouseY - wordY, 2)
        );

        if (distance < proximityRadius) {
            word.classList.add('near');
        } else {
            word.classList.remove('near');
        }
    });
});

proximityParagraph.addEventListener('mouseleave', () => {
    proximityWordElements.forEach(word => word.classList.remove('near'));
});