Yellowtail

.example-class {font-family: 'Yellowtail';}

Yellowtail

Yellowtail is classified as a handwriting font, mimicking the natural flow and style of handwritten text, adding a personal touch.

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
! @ # $ % ^ & * ( ) + =

Yellowtail 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

Yellowtail 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 Yellowtail

Bonbon

Yesteryear

Yuji Hentaigana Akebono

Crafty Girls

Vujahday Script

How to Embed Yellowtail in Your Project

Using a <link> tag in HTML

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

Using @import in CSS

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

Using @font-face in CSS

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

CSS Code Examples

.example-class { font-family: 'Yellowtail'; }

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

// SCSS Variable $example-class-font-family: 'Yellowtail'; .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-yellowtail-handwriting; }

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

Yellowtail's Details

Yellowtail is a cursive script typeface designed by Astigmatic. Yellowtail and Yellowtail's history began with its release in 2010. The designer, Brian J. Bonislawsky, created it to evoke the charm of mid-20th-century American signage. The font's design characteristics feature a brush-like style, achieving a balance between casual and formal elements. It has smooth, flowing lines with a slight slant, giving it a dynamic yet elegant look. The letters are connected smoothly, creating a harmonious flow. Its uppercase letters are bold and prominent, while the lowercase characters retain a more delicate appearance. Yellowtail is often used in branding, logos, and advertising materials. It's popular in industries like food and beverages, fashion, and lifestyle products. Designers think about using it for projects that need a friendly and approachable feel. Because of its legibility, it's also suitable for headlines and short texts. Notable features of Yellowtail include its unique swashes and ligatures. These elements add a personalized touch to any text. The font supports multiple languages, making it versatile for various applications. It has a high x-height, which enhances readability, even at smaller sizes. Overall, Yellowtail's combination of vintage charm and modern functionality makes it a favorite among designers. Its distinct style sets it apart, allowing it to stand out in diverse design contexts.

Accessibility Overview for Yellowtail

Yellowtail is a script font with a stylish and distinctive appearance. It features fluid, flowing lines and a sense of hand-drawn elegance. The font exudes a playful and informal vibe, making it suitable for a wide range of creative and casual applications. Yellowtail is often used in branding, logo design, invitations, and other design projects where a personal touch is desired.

Yellowtail's Legibility

Yellowtail's legibility can vary depending on its application. The font's spacing and x-height contribute to its overall legibility, and its character differentiation is generally clear. However, due to its script nature, some characters may require additional attention to ensure optimal legibility, especially in smaller sizes or when used for longer passages of text.

Yellowtail's Readability

In terms of readability, Yellowtail performs well in short text passages, headlines, and display settings where its unique style can shine. However, for longer passages of text, such as body copy, it may pose challenges due to its decorative nature and potential for reduced legibility at smaller sizes. When used in digital displays, it's important to consider the font size and contrast to ensure optimal readability.

Yellowtail's Visual Fatigue and Adaptability

The decorative nature of Yellowtail may lead to visual fatigue when extensively used in long-form content. It is best suited for short, impactful text rather than prolonged reading. Additionally, its adaptability across different devices and language scripts may be limited due to its specific design characteristics, which may not align with certain language scripts and digital platforms.

Yellowtail Accessibility Recommendations

For enhanced accessibility, it's recommended to use Yellowtail in larger sizes to improve legibility, especially for users with visual impairments. When incorporating the font in designs, ensure sufficient contrast ratios between the text and background to facilitate readability for all users. Consider providing alternative font options for extensive reading materials to accommodate diverse user groups.

Best Practices for Using Yellowtail

When using Yellowtail in design, it's best to employ the font for short, impactful text elements such as logos, headlines, or short phrases to leverage its unique style and visual appeal. For body copy and longer passages of text, consider pairing Yellowtail with a more legible and neutral font to maintain readability while still incorporating its distinctive aesthetic.

License Type

The Yellowtail font is under the SIL Open Font License (OFL). This license lets you use, study, change, and share the font freely. You can use it personally or commercially. You can include it in documents, websites, and applications without paying anything. You can modify the font and distribute your versions too. If you do, you must rename your version to avoid confusion with the original. This ensures the original creators get proper credit. You can't sell the font by itself. However, you can bundle it with software or content you sell. For example, you can include it in an app or a design package. The OFL aims to promote worldwide sharing and improvement of fonts. It helps developers and designers by providing clear guidelines. It's designed to be easy to understand and use, avoiding legal complications. So, you can freely use, modify, and share Yellowtail. Just don't sell it alone or misrepresent modified versions as the original.

Language Support

The Yellowtail font supports the basic Latin character set, which includes letters used in English and other Western European languages.

Download Weights & Variants

regular

Yellowtail

Fonts Similar to Yellowtail

Bonbon

Yesteryear

Yuji Hentaigana Akebono

Crafty Girls

Vujahday Script

How to Embed Yellowtail in Your Project

Using a <link> tag in HTML

Using @import in CSS

Using @font-face in CSS

CSS Code Examples

Yellowtail's Details

Accessibility Overview for Yellowtail

Yellowtail's Legibility

Yellowtail's Readability

Yellowtail's Visual Fatigue and Adaptability

Yellowtail Accessibility Recommendations

Best Practices for Using Yellowtail

License Type

Language Support

Download Weights & Variants

About Us