Skip to content
Yazan Nasser

Ch. 01The Arrival

Typographic Universe

A magazine about letters, made of letters. Read it from the first page to the last, or open the index and jump.

  • 07Worlds
  • 35Chapters
  • 04Projects

Yazan Nasser

Developer & Digital Designer

Scroll to begin01 / 35

Ch. 02The Name

A specimen of eleven letters

Yazan Nasser

Typeface
Archivo, variable
Width axis
62 to 125
Weight axis
100 to 900
Set at
Width 100, weight 860
Inventory
11 letters, 7 shapes. Three A, two N, two S.

Ch. 03Letter Architecture

Plan view, scale one em to one storey

Condensed letters stand as towers. Extended letters become halls.

Eleven letterforms of one name, placed along an avenue and seen in true perspective. Width and weight decide the building: the width axis sets the footprint, the weight axis the mass.

Tower Y, width 62

Ch. 04Identity in Motion

Two disciplines, one practice

Developer and digital designer.

Role 01

Development: structure, logic, interaction, performance.

Role 02

Digital design: type, layout, color, motion.

The designer decides how something should feel. The developer makes sure it actually does. In this practice they are the same person, working on the same file.

World 02/The Typographic Dimension

Ch. 05The First Transition

End of World 01

Every letter is a window. Keep scrolling and step through the zero.

Next: World 02, The Typographic Dimension

World 02/The Typographic Dimension

Ch. 06Giant Letterforms

Anatomy of a letter

One capital A, drawn for this page and examined at the scale of a building. Five parts, five names.

  1. 01ApexThe point where the two strokes meet at the top of the letter.
  2. 02CounterThe space enclosed by the letter. Type is drawn by its spaces as much as by its strokes.
  3. 03CrossbarThe horizontal stroke that holds the two legs together.
  4. 04LegA stroke that comes down to rest on the baseline.
  5. 05BaselineThe invisible line every letter stands on. Everything else is measured from it.

Nested frames of type, each holding a smaller copy of the page: infinite typography, type inside type inside type.

Ch. 07Infinite Typography

Every frame holds the next one.

Fifteen nested frames, each 74 percent of the last. Scroll, and the page keeps opening without ever reaching the end.

Ch. 08Perspective Layers

Depth is made of decisions about what sits in front.

Five flat planes: a field of color, a photograph, a word, a strip and a disc. Overlap them and the eye starts reading in depth. Scroll and each plane moves at its own distance from you.

LAYERS

SignalRead in front

Ch. 09Kinetic Composition

Scan line, width 62 to 125, weight 200 to 900

Every letter is a decision Weight is a voice Width is a pace Space is a breath.

A variable font carries a range, not a single style. Here the same five lines are set twice: once thin and condensed, once heavy and extended, and the reading line decides which one you see.

Ch. 10The Type Transformation

Stage 01 of 04Stage 02 of 04Stage 03 of 04Stage 04 of 04

Marks become signs, signs become words, words become a story.

Marks. Before language, a gesture left on a surface.

Signs. A mark that has started to stand for something.

Words. Signs that a group of people agree on.

Story. Words placed in an order that matters.

Four stages, five tiles, one composition. Each word arrives in its own typeface, width and weight, and the page changes color around it.

World 03/The Editorial Identity

Ch. 11The Introduction

Portrait, set in typeFig. 01

The introduction

I design how things look, and I build how they work.

Yazan NasserDeveloper & Digital Designer

I'm Yazan Nasser, a developer and digital designer. This portfolio is set as a magazine: seven worlds, thirty-five chapters and four projects, held together by one idea, that typography can carry an entire experience.

Practice
Developer & Digital Designer
This edition
Seven worlds, thirty-five chapters

Ch. 12Creative Philosophy

Four principles

A beautiful typographic composition is better than bad 3D.
Yazan Nasser, from the brief for this edition
  1. 01

    Typography first.

    Type is the primary visual language here, not decoration laid on top of a layout.

  2. 02

    Every movement has a reason.

    A deliberate start, a deliberate end, and stillness in between the moments that matter.

  3. 03

    Quality over quantity.

    The aim is never the most animations on a page. It is the right ones, timed well.

  4. 04

    Nothing fake.

    Every interaction works, or it does not appear. No dead buttons, no placeholder magic.

Ch. 13The Visual Story

A picture essay in five figures

A visual vocabulary for this edition.

Print, space, light, texture and color: the five materials the pages of this magazine are built from. Each figure stands for one of them and lends its palette to the chapters around it.

Three posters of overlapping circles in red, teal and orange, clipped to a line on a white brick wall.
Fig. 1. Print. Three sheets, overlapping circles, flat color.
A peach building with balconies against a clear blue sky.
Fig. 2. Space. Color carried by a building.
Clear droplets on fine strands, splitting light into rainbow colors.
Fig. 3. Light. White, split into a spectrum.
Rows of teardrop shaped wooden blocks in white and tan, arranged in a repeating pattern.
Fig. 4. Texture. Repetition turns into pattern.
A round palette of mixed paints and four brushes on a yellow wooden table.
Fig. 5. Color. Mixed by hand before it is picked by hex.

