Typography is music expressed with fonts
Typography is the art and technique of arranging type to make written language legible, readable, and visually appealing. It involves selecting typefaces, adjusting font sizes, and controlling spacing to create effective visual communication.
It all starts with a brown fox jumping over a lazy dog. Click on any text on this article to get started.
| h1 | The quick brown fox jumps over the lazy dog |
| h2 | The quick brown fox jumps over the lazy dog |
| h3 | The quick brown fox jumps over the lazy dog |
| h4 | The quick brown fox jumps over the lazy dog |
| h5 | The quick brown fox jumps over the lazy dog |
| h6 | The quick brown fox jumps over the lazy dog |
| p | Geometry can produce legible letters, but art alone makes them beautiful. Art begins where geometry ends, and imparts to letters a character transcending mere measurement (Paul Standards). Type design is a job where there is no room for easy solutions. Letters can perhaps be designed quickly using a compass and ruler, but these are unsuitable for a typeface, as they fail to satisfy the subtle optical laws that make reading enjoyable (George Salden). Type is a beautiful group of letters, not a group of beautiful letters (Matthew Carter). Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty (Emil Ruder). |
| small | Small and cute, I am used in image/figure captions or (to say stuff in whispers) |
Above section shows preview of all typography tags available for modern web in one place. Keep changing their settings from right hand panel and view effects in real time. Rest of this page, designed like a blog, is to preview how different types mix with each other and how would a page full of alphabets look.
Text on this whole page except for the right hand settings is editable.GO WILD.(and except footer :)
Type Scale
A typographical scale is a system of font sizes designed to look good together, making text clear, organized, and visually appealing. It works like a pattern, starting with a small base size and increasing consistently using a ratio (e.g., 1.5 or 2). This creates a hierarchy where big sizes emphasize important text (like headings), while smaller sizes handle details (like body text). By keeping sizes harmonious, a typographical scale ensures your writing is easy to read and looks professional. It’s commonly used in books, websites, and design tools to maintain visual balance.
Popular scales
- Minor Second (1.067)
- Major Second (1.125): Good for minimalistic designs
- Minor Third (1.2): Got too much content on screen? try this scale
- Major Third (1.25): Provides subtle size variations, good for text heavy designs
- Perfect Fourth (1.333): A balance between reading and emphasis
- Augmented Fourth (1.414)
- Perfect Fifth (1.500)
- Golden Ratio (1.618): Based on popular mathematical ratio, observed everywhere in the 'verse
Upcoming Features
- Editor support for margin & padding
- Editor support for text alignment
- Editor support for text decoration
- Add help text for different fields (a question mark icon?)
- Change this non-preview text to something usable and context appropriate
- Cool looking footer
- Responsive layout preview
- Fluid typography styles editor
This page is currently in development, so somethings might or might not work. Need some feature? email me or a message on x profile works too.