Interactive fiction typography
Much interactive fiction (AKA text-based games) nowadays is web-based, created with web oriented tools like Twine. This page is a personal list of some resources I have found to potentially use in interactive fiction to improve typography and create text effects.
Javascript stuff
Arctext
While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let’s you do exactly that.
baffle
A tiny javascript library for obfuscating and revealing text in DOM elements. 😲
Blast.js
Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element.
CircleType
A JavaScript library that lets you curve type on the web.
dropcap.js
Beautiful CSS drop caps made easy
FlowType.JS
Web typography at its finest: font-size and line-height based on element width.
funnyText.js
Create funny and crazy moving texts in a simple way.
kerning.js
Take control of your web typography.
Lettering.js
A lightweight, easy to use Javascript injector for radical Web Typography
shine.js
A library for pretty shadows.
textillate
A jquery plugin for CSS3 text animations.
text-animate
✍ beautiful, animated, HTML typographic UI effects
CSS thingies
Gutenberg
Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and developers.
typebase.css
Typebase.css is a minimal, customizable typography stylesheet.
Typeplate
Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns.
Animista
Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.
Colors.css
Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.
Utility Opentype
Simple, CSS utility classes for advanced typographic features.
Variable fonts
Variable fonts can gradually change a characteristic (for example, weight) along a continuous “axis of variation”.
Tutorials
A-Z of Web Typography
A series of 11 tutorials.
50 top typography tutorials
Examples, codepens, etc.
Title effect
Text that moves, gets narrower and more focused.
Title shadow
Long and beautiful text shadow.
Text mask background
Transparent text that reveals a background image, and that image moves with the mouse.
Text with animated gif
Transparent text that reveals an animated gif.