WebAppers

/ best free open source web resources /

Shopify

Type Connection – A Typographic Dating Game

Posted · Category: Fonts, Tools

Type Connection is a game that helps you learn how to pair typefaces. Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes.

The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

type-connection

Requirements: -
Demo: http://www.typeconnection.com/
License: License Free

Typography Boilerplate for Minimal Website

Posted · Category: Fonts, License Free

Tpesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101. Simple include typesettings.css in the head section after your main stylesheet, and then add class="typesettings" to your article element.

type-settings

Requirements: CSS
Demo: http://mikemai.net/typesettings/
License: License Free

Typecast – A Gift of Web Design & Better Web Typography

Posted · Category: Fonts, License Free

Typecast™ is now a free web design tool. It’s a good news for everyone who cares about web typography and wants to work with web fonts, everyone who wants to design pages instead of pictures, every designer who wants to test rendering and responsive behaviors for themselves before handover, not late into production.

You’ll still be able to work with over 100,000 web fonts from the Fonts.com, MyFonts, Typekit, Google, Webtype, Fontdeck and Monotype libraries all under one roof—setting and styling type, comparing fonts, and fine-tuning your type systems. You’ll still be able to prototype detailed pages using our simple visual controls.

All about the RWD? You’ll still be able to add media queries, refine your designs for various breakpoints, and test those behaviors in the browser and on devices. And you’ll still be able to output your designs as CSS & HTML in order to hand your developers an itemized spec for build. All of the features will be available for free, and every font in the collection will be at your fingertips and free to use for design purposes.

typecast-free

Requirements: -
Demo: http://typecast.com/blog/typecast-becomes-free-web-design-tool
License: License Free

Dropcap.js Makes Beautiful Drop Caps Easy for the Web

Posted · Category: Fonts

Decorative initials, also known as drop capitals or “drop caps”, should be positioned on a baseline of the adjoining text; they should also be tall enough to reach the cap height of the first line of text.

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough. Dropcap.js makes beautiful drop caps easy for the web. We tested dropcap.js on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).

dropcap-javascript

Requirements: JavaScript Framework
Demo: http://webplatform.adobe.com/dropcap.js/
License: Apache 2.0 License

Find the Name of a Font with Fontface Ninja

Posted · Category: Fonts, License Free

You’re browsing a website and you want to find the name of a font? Here comes the Fontface Ninja. You can easily hide all pictures and commercials. You can now enjoy fonts on a blank background. You can also try or download a font with Fontface Ninja.

fontface-ninja

Requirements: -
Demo: http://fontface.ninja/
License: License Free

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

Page 1 of 71234567»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons