legible.css

Made by Linus Bohman for 040. If you need a beautiful and well crafted website or webapp, give us a call. We're based in gorgeous Malmö, Sweden, but work globally.

This app came to be after realizing we'd like a quick way to play with and test different elements on a page. It is the result of many hours of experimenting and research. Have fun. Write more about philosophy.

An in-depth look at what we're doing

I love typography, but I'm also mathematically challenged. You might even call me mathtarded. So how do you calculate different font sizes so they still relate well between each other and align to a grid? After some research, we start by setting some default values.

Now we can calculate other sizes we might want to have. Thus, we introduce two more options.

The formula for each element font size and line height looks like this:

Similar calculations are used when we determine indents and padding, but other than that we're free to go bananas with other styling. These calculations hold true for all (well crafted) fonts. Neat, right?

Old test case - here for legacy but will be replaced soon enough

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida venenatis consequat. In hac habitasse platea dictumst. Etiam pharetra, purus quis malesuada blandit, ligula nisi ornare nibh, condimentum fermentum quam metus vitae quam. inline code test Nulla ultrices, tortor sit amet scelerisque lobortis, neque arcu ornare sapien, et pellentesque tortor enim quis libero. Maecenas dapibus faucibus arcu, eu fringilla libero rutrum quis. Donec feugiat, arcu id commodo ornare, justo odio hendrerit libero, id venenatis nibh quam eget est. Aliquam in molestie metus. Integer venenatis commodo euismod. In hac habitasse platea dictumst. Sed et nisl quis lorem cursus rutrum. Nunc porttitor condimentum lorem sed hendrerit. Etiam semper quam vel sapien porta imperdiet a vitae nisi. In ut suscipit magna. Mauris eget felis dolor, non sodales magna.

Maecenas odio quam, scelerisque vitae blandit non, ornare consectetur lorem. In sit amet elementum sem. Curabitur vitae sem non sem pellentesque ullamcorper. Integer ipsum ligula, venenatis eget fermentum ac, rutrum in justo. Nullam a lacus neque. Praesent consectetur nulla ut tortor gravida a blandit arcu blandit. Etiam sed nunc ac leo vulputate condimentum id scelerisque elit. Nam eu tellus purus, a ornare velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean laoreet placerat magna, ac consectetur odio lobortis at. Morbi pharetra risus id erat aliquet vestibulum. Sed orci erat, vulputate et gravida id, vulputate quis mauris. Nam sapien est, ornare vitae ornare ultrices, dictum eu magna. Cras nec mauris nec nisi hendrerit mattis.

  1. ett
  2. två
  3. tre

Vestibulum nec cursus nibh. Duis luctus vestibulum velit, sed scelerisque felis bibendum id. Ut scelerisque fringilla nisl at tincidunt. Mauris vestibulum dolor sed lectus egestas interdum. Donec nisi nibh, lacinia porta facilisis ac, porttitor sed orci. Vestibulum quis adipiscing erat. Aliquam dignissim ante vel magna malesuada eu malesuada justo pulvinar. Curabitur eu augue ante, sit amet volutpat magna. Phasellus at sem non orci iaculis vehicula. Aliquam erat volutpat. Cras ultrices elit eget purus sagittis tempus. Suspendisse tempus metus at dui tincidunt vestibulum. Phasellus cursus, orci et volutpat ultricies, felis ante hendrerit velit, eget lacinia nunc mi a libero. Proin sagittis varius purus, a adipiscing enim faucibus quis.

Blockquote. Duis nec auctor massa. Sed fermentum, dui adipiscing aliquam dignissim, libero ligula ultrices erat, ac malesuada odio felis vel justo.

Vänsterställd. Vestibulum a enim neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non quam auctor purus egestas pretium. Praesent semper, diam ac pretium ullamcorper, sem ante laoreet turpis, sed malesuada arcu nisi eget nunc. Ut ornare varius lacus vitae ullamcorper. Nullam placerat, mi sit amet bibendum auctor, neque lacus semper est, ac posuere turpis mi eget lacus. Aenean iaculis euismod lacus lacinia lacinia. Curabitur egestas, nulla id iaculis suscipit, augue lacus vulputate ipsum, vitae facilisis dolor turpis ut velit. Aliquam pellentesque lectus id lorem porta adipiscing. Pellentesque feugiat ullamcorper pharetra. Suspendisse dapibus pellentesque venenatis.

Centrerad. Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus

Högerställd. Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Justerad. Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

.code-block-test {
        display: hellz-yeah;
      }

Heading 1

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Heading 2

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Heading 3

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Heading 4

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Heading 5

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Heading 6

Integer non diam ligula, iaculis volutpat nunc. Curabitur sagittis, sem at congue vestibulum, nulla justo accumsan metus, convallis lobortis orci velit sit amet est. Phasellus eu consectetur augue. Vestibulum volutpat magna et tortor bibendum non sagittis justo vulputate. Maecenas scelerisque nisl ac magna pretium eu lobortis magna commodo. Quisque mollis, enim sed congue vehicula, nisi leo facilisis massa, non egestas nibh ligula ac augue. Cras quis euismod ante. Nulla ac elit nulla. Phasellus viverra nunc a nunc semper ornare. Vestibulum sodales condimentum faucibus.

Sizes and spacing

General

Header 1

Header 2

Header 3

Header 4 - Header 6

Lists

Blockquotes

Highlights