Matt Plaia | AstroGlyph

Type Design

AstroGlyph

AstroGlyph is a custom font that merges the early internet culture of emoticons and ASCII art with typographic design. Inspired by the evolving digital landscape, it reimagines text inputting as both communication and visual art, and bridges the past with the present in honor of digital history.

Designed for easy integration into web applications, the modular CSS creates a flexible 5×5 grid for each character, ensuring consistent spacing and alignment across platforms. The JavaScript handles the dynamic rendering and user interaction, allowing the glyphs to adapt to different input or display contexts. The window below includes a minimalist star field for interactive play and download.

CSS | HTML | JS

Graphic Design/Code: Matt Plaia

Full Window iFrame

.ilightbox-holder.black .ilightbox-alert{--wpr-bg-f1fde2fa-8a91-4ad4-83ac-a0e0c5f2b9be: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/alert.png');}.ilightbox-toolbar.black a{--wpr-bg-424cdbc2-d564-4455-b816-6743149a4ec7: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/buttons.png');}.lg-outer .lg-item:not(.lg-start-end-progress){--wpr-bg-e9664e74-6376-4dc8-af2f-711fe3c3c3f4: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-dark.svg');}.lg-thumb-item.thumbnail-video::after{--wpr-bg-46a06948-fe18-4f9d-83d9-5b2b96fec20a: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/thumb-overlay-play.png');}.owl-carousel .owl-video-play-icon{--wpr-bg-173a9953-4880-4397-a560-d3b82312195c: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/css/owl.video.play.png');}.rs-layer.slidelink a div{--wpr-bg-3b07f7a4-d777-449e-93ca-7bda012c7918: url('https://528ba028.delivery.rocketcdn.me/wp-content/plugins/revslider/sr6/assets/assets/coloredbg.png');}.rs-layer.slidelink a span{--wpr-bg-99596783-6474-4dc8-8c75-99aed65d4943: url('https://528ba028.delivery.rocketcdn.me/wp-content/plugins/revslider/sr6/assets/assets/coloredbg.png');}.grid-general-light .grid-wrapper.grid-loading:before{--wpr-bg-fa30805d-9f86-4e08-a7ec-cd01d408b5c2: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-light.svg');}.isMobile .ilightbox-toolbar.black a.ilightbox-fullscreen{--wpr-bg-773a7bcf-8670-4405-9c45-9857c2df138a: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/fullscreen-icon-64.png');}.isMobile .ilightbox-toolbar.black a.ilightbox-next-button{--wpr-bg-b16bd466-971d-43c0-b166-13e418af11cd: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/arrow-next-icon-64.png');}.isMobile .ilightbox-toolbar.black a.ilightbox-prev-button{--wpr-bg-2e94ce5b-d378-4339-8d95-dc5a9af5b4fc: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/arrow-prev-icon-64.png');}.isMobile .ilightbox-toolbar.black a.ilightbox-play{--wpr-bg-730498ee-0a87-408e-8652-1512f7d2bb0e: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/play-icon-64.png');}.isMobile .ilightbox-toolbar.black a.ilightbox-pause{--wpr-bg-2fdebb19-9bca-4a7d-b966-704338bc3b13: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/ilightbox/black-skin/pause-icon-64.png');}.unmodal-overlay.loading:before{--wpr-bg-d2015aa3-1ea9-44ac-b9e8-879591f42efb: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-dark.svg');}.tmb-light .t-entry-visual .add_to_cart_button.loading:after{--wpr-bg-28ee049a-dad9-4977-9f1c-2fdf74f04407: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-dark.svg');}.tmb-dark .t-entry-visual .add_to_cart_button.loading:after{--wpr-bg-c79996d4-3b48-4245-a79a-61fbab098e74: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-light.svg');}.style-dark a.button:not(.t-table-add-to-cart).loading,.style-dark button.button:not(.t-table-add-to-cart).loading,.style-dark input.button:not(.t-table-add-to-cart).loading,a.button:not(.t-table-add-to-cart).loading .style-light .style-dark,button.button:not(.t-table-add-to-cart).loading .style-light .style-dark,input.button:not(.t-table-add-to-cart).loading .style-light .style-dark{--wpr-bg-26203fc2-b09f-4dad-8f7d-007ce96aec15: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-light.svg');}.style-light a.button:not(.t-table-add-to-cart).loading,.style-light button.button:not(.t-table-add-to-cart).loading,.style-light input.button:not(.t-table-add-to-cart).loading,a.button:not(.t-table-add-to-cart).loading .style-dark .style-light,button.button:not(.t-table-add-to-cart).loading .style-dark .style-light,input.button:not(.t-table-add-to-cart).loading .style-dark .style-light{--wpr-bg-b12c92c4-2742-46bc-8782-7361323b5e76: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-dark.svg');}.style-light a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-light a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-light a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,.style-light button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-light button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-light button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,.style-light input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-light input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-light input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover{--wpr-bg-e023a02c-7272-4751-a0b5-91944b4928a3: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-light.svg');}.style-dark a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-dark a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-dark a.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,.style-dark button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-dark button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-dark button.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover,.style-dark input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):active,.style-dark input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):focus,.style-dark input.button:not(.t-table-add-to-cart).loading:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated):not(.btn-text-skin):hover{--wpr-bg-9e8dff9c-003d-4d86-96f5-94be5c6657de: url('https://528ba028.delivery.rocketcdn.me/wp-content/themes/uncode/library/img/oval-anim-dark.svg');}

Full Window iFrame