Legible CSS

12 Mar 2023

When the global pandemic hit, many companies and communities had to get messages out in a format that worked for a large range of devices, screen sizes and languages. Unfortunately many of them required a megabytes worth of JavaScript just to achieve that. Going back to first principles, what is absolutely required to get a message out?

HTML, as a universal format most devices understand.
CSS, to style that content to make it clear and easy to consume.

Legible allows you to focus on the content and not worry about style formatting and visual consistency. Built as a completely standalone, dependency free CSS file you can include with ease, Download Legible CSS

This new version of legible is heavily inspired by this article from Set Studio.

Lists

One
Two
Three
Four
- One
- Two
  - One
  - Two
    - One
  - Three
- Three
Five
Six

One
Two
1. One
2. Two
  1. One
  2. Two
  3. Three
3. Three
Three

Code

// A classic Hello World.
console.log('Hello world');

Press ctrl + alt + delete.

Tables

File	Size
legible.css	1.3kb
index.html	4kb

Quote

'If today were the last day of your life, would you want to do what you are about to do today?'
Steve Jobs

Heading 1, this is an example of a long heading

Quia quae consequatur non vitae odio rerum nihil. Aut ut inventore odit quia hic repellendus. Saepe explicabo quaerat qui. Velit autem doloribus dolor reprehenderit quis natus. Odio consequatur rerum illo qui ducimus.

Heading 2, this is an example of a long heading

Heading 3, this is an example of a long heading, this is an example of a long heading

Heading 4, this is an example of a long heading, this is an example of a long heading, this is an example of a long heading

Heading 5, this is an example of a long heading, this is an example of a long heading, this is an example of a long heading

Heading 6, this is an example of a long heading, this is an example of a long heading, this is an example of a long heading

Latin

Vero possimus nihil voluptatem dolor. Laborum et veniam odit nihil. Quo atque quod officia non.

Excepturi quo unde sed fuga ea. Praesentium itaque temporibus ea. Voluptates sed aut facilis enim ex. Et repellat labore quis ut vitae aut quo. Iusto dolore dolor qui consequatur.

Blanditiis qui dolore facere explicabo sed. Voluptatem consectetur et officiis rerum esse excepturi non deleniti. Eos quo sit fugiat est. Temporibus dolor reiciendis vero id. Possimus vitae iste fugiat aperiam quia sit rerum. Similique molestias consequatur veritatis sapiente blanditiis inventore molestiae consequatur.

Cyrillic

Лорем ипсум долор сит амет, дебитис елеифенд диспутатиони ех сед. Пробо яуидам мелиус пер ан, сит хабемус урбанитас репудиандае цу, аццумсан нолуиссе симилияуе ет нам. Уллум легере волуптатум еа еум, ад яуаеяуе делецтус цонсецтетуер при. Ин солум репудиаре сентентиае про. Меи реяуе персеяуерис еи, сусципит постулант витуперата еу усу.

Еу бонорум глориатур яуо, мел идяуе фабулас ид. Аутем суммо зрил ест ан. Иус ут яуалисяуе диспутатиони, видиссе нумяуам еи вим, лабитур маиестатис еи сит. Сит еа долоре оффициис. Тамяуам репримияуе ад вис, нам ан долор интегре платонем. Еу магна деленит цотидиеяуе вис, амет еррор детерруиссет хис ет. Пер ет прима ассум сплендиде, еу омниум бландит цонцептам вим.

Нец алии либрис дицерет еа, иллуд апеириан мел цу, дицит пертинах алияуандо цум еи. Агам фиерент вулпутате сит ин, дуо ан ментитум дефинитионес. Ат фугит маиестатис вис, сит омниум аццусата интеллегат ин. Не ерос десерунт репудиандае про, не натум доцтус волумус про. Меи еа алияуам ерудити адолесценс, яуо нихил импедит епицуреи ид.

Greek

Λορεμ ιπσθμ δολορ σιτ αμετ, vιδιτ λεγιμθσ εα vιξ. Ει επιcθρι σαπιεντεμ πρι, αθγθε διcαντ δεφινιτιονεμ εθ ηασ. Τε vισ νθλλαμ βονορθμ, θτιναμ vιvενδθμ μελ εα, vελ ει τεμπορ αππαρεατ cονσετετθρ. Ενιμ μεισ γραεcε σεδ cθ. Ιν σιτ ασσθμ φαλλι, οcθρρερετ σπλενδιδε σcριβεντθρ ει ηασ, μεα αλβθcιθσ σθαvιτατε vθλπθτατε θτ.

Αν ιπσθμ qθανδο μεα, ειρμοδ αccομμοδαρε ιντελλεγεβατ νε qθο. Αν ατqθι δελιcατα σιτ, ομνεσqθε σινγθλισ ιν εθμ, εθ εστ εροσ περτιναcια. Αλια θτροqθε ηισ αδ. Νεc εθ qθεμ πριμισ.

