Skip to content

Latest commit

 

History

History
92 lines (58 loc) · 3.76 KB

README.md

File metadata and controls

92 lines (58 loc) · 3.76 KB

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

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.

A tiny javascript library for obfuscating and revealing text in DOM elements. 😲

Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element.

A JavaScript library that lets you curve type on the web.

Beautiful CSS drop caps made easy

Web typography at its finest: font-size and line-height based on element width.

Create funny and crazy moving texts in a simple way.

Take control of your web typography.

A lightweight, easy to use Javascript injector for radical Web Typography

A library for pretty shadows.

A jquery plugin for CSS3 text animations.

✍ beautiful, animated, HTML typographic UI effects


CSS thingies

Gutenberg is a flexible and simple-to-use web typography starter kit for web designers and developers.

Typebase.css is a minimal, customizable typography stylesheet.

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 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.

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

Simple, CSS utility classes for advanced typographic features.

Variable fonts can gradually change a characteristic (for example, weight) along a continuous "axis of variation".


Tutorials

A series of 11 tutorials.


Examples, codepens, etc.

Text that moves, gets narrower and more focused.

Long and beautiful text shadow.

Transparent text that reveals a background image, and that image moves with the mouse.

Transparent text that reveals an animated gif.