Babetta Webfont Specimen

Babetta

—Webfonts al dente—


The Babetta Type Family Webfonts

Babetta Thin
Babetta Light
Babetta Regular
Babetta Medium
Babetta Bold
Babetta Neon
Babetta Neon Case
Babetta Neon Tube

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.


Responsive Specimen

Even on small devices the words of this specimen will always fit to the width of the screen. Created with fittext.js

Modernissimo Lettere Alfabetiche
Famosi Amaretti
Gut gekauft—Gern gekauft!
Kaufhalle
The Quattro Stagioni Connection
Nuovo Fiore
Freunde der italienischen Oper

Fun with Layers

Neon
Neon

Babetta-NeonTube & Babetta-NeonCase as layers.


Glyphs

ABCDEFGHIJKLMNOPQRSTUVWXYZ.,:;!?¡¿*#'”°^#0123456789%‰€£$¥¢ƒ¼½¾+−=≠≈±≤≥÷×~∞¬¤©®℗™()[]{}µπ∏∑√∫Ω∆▯◊&@§/|¦\-–—_›‹«»¶†‡‚‘’„“”←↑→↓ÀÁÂÃÄÅĀĂĄǺÆǼÇĆĈĊČĎÐĐÈÉÊËĒĔĖĘĚĜĞĠĢĤĦIÌÍÎÏĨĪĬĮİIJĴĶĹĻĿŁÑŃŅŇŊÒÓÔÕÖŌŎŐØǾŒÞŔŖŘŚŜŞŠȘŢŤŦÙÚÛÜŨŪŬŮŰŲŴẀẂẄÝŶŸỲŹŻŽ

Created with the help of lettering.js


Font Features

Babetta comes with some nice features, like an alternate versions for ›E‹ or ›S‹, compact variants of some diacritic characters and additional decorative ligatures. For desktop fonts these features can be accessed via the OpenType menu. For webfonts this works via CSS. Font features are part of the CSS3 specifications and supported by most browsers. The support for the font-feature-settings is documented here. To get these features to work, make sure the webfonts contain all necessary characters.

Subsetting webfonts will limit the character set (subsetting webfonts helps to make a better loading performance). Another way of using one or more of the alternate glyphs might be to exchange these glyphs with the deafult characters. By doig so you will not need font-feature-settings.
The following examples show all features that come with Babetta and the CSS code on how it works.


OpenType Feature Stylistic Set 01

Le Café Olé
E → E    È → È    É → É    Ê → Ê    Ë → Ë    E → E
E → E    E → E    E → E

Stylistic Set 01 contains an alternate circled ›E‹. The following code shows how to implement it:

Le Café Olé
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .ss01 { -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01=1"; -ms-font-feature-settings: "ss01" 1; }

OpenType Feature Stylistic Set 02

Soul Pasta
S → S    SS → SS

Stylistic Set 02 contains an alternate wavy ›S‹. The following code shows how to implement it:

Soul Pasta
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .ss02 { -webkit-font-feature-settings: "ss02"; -moz-font-feature-settings: "ss02"; -moz-font-feature-settings: "ss02=1"; -ms-font-feature-settings: "ss02" 1; }

OpenType Feature Stylistic Set 03

Bürgerbräu
Smœrrebrød
Ä → Ä    Ö → Ö    Ü → Ü    Å → Å    Æ → Æ    Œ → Œ    Ø → Ø

Stylistic Set 03 contains alternate versions of german and scandinavian diacritic characters. The following code shows how to implement it:

Bürgerbräu
Smœrrebrød
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .ss03 { -webkit-font-feature-settings: "ss03"; -moz-font-feature-settings: "ss03"; -moz-font-feature-settings: "ss03=1"; -ms-font-feature-settings: "ss03" 1; }

OpenType Feature Discretionary Ligatures

The Flat Inn
FI → Fi    FL → FL    La → La    Le → Le    LL → LL    OO → OO
OC → OC    CC → CC    Mm → MM    NN → NN    TH → TH    TT → TT
WWW → WWW    ZZ → ZZ

The feature Discretionary Ligatures contains special decorative letter combinations. The following code shows how to implement it:

The Flat Inn
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .dlig { -webkit-font-feature-settings: "dlig"; -moz-font-feature-settings: "dlig"; -moz-font-feature-settings: "dlig=1"; -ms-font-feature-settings: "dlig" 1; }

OpenType Fraction Feature

1/3 Vodka
1/72 Ramazotti
1/845 Gin

The Fraction Feature easily helps to build all kind of fractions. To implement it go like this:

1/3 Vodka
1/72 Ramazotti
1/845 Gin
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .frac { -webkit-font-feature-settings: "frac"; -moz-font-feature-settings: "frac"; -moz-font-feature-settings: "frac=1"; -ms-font-feature-settings: "frac" 1; }

OpenType Arrow & Copyright Feature

-> (C)opy(R)ight
(c) → (c)    (P) → (P)    (R) → (R)
-> → ->    <- → <-    -^ → -^    ^- → ^-

The Arrow & Copyright Feature is not a real OpenType Feature, actually it is the Discretionary Ligatures feature.
To implement it go like this:

-> (C)opy(R)ight
.FeatureExample { font-family: Babetta-Bold; font-size: 4em; line-height: 1.1; text-align: center; } .dlig { -webkit-font-feature-settings: "dlig"; -moz-font-feature-settings: "dlig"; -moz-font-feature-settings: "dlig=1"; -ms-font-feature-settings: "dlig" 1; }

About Babetta webfonts

Babetta is an uppercase display typeface that comes with some decorative typographical features. This webpage shows these features and displays the webfonts. The webfonts used on this page are build at MyFonts. When generating or downloading webfonts at MyFonts make sure to choose the ›Configure Kit‹ option and go with the setting ›Line Height: Native‹, otherwise there may be problems with the line height. Also make sure that you have the complete character set in your webfonts when you want to use any of the OpenType features.

If you want to learn more about OpenType featuers and CSS have a look here.

Purchase Babetta webfonts at MyFonts or Fontspring. MyFonts LogoFontspring Logo