به نظر می‌رسد دو گروه در میان طراحان وب وجود دارد: کسانی که تایپوگرافی وب را می‌پذیرند، آن را آزمایش می‌کنند و تقریباً در همه طراحی‌های خود چیزهای جدیدی را امتحان می‌کنند. و کسانی که از آن دوری می‌کنند مانند طاعون، ترجیح می‌دهند از پشته‌های فونت استاندارد و ایمن برای وب با تنوع کمی استفاده کنند.
به نظر می‌رسد بسیاری از طراحانی که در گروه دوم قرار می‌گیرند، آرزو می‌کنند که بیشتر شبیه اولی باشند.
منابع زیر می توانند به شما در بهبود تایپوگرافی وب خود کمک کنند، صرف نظر از اینکه در کدام اردوگاه قرار می گیرید.
ابزارهایی برای ایجاد تایپوگرافی منحصر به فرد، مراجع و مقالاتی وجود دارد که می توانند اصول تایپوگرافی را به شما آموزش دهند، و الهامات و اخبار فراوانی برای به روز نگه داشتن شما در مورد وضعیت تایپوگرافی وب وجود دارد.
ابزارهای تایپوگرافی
Typetester
Typetester به شما امکان مقایسه می دهد حداکثر سه فونت، کنار هم، با هر متن نمونه ای که می خواهید. می توانید اندازه فونت پایه، نوع فونت، اندازه، پیشرو، ردیابی، تراز، فاصله بین کلمات، دکوراسیون، رنگ و رنگ پس زمینه را مشخص کنید تا تصویر بسیار دقیقی از ظاهر فونت های خود در وب سایت واقعی داشته باشید. سپس، وقتی همه چیز را به همان شکلی که می‌خواهید داشتید، می‌توانید CSS را بگیرید.
HTML Ipsum
HTML-Ipsum یک مولد لورم ایپسوم مخصوص طراحی وب است. HTML-Ipsum به جای اینکه تکه‌هایی از متن را به شما بدهد، می‌تواند متنی از پیش قالب‌بندی‌شده مانند پاراگراف‌ها، فهرست‌های مرتب، جداول خالی، فرم‌ها و فهرست‌های پیمایش را به شما بدهد. متن از پیش قالب بندی شده مانند این روشی عالی برای صرفه جویی در زمان هنگام ایجاد مدل های وب سایت و طرح های اولیه است.
Typechart
Typechart به شما امکان می‌دهد مرور کنید فونت های از پیش قالب بندی شده و ایمن برای وب، و آنها را همانطور که در رایانه شخصی ویندوز و مک ظاهر می شوند مشاهده کنید. می‌توانید فونت‌های موجود را بر اساس اندازه، فونت و تأکید مرتب کنید.
WP-Typography
WP-Typography یک افزونه وردپرس است که به جذاب‌تر کردن تایپوگرافی استاندارد WP شما کمک می‌کند. از خط فاصله، کنترل فاصله، جایگزینی هوشمند نویسه‌ها (شامل علامت نقل قول، خط تیره، بیضی و نمادهای ریاضی) و قلاب‌های CSS برای استایل دادن به چیزهای خاص (از جمله علامت‌های اختصاری و اعداد) پشتیبانی می‌کند.
CSS Type Set
CSS Type Set اجازه می‌دهد یک بلوک متن را استایل می دهید و سپس CSS را کپی می کنید. این یک مولد ساده CSS است که برای استایل دادن به یک فونت در یک زمان عالی است. این به شما امکان می‌دهد تایپ‌فیس، اندازه، فاصله، پیشرو، دکوراسیون و رنگ را کنترل کنید.
Flipping Typical
Flipping Typical نمونه را به شما نشان می دهد متن با انواع فونت هایی که روی رایانه خود نصب کرده اید. این یک راه عالی برای مقایسه دسته ای از فونت ها، کنار هم، به یکباره است. تنها هشدار: فقط برخی از فونت های نشان داده شده در وب ایمن هستند.
شبکه تایپوگرافی
یک ریتم عمودی ثابت یکی از چیزهایی است که تایپوگرافی عالی را از تایپوگرافی خوب متمایز می کند. شبکه تایپوگرافیک به ایجاد ریتم عمودی برای شما کمک می کند. همچنین شامل یک شبکه عمودی به عنوان راهنمای موقعیت‌یابی تایپوگرافی و سایر عناصر است.
WhatTheFont
WhatTheFont ارائه می‌کند یک راه آسان برای فهمیدن اینکه یک فونت خاص چیست. فقط یک تصویر آپلود کنید (یا یک URL را مشخص کنید) و WhatTheFont تعیین می کند که چه فونتی استفاده می شود. این یک راه عالی برای یافتن فونت هایی است که در تصاویر یا فایل های فلش استفاده شده اند.
CSS با ریتم عمودی
همانطور که قبلاً ذکر شد، یک ریتم عمودی ثابت، تایپوگرافی عالی را از آنچه که فقط “خوب” است جدا می کند. این ابزار می تواند به شما در ایجاد CSS برای تایپوگرافی که دارای ریتم عمودی ثابتی است کمک کند. فقط خانواده فونت، اندازه فونت پایه، ارتفاع خط پایه، و اندازه فونت هدف را وارد کنید و برای دریافت CSS برای یک ریتم عمودی ثابت، محاسبه کنید.
ماشین حساب پایه ریتم
یکی دیگر از ماشین حساب های ریتم عمودی عالی. با این حال، این یکی به شما نشان می دهد که وقتی با ریتم عمودی تعیین شده تنظیم می شود اندازه فونت های مختلف در کنار یکدیگر چگونه به نظر می رسند. این یک راه عالی برای اطمینان از اینکه همه اندازه‌های قلمی که استفاده می‌کنید خوب به نظر می‌رسند.
Font Burner
Font Burner اجازه می‌دهد شما فونت ها را با استفاده از sIFR و با استفاده از یک رابط گرافیکی در وب سایت های خود جاسازی می کنید. در حال حاضر بیش از 1000 فونت از طریق Font Burner در دسترس است و افزونه وردپرس نیز موجود است. تنها کاری که برای استفاده از آن باید انجام دهید این است که فونت مورد نظر خود را پیدا کنید، کد جاسازی شده را کپی کنید و سپس آن را در کد وب سایت خود جای گذاری کنید.
مولد متن کور
این مولد متن ساختگی به شما امکان می دهد نه تنها لورم ipsum، بلکه تعدادی دیگر از انواع متن ساختگی ایجاد کنید. در همان زمان، می‌توانید آن متن را مستقیماً در ژنراتور قالب‌بندی کنید (روی گزینه‌های پیشرفته کلیک کنید)، و سپس CSS را کپی کنید.
Baseline
Baseline یک شبکه و تایپوگرافی است چارچوبی که شامل فایل‌هایی برای بازنشانی پیش‌فرض‌های مرورگر و ایجاد یک طرح‌بندی تایپوگرافیک است. برای طراحانی که می خواهند از طرح بندی شبکه ای استفاده کنند و همچنین برای طراحی تایپوگرافی سایت کمک می خواهند گزینه خوبی است. راه‌اندازی تایپوگرافی شامل سرفصل‌ها، فهرست‌ها، پاراگراف‌ها، نقل قول‌ها و جداول و همچنین برخی کدهای نشانه‌گذاری دیگر است.
ماتریس قلم
Font Matrix فونت‌های موجود در سیستم‌عامل‌های Mac و Windows، Microsoft Office و Adobe Creative Suite را نشان می‌دهد، همگی در شبکه‌ای که به آسانی می‌توانید ببینید کدام فونت‌ها به احتمال زیاد در کدام نوع از رایانه‌ها یافت می‌شوند. به عنوان مثال، اگر سایت شما بیشتر به طراحان پاسخ می دهد، ممکن است اولین فونت را در پشته فونت خود چیزی بسازید که همراه با Adobe Creative Suite باشد، در حالی که اگر سایت برای کاربران تجاری طراحی شده باشد، اولین فونت موجود می تواند چیزی از مایکروسافت آفیس باشد.
Typograph
Typograph به شما امکان آزمایش می دهد با مقیاس های مختلف و سایر عناصر ریتم عمودی. این شامل انواع مقیاس‌های سنتی (از جمله لوکوربوزیه و فیبوناچی) و همچنین سایر گزینه‌های چیدمان است.
خدمات قلم وب
Typekit
Typekit فونت‌های مختلفی را ارائه می‌کند از نوع فروشندگان و ریخته گری ها، از جمله The League of Movable Type، FontFont و Veer (شما می توانید کل لیست فونت ها را بدون نیاز به ثبت نام برای حساب کاربری مشاهده کنید). آنها همچنین گزینه‌های کنترل پیشرفته‌ای را برای استایل دادن به فونت‌ها، مقیاس‌پذیری بی‌نهایت، و یک کلفون ارائه می‌دهند که به بازدیدکنندگان شما می‌گوید که سایت شما از چه فونت‌هایی استفاده می‌کند. قیمت Typekit معقول است و از رایگان برای دسترسی جزئی تا 100 دلار در سال برای سایت‌های پربازدید متغیر است.
کرنست
کرنست یک سرویس فونت وب است که از فونت های OFL، GPL، GUST، و Creative Commons و همچنین فونت های دارای مجوز تجاری استفاده می کند. استفاده از بسیاری از فونت‌های آنها رایگان است (خود سرویس رایگان است) در حالی که برخی دیگر هزینه اشتراک دارند که از چند دلار شروع می‌شود.
Fonts Live from Ascender
Ascender خدمات فونت وب خود، Fonts Live را ارائه می دهد. آنها بیش از 110 نوع فونت در دسترس دارند، با فونت هایی از Monotype، Microsoft، Bigelow & Holmes، و دیگران، و همچنین فونت های خود را.
Google Font API
Google مجموعه محدودی از فونت های وب منبع باز را ارائه می دهد. اگرچه این انتخاب زیاد نیست، اما رایگان است و توسط Google پشتیبانی می‌شود، به این معنی که بعید است با مشکلات ظرفیت یا تاخیر مواجه شوید.
TypeFront
TypeFont کمی به فونت های وب نزدیک می شود متفاوت به جای ارائه کتابخانه ای از فونت های وب پسند، آنها به شما این امکان را می دهند که فونت های خود را که دارای مجوز وب پسند هستند بارگذاری کنید. اگر فونت‌هایی که می‌خواهید استفاده کنید در حال حاضر توسط هیچ یک از سرویس‌های فونت وب دیگر ارائه نشده‌اند، این گزینه عالی است. یک طرح رایگان برای سایت‌های کم بازدید و همچنین طرح‌های پولی وجود دارد.
فونت های وب Typotheque
Typotheque خدمات فونت وب خود را ارائه می دهد تا فونت های خود را برای پیاده سازی @font-face در دسترس قرار دهد. مزیت این است که فقط هزینه مجوز یکباره وجود دارد که می تواند هم برنامه های چاپی و هم برنامه های وب را پوشش دهد. نقطه ضعف این است که انتخاب فقط به فونت آنها محدود می شود.
منابع و مقالات تایپوگرافی
عناصر سبک تایپوگرافی اعمال شده در وب
این یک راهنمای مرجع بسیار کامل برای کسانی است که می خواهند نه تنها اصول تایپوگرافی خوب وب را بیاموزند، بلکه تکنیک ها و اصول پیشرفته تری را نیز بیاموزند. این به فصل‌ها و زیرفصل‌هایی از جمله حرکت افقی و عمودی، بلوک‌ها و پاراگراف‌ها، صفحه‌بندی، اندازه و موارد دیگر تقسیم می‌شود. این یک کار در حال انجام است، بنابراین انتظار دارید اطلاعات بیشتری در آینده ظاهر شود.
Nice Web Type
Nice Web Type دارای هزاران اطلاعات در مورد پیاده سازی تایپوگرافی وب آنها در مورد همه چیز از شروع تایپوگرافی وب تا استفاده از CSS @font-face “یادداشت” دارند. آنها همچنین روندها و ایده های جدید را به طور منظم مورد بحث قرار می دهند و صفحه ای اختصاص داده شده به آنچه که برخی از بهترین فونت های موجود را در نظر می گیرند.
12 نمونه از تایپوگرافی پاراگراف
این مجموعه از قالب‌های پاراگراف نمونه از Jon Tan یک نقطه شروع عالی برای هر کسی که یک سایت پر متن طراحی می‌کند، می‌دهد. بسیاری از طراحان تمام احتمالاتی را که با استایل پاراگراف ارائه می شود نادیده می گیرند و گزینه های سنتی تر و محافظه کارانه تر را انتخاب می کنند. این مقاله ثابت می‌کند که بیرون آمدن از چارچوب و انجام کاری جالب با پاراگراف‌های طرح‌هایتان چندان دشوار نیست.
تضاد و جریان تایپوگرافی
این یک راهنمای فوق العاده از WebDesignerWall در مورد اصول جریان و کنتراست در تایپوگرافی وب است. این اصول را به چندین بخش، از جمله اندازه، نوع نوشتار/طبقه‌بندی، رنگ و وزن تقسیم می‌کند.
پشته قلم اصلاح شده
این مقاله گسترش پشته‌های فونت CSS ایمن وب را با کاوش سایر فونت‌های معمولی مورد بحث قرار می‌دهد. همچنین پشته‌های فونت برخی از وب‌سایت‌های محبوب را به همراه توصیه‌هایی برای بهبود پشته‌هایشان بررسی می‌کند.
در تایپوگرافی وب
این مقاله توسط Jason Santa Maria در A List Apart نگاهی بسیار جامع به جفت کردن حروف در طراحی وب سایت شما است. این موضوعی است که اغلب درباره آن بحث نمی شود، اما برای ایجاد طرح های تایپوگرافی عالی در وب بسیار مهم است.
تفکر با نوع
Thinking with Type وب سایت همراه کتابی با همین عنوان اثر الن لوپتون است. اطلاعات اولیه زیادی در مورد تایپوگرافی ارائه می دهد. در حالی که بسیاری از آن بر تایپوگرافی چاپی متمرکز است، بسیاری از اطلاعات موجود را می توان در تایپوگرافی وب اعمال کرد.
10 نکته عالی برای بهبود تایپوگرافی وب شما
لیستی از ده کار ساده که می توانید برای بهبود تایپوگرافی در طراحی وب سایت خود انجام دهید. این شامل اطلاعات مربوط به فونت، اندازه، مقیاس و سلسله مراتب، پیشرو و موارد دیگر است.
الهام بخش تایپوگرافی، روندها و اخبار
Typophile
Typophile انجمنی برای تایپ‌فیس است علاقه مندان و تایپوگرافی ها اگر می‌خواهید بدانید در دنیای تایپوگرافی چه اتفاقی می‌افتد، تایپوفیل مکانی عالی برای نگاه کردن است. همچنین مکان خوبی برای دریافت کمک در مورد مشکلات مربوط به تایپوگرافی که ممکن است داشته باشید است.
من عاشق تایپوگرافی هستم
ILT یک وبلاگ است به طور کامل به تایپوگرافی اختصاص داده شده است. هم موضوعات طراحی و هم موضوعات تجاری را از دیدگاه حرفه ای مورد بحث قرار می دهد. آرشیو آنها بسیار بزرگ است، بنابراین اطلاعات زیادی در مورد اخبار و روندهای فعلی و گذشته وجود دارد تا شما را مشغول نگه دارد.
ما عاشق تایپوگرافی هستیم
WLT یک گالری است از تایپوگرافی، حروف، علائم و انواع دیگر. کاربران می توانند تصاویری را از نوع مورد علاقه خود ارسال کنند و این مکان عالی برای الهام گرفتن از تایپوگرافی برای پروژه بعدی شما است.
تایپوگرافی برای سرفصل ها
Elements of Design یک گالری عالی از بیش از 120 نمونه از تایپوگرافی تیتر دارد. آنها حیطه را از ساده به پیچیده، در انواع حروف و سبک ها اجرا می کنند. اگر به دنبال کمی الهام هستید، مکان بسیار خوبی برای رفتن است. آنها همچنین یک گالری از نقل قول‌ها با بیش از 20 مثال دارند.
Typographica
Typographica بررسی نوع، تفسیر را ارائه می‌کند و نقد کتاب تایپوگرافی بررسی‌های نوع آنها به‌ویژه آموزنده است اگر می‌خواهید بدانید چه چیزی یک تایپ فیس خوب را می‌سازد.
پشت صحنه از تایپوگرافی وب نفیس
این در واقع اولین مورد از یک سری پنج قسمتی است. این پست به تایپوگرافی پشت A List Apart نگاه می کند و فونت ها و سبک های استفاده شده برای بخش های مختلف سایت را تجزیه می کند. پست‌های بعدی به این موارد نگاه کنید: خس رودروگز ولاسکو، جان تان، Designr.it و Codex Transportica.
Typesites
Typesites وبلاگی است که نمایش می دهد طراحی های تایپوگرافی وب عالی به طور منظم. سایت هایی که آنها ارائه می دهند متنوع هستند، اما همه شامل استفاده از نوع الهام بخش هستند.
به طور انحصاری برای Webdesigner Depot توسط Cameron Chapman گردآوری شده است
بدون دیدگاه