simple-typography - A simple starting ground for beautiful typography on the web using Sass.

  •        8

Making the type on your blog beautiful with ease. Using Sass variables to calculate line heights, font sizes, margins and paddings. You create the amazing content and simply make it beautiful. Copyright of Adam Marsden and contributors. Licensed under the MIT license.



Related Projects

typi - A sass mixin to make responsive typography easy

  •    CSS

Typi does two things for you incredibly well. Here's a quickie example for both points.

typebase.css - A starting point for good typography on the web.

  •    HTML

Both force designers & developers to do extra work to realize their design. Let typebase.css handle the vertical rhythm and spacing, you handle the typefaces and design. The most important thing that typebase.css gives you is an enforced vertical rhythm across all most screens (working on mobile). This insures that text across columns and long copy doesn't become uneven.

Centurion - Centurion is a web-based framework for rapid prototyping and building larger web projects

  •    CSS

Centurion is a responsive framework built for speed, simplicity, and flexibility. Originally based loosely on the 960 grid built by Nathan Smith, Centurion boasted a responsive grid system that would help alleviate the headache of building responsive designs. Like all web projects it grew and started to capitalize on several different areas like: typography, buttons, tables, and more in order to create a seamless framework that could allow web developers to start up a new project easily without the need to override every little piece. If you're concerned about browser support then we recommend either html5shiv or Modernizr to your web site or project to help support CSS3 and HTML5.

react-native-typography - Pixel–perfect, native–looking typographic styles for React Native ✒️

  •    Javascript

Pixel–perfect, native–looking typographic styles for React Native. Creating great Text Styles in React Native is not a simple task, it requires a lot of fiddling and handling edge cases.

typography.js - A powerful toolkit for building websites with beautiful design

  •    Javascript

A powerful toolkit for building websites with beautiful typography. A powerful toolkit for building websites with beautiful design.

google-type - Collaborative typography project using select passages from Aesop's Fables set to Google Fonts

  •    CSS

Thousands have visited this project and many are using this as an ongoing reference tool to learn about typography. It's important that submissions (pull requests) demonstrate a good foundation in typography. The primary goal is to communicate, not decorate.

modularscale-sass - Modular scale calculator built into your Sass

  •    CSS

A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers. Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.

typography - A collection of web typography resources


A curated collection of awesome web typography articles.

utility-opentype - Simple, CSS utility classes for advanced typographic features.

  •    CSS

This is described in more detail in the design decisions. The following examples are supported on Chrome, Firefox, and Internet Explorer 10+ and fallback as gracefully elsewhere. Works on its own, or alongside frameworks like Basscss. That’s it! You’re ready to use the classes within your markup.

now-ui-kit - Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim

  •    CSS

Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates. Now will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the 12 column grid system, with components designed to fit together perfectly. It makes use of bold colours, beautiful typography, clear photography and spacious arrangements.

tufte-css - Style your webpage like Edward Tufte’s handouts.

  •    HTML

Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents. This project is directly inspired by and based on Tufte-LaTeX and the R Markdown Tufte Handout.

toolkit - Toolkit for Responsive Web Design and Progressive Enhancement with Compass

  •    CSS

Think of Toolkit as your swiss army knife for modern design and development. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy. Toolkit is broken out into individual pieces, so grab what you want, grab what you need, or grab the lot; the choice is yours. Then, add require 'toolkit' to your config.rb file and @import "toolkit"; to your Sass file.


  •    Javascript

Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure. Note, do not download files directly from git repository, unless you know what you are doing.

motherplate - A bare bones responsive SCSS boilerplate for web designers

  •    CSS

This is a bare bones HTML/CSS framework. This is what I'll typically start off most web projects with. It includes a CSS reset and a bunch of minimal boilerplate styles that should come in useful for any project, including a responsive grid, typography, buttons, icons and forms.

sing-app - 💥Free and open-source admin dashboard template built with Bootstrap 4 💥

  •    HTML

Including responsive layout and high quality UI built with Bootstrap 4. This repository contains a limited free version of Sing App. Full bootstrap 4, React with backend, Angular and Angular JS versions are also available and are shipped in a full package.

rfs - Automated responsive font sizes

  •    CSS

The source files can also be downloaded manually and used in a project. This method is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency.

bibliotype - A base for longform tablet typography in HTML

  •    Javascript

A base for longform tablet typography in HTML

kerning.js - Take control of your web typography.

  •    Javascript

Take control of your web typography.

minimal-mistakes - A responsive Jekyll theme with large full page images and clean typography.

  •    CSS

A responsive Jekyll theme with large full page images and clean typography.

Han - ????????——??????????????The CSS typography framework optimised for Hanzi.

  •    CSS

????????——??????????????The CSS typography framework optimised for Hanzi.