from fasthtml.common import * from fasthtml.jupyter import *
audrey.feldroy.com
The experimental notebooks of Audrey M. Roy Greenfeld. This website and all its notebooks are open-source at github.com/audreyfeldroy/audrey.feldroy.com
# Minimal Typography for FastHTML Apps
by Audrey M. Roy Greenfeld | Sat, Dec 28, 2024
When using `pico=False` and no CSS framework, a FastHTML page doesn't look great. Can we use minimal typography to make it look decent, without dependencies?
Setup
Styling the Bare Minimum
I style :root
because it's the highest-level CSS selector. The bare minimum to make a page look decent is font-family
:
css = ':root {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;} p {line-height: 1.5;}' s = Style(css) s
d = Div(s, H1("Typography Experiment"), P("Here's a paragraph of text for testing. "*20)) show(d)
Constraining Width
The only thing remaining to make the text look good is to constrain the width. Best to do that in a container div.
css = ':root {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;} p {line-height: 1.5;} #container {width: 800px; margin: 0 auto;}' s = Style(css) d = Div(s, H1("Typography Experiment"), P("Here's a paragraph of text for testing. "*20), id="container") show(d)
FastHTML App
Putting it into a page in a FastHTML app:
app, rt = fast_app(pico=False)
Here I run Uvicorn from this notebook. Replace this with serve()
at the bottom if you are using this in a main.py:
server = JupyUvi(app)
@rt def index(): return Div( Style(css), H1("Typography Experiment"), P("Here's a paragraph of some text. "*20), id="container" )
Stop Server
Run this cell to stop Uvicorn:
if 'server' in globals: server.stop()
© 2024-2025 Audrey M. Roy Greenfeld