Nothing on these pages is decoration for its own sake. A photograph earns its place by lending the type a color, a texture or a rhythm.

Ch. 14Design Thinking

01020304of 04

Idea

An idea is a point: small, bright, and easy to lose.

Concept

A concept gives the point a shape and a direction.

Design

Design decides every detail of that shape: grid, type, color, hierarchy.

Product

A product is a design that works, in a browser, for a real person.

AaOPEN

Ch. 15The Personal Manifesto

Five refusals, one promise

Nouglymeshes.

Nouglymovement.

Nogenericscrolling.

Norepetitivetemplates.

Nofakefunctionality.

Every pixel, deliberate.

Signed, Y.N.

World 04/The Project Exhibition

Ch. 16The Exhibition Introduction

Four rooms.Four projects.

Each project gets its own room, its own color and its own way of setting its name. Point at a room to hang it on the gallery wall.

  1. 01My Subs
  2. 02Ostudent
  3. 03FutureGen
  4. 043Truth
A quiet gallery room with a wooden bench and a large illuminated canvas on the wall.
Room 00. The canvas shows the room you point at.Fig. 7

Ch. 17My Subs

01 / 04

Room 01, case study

My Subs

Identity
Coral and ink. Stacked capitals, an italic “My”, echoes in outline.
Open the case study

Ch. 18Ostudent

02 / 04

Room 02, case study

Ostudent

Field
Education technology
Identity
Electric blue on ruled paper. The O drawn as an orbit.
Open the case study

Ch. 19FutureGen

03 / 04

Room 03, case study

FutureGen

Identity
Ink, acid and violet. Extended thin capitals over a glyph field.
Open the case study

Ch. 203Truth

04 / 04

Room 04, case study

3Truth

Identity
Tangerine and lavender. One name, set three ways, as a triptych.
Open the case study

Ch. 21The Coming Soon Edition

Page reserved

Reserved

The next edition.

This page is held for the next project. It has no name yet, so it has no headline yet. When it is ready, it gets its own room in this exhibition.

Write to the editorSpace to come

World 05/The Experimental Laboratory

Ch. 22Dimensional Typography

Two letters, extruded.

The initials of the name, drawn as outlines, pushed into depth and lit like an object on a table.

Material

Electric blue under a clear coat, with a thin-film shimmer that shifts with the angle.

Outlines
Y in 9 points, N in 10, straight strokes only
Extrusion
0.32 em deep, beveled 0.022 em over 8 steps
Light
A virtual room, one warm key, a violet rim, a tangerine fill
Interaction
Point to tilt, drag to spin, release to coast

Drag to turn the letters

FLUID

Ch. 23Fluid Compositions

Move the pointer through the field

Noise folded into itself three times, computed for every pixel on the graphics card. Nothing here is a video: the field is drawn live, about sixty times a second, and only while you can see it.

Ch. 24Generative Art

Same seed, same artwork

Glyph Y · Seed 1907 · 0%

A letter, set loose.

The composition is computed, not drawn. Change the seed and you get a different piece; keep it and you get the same one, line for line.

  1. 01A letter of the name is drawn in secret and its pixels are sampled.
  2. 02Fifteen hundred particles are born inside the letter.
  3. 03Each one follows a noise field built from a seed number.
  4. 04Every step leaves a faint line. Two hundred and sixty steps later, the piece is done.

Save PNG downloads the canvas exactly as you see it, at the resolution of your screen.

Ch. 25Interactive Materials

Four surfaces, one light

The same word, made of four different things.

Chrome, glass, foil and paper are not images here. Each is a stack of gradients and shadows that recalculates as the light moves. Move across the tiles, or drag a finger over them.

01
ChromeA metal gradient bent around the light, with a hot spot where it lands.
02
GlassA clear letter over color: an edge, a highlight and a shadow, and nothing else.
03
Holographic foilA conic spectrum anchored to the light, so the color travels as you move.
04
Pressed paperThe letter has no color of its own. Light and shadow press it into the sheet.

Ch. 26The Visual Experiment

Experiments 01 and 02

Experiment 01, letters with physics

Spring, push, settle

Move closer. The letters make room for you.

Each letter is a small spring. Your pointer pushes, the spring pulls back, and the line settles by itself.

Experiment 02, the axis playground

Width and weight, live

Every letter is a decision

62
900
9 vw
-0.03 em

Archivo variable: width 62 to 125, weight 100 to 900. Same font file, every setting.

Every experiment of this issue, with its working notes, is collected in the laboratory.

Enter the laboratory

World 06/The Expertise Journal

The Expertise Journal

Ch. 27Development

Section A, Development

Development is where a design meets the real world, and either holds up or does not.

This edition is a working product, not a picture of one. Every page is a real address that can be opened directly, shared and reloaded, and every link that leaves a page goes through the same transition engine.

That engine covers the outgoing page, waits for the next one to load, swaps them out of sight, restores your scroll position when you come back with the browser buttons, and then reveals the new page. Five transition styles share that one mechanism.

The profile, the exhibition and the letters you send are stored in a database and edited without touching code. The heaviest pieces, the 3D sculpture and the shader, load only when you come near them and stop working when you scroll away.

