p1 ~ textile 🧢

prompt ✏️

each project this semester introduces a new design process for combining type design with web programming. here’s our first process:

type + code = textile

this project is about ascii art. this is the process of using text to create images.

ascii art originates from the need to display images without the ability to do so. here’s an example that predates the internet, circa 1875.

typewriter art

in the modern age, we usually see ascii art in the form of emoticons:

Β―\_(ツ)_/Β―

in its most basic form, a website is just some very simple code (html) and type (text). here’s what the first website everβ†— looked like.

ascii art exists because of technical limitations. if you only have text to work with, how can you make graphics? like this!β†—

what does β€œascii” stand for?

  • β†’
    the term β€œascii” stands for american standard code for information interchange.
  • β†’
    this is the code that turns binary (computer language) into letters we can actually read.
  • β†’
    (you don’t need to know what binary is to make ascii art, so i’ll spare you from the details.)

how does ascii art work?

creative challenges 🎨

find meaningful forms within type πŸ”Ž

at their core, websites are just files full of text, a.k.a. type. let’s explore what makes this type unique.

  • β†’
    what patterns emerge when letters are placed together, either horizontally or vertically?
  • β†’
    how can we use positive and negative space, both around type and within it?
  • β†’
    what is the rhythm of the type?
  • β†’
    how is the type framed, either through its design or its use?
  • β†’
    what familiar forms does the type evoke? what is its context?

engage with the web as a digital fabric 🧡

what does it mean to design for the web? let’s explore what makes this medium unique.

  • β†’
    what happens as the website’s width and height change?
  • β†’
    how does the website translate across different browsers (chrome, firefox, and safari)?
  • β†’
    how does the website translate across different devices (desktop, mobile)?
  • β†’
    how do colors render on the web?
  • β†’
    how do we craft and perceive composition and scale on the web?

technical requirements βš™οΈ

font πŸ” 

create a pixel font in glyphs with grid size 100 or 50 (if you want to do more work). do not modify the pixel component.

you can choose if you want your font to be monospaced, which means that every glyph is the exact same width.

your font needs to contain the following glyphs:

  • β†’
    uppercase letters A–Z
  • β†’
    numerals 0–9
  • β†’
    punctuation .,:;!?*#/\-_"'@&|$=><~^%()[]
download glyphs
glyphs license
template and example files

website 🌐

create an ascii art website that uses your pixel font.

code your website either in demoland↗ or visual studio code↗.

publish your website via github pages↗.

the use of ai is not permitted for this assignment and will result in automatic failure.

grading πŸ’―

this project is worth 15% of your grade, so it’s graded out of 15 possible points. here’s how that breaks down:

categorypointsassessment
font completion5
  • β†’
    all font βš™οΈ requirements as detailed in this document
website completion5
  • β†’
    all website βš™οΈ requirements as detailed in this document
critical review5
  • β†’
    completion and meaningful engagement with the πŸ† challenges as detailed in this document

timeline ⏳

Sep 2026
SMTWThFS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
16
17
18
19
20
21
23
24
25
26
27
28
30
Oct 2026
SMTWThFS
1
2
3
4
5
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Nov 2026
SMTWThFS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Dec 2026
SMTWThFS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Sep 15, 2026

project kickoff

Sep 22, 2026

pixel font due

Sep 29, 2026

website due, πŸ† crit!

Oct 6, 2026

revisions due

edit

✍️