فونت‌های نامرئی در طراحی وب

یکی از ایده‌های جدید در طراحی وب، استفاده از فونت‌های نامرئی است. یک فونت نامرئی فونتی است که تمام نویسه‌های آن خالی هستند و متن‌های نوشته شده با آن هیچ فضایی اشغال نمی‌کنند.
یکی از مشهورترین این فونت‌ها Adobe Blank نام دارد که از این نشانی می‌توانید آن را دریافت کنید.
این فونت‌ها می‌توانند کاربردهای گوناگونی داشته باشند که چند نمونه از آن‌ها را در ادامه مشاهده می‌کنید:

آگاهی از بارگزاری کامل فونت

برای آگاه شدن از بارگزاری کامل فونت‌های سفارشی، می‌توان فونت یک عنصر را ابتدا با فونت نامرئی و سپس فونت سفارشی مقدار دهی کرد. پیش از بارگزاری کامل فونت اصلی، عرض عنصر مساوی صفر خواهد بود و پس از بارگزاری فونت اصلی، عرض آن افزایش خواهد یافت.

span.font-load-detection {
	font-family: AdobeBlank, CustomFont;
}

خالی ماندن سایت پیش از بارگزاری فونت اصلی

با استفاده از فونت نامرئی به عنوان فونت پیش‌فرض، محتوای سایت پیش از بارگزاری فونت اصلی خالی به نمایش در خواهد آمد و در نتیجه، کاربران سایت را پس از تکمیل دریافت اطلاعات به صورت مورد نظر مشاهده می‌کند.

جلوگیری از ایجاد فاصله بین عنصرها

عنصرهای HTML که حالت نمایش inline-block داشته باشند، باید بدون فاصله در ادامه‌ی یکدیگر قرار بگیرند تا بینشان فاصله نیفتد. این شکل نمایش معمولا در منوهای سایت یا برای برخی نیازهای دیگر مورد استفاده قرار می‌گیرد. می‌توان از یک فونت نامرئی برای متن پس زمینه استفاده کرد تا این فاصله از بین برود.

بهینه‌سازی موتورهای جستجو - SEO

با استفاده از فونت نامرئی می‌توان در هر محلی از سایت، متن دلخواه را درج کرد. این متن توسط موتورهای جستجو قابل مشاهده و توسط کاربران غیرقابل دیدن است. از جمله کاربردهای این تکنیک می‌توان به درج نوشته روی تصویرهای پس‌زمینه اشاره کرد.

<style>
	h1 {
		font-family: AdobeBlank;
		background-image: url( 'user-sees-this-image.png' );
	}
</style>
<h1>Google sees this text</h1>

استفاده در فونت‌های آیکون

فونت‌های حاوی تصویر به صورت روزافزون در حال توسعه و به کارگیری هستند. با نامرئی کردن نویسه‌های کوچک و قرار دادن آیکون در محل حروف بزرگ می‌توان با نوشتن متن، آیکون ایجاد کرد:

<style>
	span.icon {
		font-family: IconFont;
	}
</style>
<span class="icon">Google+</span><!-- small letters are invisible -->
<span class="icon">Facebook</span>
<span class="icon">Twitter</span>