page-shell.tsx

1cover.then(() => {2    if (cancelled) return3    transitionStore.setRevealPending(Boolean(state.active))4    setDisplayed(incomingRef.current)5})
Excerpt from the transition engine of this edition: the new page is only put in place once the cover has fully closed.

Ch. 28Digital Design

Section B, Digital Design

A design system, decided before a single page was set.

UI and UX here start from a small set of rules: eight colors with jobs, one variable typeface with a serif for contrast, a twelve column grid, and a few promises about how the interface behaves.

The palette

  • Electric#2b36ff
  • Violet#7a2bff
  • Lavender#cdbdff
  • Coral#ff5e4d
  • Tangerine#ff8a1e
  • Acid#e4ff3a
  • Paper#f5f0e6
  • Ink#0d0c11

The type scale

  • AaMega16.5 percent of the screen width, up to 304 px
  • AaDisplay6.6 percent of the width, up to 112 px
  • AaSerifInstrument Serif, for voice and contrast
  • The lead paragraphStandfirst19 to 26 px, line height 1.32
  • Running text for readingBody16 to 17 px, line height 1.62
  • Technical labelsLabelJetBrains Mono, 11 px, tracked 0.14 em

The grid

Twelve columns. Text often takes five, images seven, and the best pages break the rule on purpose.

The interface rules

  1. 01Focus is always visible, on every link and control.
  2. 02Every page can be read and used with the keyboard alone.
  3. 03The reduced motion setting turns every scroll sequence into a still page.
  4. 04Nothing essential depends on WebGL. Each 3D piece has a typographic stand-in.

Ch. 29Creative Coding

Section C, Creative Coding

Twenty lines of code, one rose made of a name.

Creative coding treats a program as a drawing instrument. This function walks around a rose curve and drops a letter of the name at every step. Change one number and the drawing changes.

letter-rose.tsThe code
1const drawLetterRose = (context, size, petals, text, colors, family) => {2    const center = size / 23    const radius = size * 0.444    const steps = 7205    const letters = text.replace(/\s/g, '')67    context.textAlign = 'center'8    context.textBaseline = 'middle'910    for (let step = 0; step < steps; step++) {11        const angle = (step / steps) * Math.PI * 212        const distance = Math.cos(petals * angle) * radius13        const x = center + Math.cos(angle) * distance14        const y = center + Math.sin(angle) * distance1516        context.fillStyle = colors[step % colors.length]17        context.font = `800 ${8 + (Math.abs(distance) / radius) * 18}px ${family}`18        context.fillText(letters[step % letters.length], x, y)19    }20}
CanvasThe output
4, 8 petals

Ch. 30Technology

Section D, Technology

The index.

The technologies listed here are the ones this edition is actually built with, each with the chapters where it does its work. Follow a chapter number to see it running.

  1. Next.jsRoutes, static pages and the page shell.Every page
  2. ReactEvery component on every page.Every page
  3. TypeScriptThe whole codebase, typed end to end.Every page
  4. Tailwind CSSLayout, tokens and the type scale.Every page
  5. GSAP and ScrollTriggerScroll storytelling, pinned scenes and page transitions.0102051017
  6. Three.js and WebGLThe extruded monogram and its materials.22
  7. GLSLThe fluid field shader.23
  8. Canvas 2DGenerative art, the letter rose, the floor grid.032429
  9. CSS 3D transformsThe avenue of letters and the exploded layers.0308
  10. Variable fontsWidth and weight used as motion.020926
  11. SVGMasks, letter anatomy and drawings.050614
  12. SQLiteThe editable profile, the projects and your letters.111635

Ch. 31The Creative Process

Section E, The Creative Process

From an idea to a working product, in eight frames.

1Brief

Write down what it must do, and what it must never do.

2AReference

Collect color, texture and light before choosing anything.

AaAa
3Type

Choose the typefaces first. They decide the voice.

4ALayout

Set the grid and the hierarchy, then break them on purpose.

5Motion

Give every movement a start, an end and a reason.

const page = render()route.open(page)data.load()return page
6ABuild

Make it real: routes, data, performance and accessibility.

7Ship

Publish it, read it on a phone, and fix what feels wrong.

+
8AAgain

Start over with the next brief, a little better each time.

World 07/The Final Publication

Ch. 32The Perspective

Typography times editorial art direction times creative development times interactive visual experiences.

Four disciplines, multiplied rather than added. Take any one away and the product is zero.

Ch. 33Selected Details

Six close-ups

Details, enlarged until they become pictures.

Every tile is rendered live from the same type and shapes as its chapter. Select one to go back to where it came from.

Ch. 34The Closing Statement

End of Issue Nº 01

Fin.

Every chapter, every transition, every letter:deliberately designed.

Thirty-five chapters, seven worlds. Thank you for reading to the last page.

Ch. 35Contact

The letters page

Letters to the editor.

A project, a collaboration, or a word about this issue: write it here. Every letter is kept and read.

The letter is about

Yazan Nasser

Developer & Digital Designer

Typographic Universe, Issue Nº 01

Made with Modulify