Εα σεδ cαθσαε περcιπιτθρ, μεα cιβο μθcιθσ μεντιτθμ cθ. Vιμ θταμθρ cονσεcτετθερ ιν, qθο εα μαζιμ δεφινιτιονεμ, ρεγιονε νθσqθαμ δελιcατισσιμι εθμ εθ. Ει οπορτερε εvερτιτθρ μεα, εα σεα οφφενδιτ μαλθισσετ. Qθι νε αδηθc cοτιδιεqθε, qθι ει σcαεvολα προβατθσ ινcορρθπτε. Εστ cθ vερεαρ αccθσατα cονσετετθρ, περ ατ ταντασ νονθμεσ αccομμοδαρε, φερρι vολθπτατιβθσ εθμ εα. Εξ εστ πθτεντ τηεοπηραστθσ.

Chinese

天碁方効駒禁国元惑続沢集柏然込。刊表解話上別沈誠分答円殺。一於日長劇決彩木名好記要転視管害覧。物供員年結宏明仙後上従街真新拍力土科鏡済。思懇断校国証技細運復安著連権属雪主政。完役読度置際防住載検富香因百会芸載南。止関審秘稿決整起館歩更著中。堺子掃服廷今権評忘館業光辺年日魅多提修子。提楽告提竹投京紙宮当年販目生直診時。

百暮隈歳性初都書暮臓守岳要発季童経第転。点運安眺子官影菱帝関業団就全厳盤克未。式届躍題考検共捕携報考終賢海。知目白示渡左間始帯加必府問条経点楽共全月。必変兵治善市夜領分定窪藤身。連作足軽拝新物念火将題品幸二意民。断了参割告浴躍巨不衆真分基火。漂芸手材対制画紋館環業及雄水住程。地楽調社画頭最意市検棄取由岡江。

責海独禁交抗人断活理情装。市税変紙明美禁一割判必月際影至。携聞小査温並第含決検竹事矢載囲載案列大市。無掲実近滞監問録価職紙指営子箱。売男時沖論韓組売複論義猛会。精社副冊非向初委国射前的断。予府供物業場断込年格朝姿介。尚判暮刊作海帰似受権利碁飛物退要発深。形来術軽支半漬作内全載健能到催谷離懲報落。

Arabic

عل الساحل اقتصادية عدد, الخاطفة التحالف استراليا، كل جعل. وقبل إبّان الإكتفاء إذ بين, أسيا اتفاق لليابان لها لم. الساحة مواقعها هذه أم, ذات أوسع تغييرات في. عل اليميني ومحاولة غير. ان الأمم مواقعها جهة, جُل نتيجة بلديهما أي, مئات أمدها لها قد. أما القوى تكتيكاً هو. والتي استدعى الأوربيين أن بلا, الأول الساحل أضف ان, أجزاء وانهاء واستمرت ضرب ان.

حلّت لمحاكم عدم هو, أخذ ومضى إعادة الشمل من. هذه عن أطراف وبحلول الأوروبية،, جعل ان احداث ليتسنّى استراليا،, لإعادة العناد المعاهدات و كان. أكثر الضروري التنازلي قد بلا, بل حكومة أفريقيا أضف, فقد وزارة بالرّغم بالمحور ثم. ٣٠ بحق المضي موالية, كما الجديدة، لبلجيكا، بل. لان ان وجهان الأوروبيّون, الربيع، وبلجيكا، وبريطانيا ان وتم.

Hebrew

לוח או פיסול גרמנית. היא מה מוגש בגרסה. כיצד ולחבר והנדסה מה מדע, בה דפים שימושי העריכהגירסאות זכר. עוד דת בקרבת מיזמים האנציקלופדיה, מוגש המשפט ממונרכיה לוח גם.

מתוך ברית אנא אם. מלא קסאם מיותר מיתולוגיה דת, על החלה בהשחתה שער. על הטבע יכול טבלאות אחד, מחליטה קלאסיים ב כלל. מלא על תרבות פולנית.

של עוד ליום שימושיים. באגים שימושיים אל לוח, שער שימושי ביוטכנולוגיה אווירונאוטיקה של, שער כדור המחשב בה. דפים יידיש שאלות בה שתי, גם פנאי המשפט תיאטרון היא. דת כתב מיזם בהבנה מיתולוגיה, שער קבלו ביוני קלאסיים את, את רביעי בויקיפדיה זאת. רוסית ביוטכנולוגיה את עוד, רקטות אחרות ויקימדיה שכל של. על אנא תרומה שימושי, צעד נבחרים הקנאים מיתולוגיה או.