Josefin Sans

.example-class {font-family: 'Josefin Sans';}

Josefin Sans

Thin

ExtraLight

Light

Medium

SemiBold

Bold

Josefin Sans is classified as a sans-serif font, characterized by clean lines and the absence of decorative elements at the ends of strokes.

Display

Handwriting

Monospace

Sans-serif

Serif

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
! @ # $ % ^ & * ( ) + =

Josefin Sans Used As Heading Examples

Hierarchy	Weight	Size	Line Height	Letter Spacing
Heading Level 1	Bold	64px	64px	0px
Heading Level 2	SemiBold	48px	64px	0px
Heading Level 3	Medium	32px	48px	0.5px
Heading Level 4	Regular	24px	32px	0.5px
Heading Level 5	Regular	16px	24px	0.5px
Heading Level 6	Medium	13px	16px	0.5px

Josefin Sans Used As Body Text

Element	Weight	Size	Line Height	Letter Spacing
Body Text	Regular	16px	24px	0.5px
Italicized	Regular Italic	16px	24px	0.5px
Bold	Bold	16px	24px	0.5px
Small Caps	Regular	16px	24px	0.5px
Secondary Text	Medium	13px	16px	0.5px

Fonts Similar to Josefin Sans

Zen Kaku Gothic Antique

Capriola

IBM Plex Sans Thai Looped

Geologica

Plus Jakarta Sans

How to Embed Josefin Sans in Your Project

Using a <link> tag in HTML

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">

Using @import in CSS

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

Using @font-face in CSS

@font-face { font-family: 'Josefin Sans'; src: url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap'); }

CSS Code Examples

.example-class { font-family: 'Josefin Sans'; }

Standard CSS Utilization: Applying the font-family directly to a CSS class for immediate use.

// SCSS Variable $example-class-font-family: 'Josefin Sans'; .example-class { font-family: $example-class-font-family; }

SCSS Variable: Defining the font-family in a variable for reuse across multiple styles, simplifying maintenance and updates.

// Tailwind CSS .example-class { @apply font-josefin-sans-sans-serif; }

Tailwind CSS Implementation: Using Tailwind CSS utility classes provides a consistent and streamlined way to apply styles, leveraging Tailwind's utility-first approach.

Josefin Sans's Details

Josefin Sans is a geometric sans-serif typeface designed by Santiago Orozco. It's inspired by geometric and Scandinavian design styles from the 1920s and 1930s. The typeface exhibits a clean, modern look with a vintage touch. Josefin Sans has a high x-height and round geometric forms. It features tall ascenders and descenders, which give it an elegant and airy appearance. Josefin Sans includes seven weights: Thin, Light, Regular, Medium, Semi-Bold, Bold, and Extra-Bold. Each weight maintains the font's distinct geometric structure. It's spaced for readability, with generous letter spacing and kerning. The typeface supports a wide range of characters and languages, making it versatile for global use. The design characteristics of Josefin Sans, Josefin Sans, include sharp, clean lines and minimalistic curves. The uppercase letters are particularly striking, with their elongated forms and consistent stroke width. Lowercase characters are designed with a subtle sophistication, featuring geometric shapes that enhance legibility. Graphic designers think about using Josefin Sans in various projects like branding, posters, and web design because of its clarity and elegance. Its versatility allows it to fit seamlessly into both modern and vintage-themed designs. The font's readability makes it suitable for both headlines and body text. Notable features of Josefin Sans include its distinctive 'J' with a curved tail and the unique 'Q' with an extended diagonal stroke. The numerals are monospaced, which can be beneficial for data presentation and coding. Ligatures are included, adding a touch of sophistication to the text. Josefin Sans's adaptability and clean design have made it popular in digital and print media. It is frequently paired with serif typefaces for a balanced and professional look. The font's geometric roots and modern execution ensure its relevance in contemporary design trends.

Accessibility Overview for Josefin Sans

Josefin Sans is an elegant, geometric, vintage typeface designed with a slender structure and a tall x-height. Its vintage sensibility combined with a modern touch makes it suitable for a wide range of applications. The font offers a distinguishing x-height measuring half of the cap height, available in various weights and italics, providing versatility for different design needs. It is commonly used for larger sizes due to its design characteristics.

Josefin Sans's Legibility

The font's legibility is enhanced by its tall x-height, which contributes to clear character differentiation and improved readability. The spacing and character design allow for effective differentiation between individual letters, ensuring legibility across various applications.

Josefin Sans's Readability

Josefin Sans performs well in various contexts such as long text passages, captions, and digital displays. Its slender structure and geometric design contribute to its readability in both print and digital formats. It offers good readability for longer texts and maintains clarity in smaller sizes for captions and digital displays.

Josefin Sans's Visual Fatigue and Adaptability

The font's slender structure and tall x-height may lead to potential visual fatigue in extensive reading materials. However, its adaptability across different devices and language scripts makes it a versatile choice for various design applications.

Josefin Sans Accessibility Recommendations

To enhance accessibility, it is recommended to ensure suitable contrast ratios for text displayed in Josefin Sans. Additionally, considering the font's slender structure, using larger sizes for body text and providing alternatives for users with visual impairments can improve readability across user groups.

Best Practices for Using Josefin Sans

When using Josefin Sans, it is best to pair it with complementary typefaces to create visual hierarchy and improve overall design aesthetics. For example, pairing it with a serif font like Cardo or a sans-serif font like Lato can create an effective typographic balance. Additionally, using Josefin Sans for headlines, titles, and larger text elements while opting for a more readable font for body text can create visually appealing and readable design compositions.

License Type

The font Josefin Sans is licensed under the SIL Open Font License (OFL). This license allows you to use, study, modify, and distribute the font freely. You can use the font for personal, educational, or commercial purposes without paying any fees. You can embed the font in documents and websites. Modification is allowed, but if you change the font and distribute it, you must rename it to avoid confusion with the original. For example, if you tweak the font's design, you should give it a new name before sharing your version. You can share the font with others. You must include the same license and any accompanying documentation. This ensures others have the same rights you received. Selling the font by itself is not allowed. However, you can include it in a larger project or product that you sell, like a book, website, or software. You cannot claim ownership of the font. The original creators retain their rights. You also can't use the font's name to promote your modified version unless you have permission. In summary, the SIL OFL for Josefin Sans provides broad freedoms for use, modification, and distribution, with some conditions to respect the original creators and maintain clarity.

Language Support

Josefin Sans supports a wide range of languages, primarily those using the Latin script, including Western European, Central European, and South Eastern European languages. This makes it a versatile font choice for projects targeting a diverse audience.

Download Weights & Variants

100

200

300

regular

500

600

700

100 italic

200 italic

300 italic

italic

500 italic

600 italic

700 italic

Josefin Sans

Fonts Similar to Josefin Sans

Zen Kaku Gothic Antique

Capriola

IBM Plex Sans Thai Looped

Geologica

Plus Jakarta Sans

How to Embed Josefin Sans in Your Project

Using a <link> tag in HTML

Using @import in CSS

Using @font-face in CSS

CSS Code Examples

Josefin Sans's Details

Accessibility Overview for Josefin Sans

Josefin Sans's Legibility

Josefin Sans's Readability

Josefin Sans's Visual Fatigue and Adaptability

Josefin Sans Accessibility Recommendations

Best Practices for Using Josefin Sans

License Type

Language Support

Download Weights & Variants

About Us