WebAppers

/ best free open source web resources /

Shopify

Google Released Noto Free Font for All Languages

Posted · Category: Fonts

Noto is Google’s font family that aims to support all the world’s languages. Its design goal is to achieve visual harmonization across languages. With multiple styles and weights. Freely available to all. Noto fonts are under Apache License 2.0.

Currently, Noto covers all major languages of the world and many others, including European, African, Middle Eastern, Indic, South and Southeast Asian, Central Asian, American, and East Asian languages. Several minority and historical languages are also supported. Support for Simplified Chinese, Traditional Chinese, Japanese, and Korean has been added in July 2014.

google-noto-font

Requirements: -
Demo: http://www.google.com/get/noto/
License: Apache 2.0 License

The Best Typefaces from Google Web Fonts Directory

Posted · Category: Fonts, License Free

Beautiful Web Type is a showcase of the best typefaces from the Google web fonts directory. There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Check out the examples to get the typeface from the Google web fonts directory.

google-web-fonts

Requirements: Google Web Fonts
Demo: http://hellohappy.org/beautiful-web-type/
License: License Free

Shine.js – A Library for Pretty Shadows

Posted · Category: Fonts, MIT License

Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows. And there is no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.

shine-js

Requirements: JavaScript Framework
Demo: http://bigspaceship.github.io/shine.js/
License: MIT License

How to Create Fluid Type with CSS Smarts

Posted · Category: Fonts, License Free

Keeping your type at comfortably readable line lengths can be quite a challenge with responsive design. When viewports can be nearly any size under the sun, it can feel like we’re going to need a whole lot of media queries and coaxing to keep our type in check. We want our type to be stretchy, but not too stretchy, and we want it to look good across the board.

Today, designer Val Head builds a demo to show us how to create Readable, Fluid Type With Basic CSS Smarts for all screen sizes and resolutions without a dev’s expert assistance and without a lot of complex code.

Centered, single text-column layouts are quite popular these days and are exactly the sorts of layouts that suit simple techniques to keep your type flowing flexibly and within a safe range. Beautiful, fluid type with less work.

responsive

Requirements: -
Demo: http://typecast.com/blog/readable-fluid-type-with-basic-css-smarts
License: License Free

Gridlover – Typographic System with Modular Scale

Posted · Category: Fonts, License Free

Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css.

Simply drag the numbers in the top toolbar left and right to adjust their value. Elements in Gridlover are always kept aligned to a pixel perfect baseline grid. The font scale in Gridlover is calculated by stepping up the font size by the scale factor for each heading level. Line heights are fitted to the font size.

grid-lover

Requirements: -
Demo: http://www.gridlover.net/
License: License Free

Brick – Web Fonts that Actually Look Good

Posted · Category: Fonts, License Free

In the age of the Internet, we’ve found ourselves in yet another typographic battle. In an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost the majority of the quality of rendered type.

Let’s change that. The fonts served by Brick are clones of the original, converted without modification to several formats for wider browser compatibility. All fonts are served as WOFF-compressed versions of the originals—no quality lost.

bricks-fonts

Requirements: -
Demo: http://brick.im/
License: License Free

Glyphr – A Free HTML5 Based Font Editor

Posted · Category: Fonts, License Free

Glyphr is a free, html5 based font editor. Font design has a high barrier of entry. Professional font design programs are very complex, and quite expensive. Glyphr is accessible, streamlined, and made for font design hobbyists, and it’s free.

You can create complex shapes, copy & paste, flip ‘em around or lock them down, drag & resize to your heart’s content. Edit paths with cubic Bezier curves. Define a shape once, like an ‘o’, and re-use it across many characters, like ‘bdgpq’. Make changes to the Linked Shape, and it updates all the characters linked to it.

font-designer

Requirements: -
Demo: http://glyphrstudio.com/
License: License Free

Tiff – A Visual Typeface Diff Tool

Posted · Category: Fonts, License Free

Tiff is a typeface diff tool that visually contrasts the differences between two fonts. It’s a tool to help comparing two fonts while learning about typography. At this point, Google Web Fonts serves as the only source of external fonts for Tiff. Since the app uses some features only available in HTML5 and CSS3, use recent versions of modern web browsers for maximum compatibility.

tiff

Requirements: -
Demo: https://tiff.herokuapp.com/
License: License Free

Margot – Adoring Typefamily Designed for Large Sizes

Posted · Category: Fonts, License Free

Margot is an adoring type family designed and optimized for the use in large sizes. Capable of bringing a very human feel to a great variety of typographical purposes.

Margot is vibrant, cheerful and perfectly suited for editorial, posters, corporate identities or signage systems. The three weights and true italics come with a perfect balance of curves and sharp endings, which make this a playful but still strong typeface. And best of all, you can download Margot type family for free.

margot-font

Requirements: -
Demo: http://www.behance.net/gallery/Margot-Free-Font/13819879
License: License Free

Apply CSS Based on the Text Rasterizer and Antialiasing

Posted · Category: BSD License, Fonts

Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user agent string. It will then add two classes to your HTML element. One class will describe the text rasterizer and the other is antialiasing method.

Type Rendering Mix is useful in many situations. Let’s say you are using Proxima Nova on your website. Due to the way the Core Text rasterizer works, fonts will look heavier on OS X and iOS than on other platforms. Using Type Rendering Mix you can instead decrease the font weight for browsers that use Core Text to render text. By only applying changes when Core Text is used you will achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.

type-rendering

Requirements: JavaScript Framework
Demo: http://typerendering.com/
License: BSD License

Page 1 of 71234567»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons