تایپوگرافی کینتیک در وب؛ فارسی، دسترس‌پذیری و Performance

یک فروشگاه ایرانی برای جشنوارهٔ فروش، عبارت «فقط امروز؛ ارسال رایگان» را حرف‌به‌حرف روی Hero می‌رقصاند. در لپ‌تاپ طراح زیباست؛ روی گوشی میان‌رده، فونت دیر می‌رسد، حروف فارسی برای لحظه‌ای جدا دیده می‌شوند و کاربر قبل از کامل‌شدن جمله اسکرول می‌کند. مشکل کمبود افکت نیست؛ متن، زمان خواندن و مسیر جایگزین از ابتدا طراحی نشده‌اند.

تایپوگرافی کینتیک زمانی ارزش دارد که حرکت، رابطه‌ای میان معنا، ترتیب و زمان بسازد. اگر پیام بدون حرکت نامفهوم است، متن در DOM واقعی نیست، خواندن به Timeline قفل شده یا نتیجه فقط با «جذاب بود» سنجیده می‌شود، هنوز یک تجربهٔ وب قابل‌اعتماد نداریم.

تایپوگرافی کینتیک چیست و چه چیزی نیست؟

Kinetic Typography طراحی تغییر متن در زمان است: ورود، خروج، جابه‌جایی، ریتم، تأکید یا تبدیل بصری کلمه‌ها به انتقال معنا کمک می‌کند. این مفهوم با یک Fade ساده، Motion graphics و Microinteraction هم‌پوشانی دارد، اما موضوع اصلی آن خودِ زبان و خواندن است.

اگر مسئله شما State، Easing، Interaction و انتخاب CSS/WAAPI/Library در کل رابط است، راهنمای UI Motion مالک آن Intent عمومی است. این صفحه روی قرارداد خاص متن متحرک، خوانایی و فارسی تمرکز دارد.

پیش از طراحی، Use-case Gate بگذارید

حرکت چشم را می‌گیرد؛ همین ویژگی می‌تواند پیام اصلی را برجسته یا کار مهم دیگری را مختل کند. برای هر نمونه یک Motion brief کوتاه بنویسید:

Hero معرفی محصول، توضیح یک فرایند، عددی که تغییر وضعیت را نشان می‌دهد یا روایت کوتاه کمپین می‌توانند Candidate باشند. متن شرایط پرداخت، خطای فرم، قیمت نهایی، OTP و هشدار حقوقی نباید برای فهمیدن به انیمیشن زمان‌دار وابسته شوند.

معنا را پیش از حرکت به Script تبدیل کنید

جملهٔ تبلیغاتی را مستقیم داخل After Effects یا Timeline نبرید. ابتدا پیام را به واحدهای معنایی تقسیم کنید:

Audience: خریدار موبایل در ایران
Job: فهمیدن مزیت تحویل
Full static message: «سفارش امروز، تحویل فردا در تهران»

Beat 1: سفارش امروز
Beat 2: تحویل فردا
Beat 3: در تهران

Emphasis: «فردا»
Boundary: زمان تحویل برای همه شهرها یکسان نیست
Action: مشاهده شرایط ارسال

اگر Beatها بدون Context ادعای متفاوتی می‌سازند—مثلاً «تحویل فردا» پیش از نمایش «در تهران»—ترتیب انیمیشن می‌تواند گمراه‌کننده باشد. ادعا و قید آن را هم‌زمان یا به شکلی نمایش دهید که Screenshot هر لحظه حقیقت ناقص نسازد.

واحد حرکت را آگاهانه انتخاب کنید

برای متن فارسی، عبارت یا کلمه معمولاً نقطهٔ شروع امن‌تری از «حرف» است. شکستن رشته با یک Split ساده، Unicode code point را با Grapheme قابل‌نمایش یکی می‌گیرد و ممکن است نیم‌فاصله، اعراب یا اتصال حروف را خراب کند. اگر تقسیم دقیق ضروری است، رفتار را با دادهٔ فارسی واقعی، فونت نهایی و فناوری کمکی آزمایش کنید؛ Intl.Segmenter یک API استاندارد برای بخش‌بندی locale-aware است، نه مجوزی برای متحرک‌کردن بی‌محابای هر نشانه.

تایپوگرافی کینتیک فارسی یک مسئلهٔ RTL صرف نیست

راست‌به‌چپ‌کردن Container فقط Direction پایه را تعیین می‌کند. متن فارسی وب ممکن است نام لاتین محصول، کد تخفیف، درصد، تاریخ، قیمت و واحد پول داشته باشد. بنابراین باید این موارد را جدا تست کنید:

• ی و ک فارسی/عربی، نیم‌فاصله و اعراب در Source و CMS؛
• شکل پیوسته و جداشدهٔ حروف در شروع، میانه و پایان کلمه؛
• Bidi در عبارتی مثل «کد MINDIO20 تا ۲۵ مرداد»؛
• اعداد فارسی/لاتین و تومان/ریال بدون جابه‌جایی واحد؛
• شکستن خط در موبایل و Zoom تا ۲۰۰٪؛
• فونت Fallback پیش از Webfont و تفاوت Metricها؛
• مفهوم جهت حرکت: «بعدی/قبلی» منطقی است یا «شرق/غرب» فیزیکی؟

قرارداد طراحی سایت فارسی و RTL جزئیات Locale، Bidi، فرم و QA را پوشش می‌دهد. Motion نباید این قرارداد را دور بزند.

Content Model را از Timeline جدا نگه دارید

متن باید در CMS یک رشتهٔ کامل و قابل‌ترجمه باشد، نه مجموعه‌ای از Spanهای وابسته به ترتیب فارسی. مدل پیشنهادی:

message_id: hero_delivery
full_text: سفارش امروز، تحویل فردا در تهران
emphasis_tokens: [تحویل فردا]
qualifier: در تهران
motion_preset: reveal_emphasis
reduced_variant: static
owner: ecommerce_content
expiry: campaign_end
fallback: full_text

Localization team باید بتواند متن را بدون ویرایش Keyframe تغییر دهد. اگر طول ترجمه یا خط‌بندی عوض شد، Component باید Reflow کند و ترتیب معنایی را نگه دارد. برای State، خطا و CTA، راهنمای UX Writing و Microcopy فارسی مرجع محتوایی مکمل است.

Storyboard را با State، نه فقط Frame، تحویل دهید

فایل طراحی زیبا برای پیاده‌سازی کافی نیست. Handoff باید مشخص کند:

• State اولیه پیش از CSS/JS و پس از شکست JS چیست؛
• Trigger بارگذاری، ورود به Viewport، Activation یا State change است؛
• هر Beat چه Duration/Delay/Easing دارد؛
• انیمیشن قابل قطع، Skip، Replay یا Reverse هست یا نه؛
• در Reduced Motion چه چیزی حذف و چه چیزی جایگزین می‌شود؛
• در Font failure، Offline، Background tab و Resize چه رخ می‌دهد؛
• Definition of Done و شواهد پذیرش چیست.

Creative brief و نظام بصری را در راهنمای آرت‌دایرکشن وب به Motion brief متصل کنید؛ هویت برند به معنی تکرار یک افکت روی همهٔ عنوان‌ها نیست.

قواعد حرکت: خوانایی از نمایش مهم‌تر است

برای حرکت فضایی، اول transform و opacity را بررسی کنید. انیمیت‌کردن پیوستهٔ font-size، width، top، left یا فاصله‌ها می‌تواند Layout/Paint بیشتری بسازد و خط متن را جابه‌جا کند. transition: all نیز قرارداد نامشخصی ایجاد می‌کند.

• متن را از scale(0) شروع نکنید؛ اندازهٔ نزدیک به نهایی و جابه‌جایی کوتاه خواناتر است.
• برای Interactionهای معمول، ۲۰۰–۳۰۰ms نقطهٔ شروع آزمون است، نه قانون جهانی.
• Stagger کوتاه نگه دارید؛ تأخیر زیاد جمله را به آزمون صبر تبدیل می‌کند.
• Focus و پاسخ Keyboard باید فوری باشند؛ Motion نباید Tab/Arrow/Shortcut را عقب بیندازد.
• Hover motion را فقط برای Device دارای Hover و Pointer دقیق فعال کنید.
• کنتراست را در تمام Frameها، نه فقط Frame نهایی، بررسی کنید.
• از Loop دائمی برای CTA یا Heading پرهیز و Loop خارج Viewport را Pause کنید.

اعداد بالا نقطهٔ شروع برگرفته از الگوی UI سریع‌اند؛ طول متن، فاصله، Device و هدف را با ضبط Frame-by-frame و آزمون کاربر تنظیم کنید.

Semantic HTML باید منبع حقیقت باشد

عنوان را داخل Canvas، ویدئو یا SVG بدون جایگزین قرار ندهید. نسخهٔ کامل در HTML و ترتیب Heading منطقی باید حتی پیش از اجرای JavaScript وجود داشته باشد. برای ورود ساده، همان Node متن را حرکت دهید:

<h2 class="kinetic-title" data-ready="true">
  سفارش امروز، تحویل فردا در تهران
</h2>

اگر واقعاً باید کلمه‌ها را به Span تبدیل کنید، Accessible name و ترتیب خواندن را حفظ و خروجی Screen reader را آزمایش کنید. Duplicate text پنهان، aria-hidden و aria-label را کورکورانه ترکیب نکنید؛ ممکن است متن دوبار یا اصلاً خوانده نشود. منبع DOM، نام قابل‌دسترسی و نمای بصری باید یک پیام واحد بدهند.

Static-first و Reduced Motion را از ابتدا پیاده کنید

حالت پایه را Visible و نهایی بسازید؛ Motion فقط در صورت اعلام نبود ترجیح کاهش حرکت اضافه شود:

.kinetic-title {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .kinetic-title[data-ready="true"] {
    animation: title-enter 500ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes title-enter {
  from { opacity: 0; transform: translate3d(0, .4em, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

این الگو در حالت Reduced Motion و شکست CSS/JS پیام را نگه می‌دارد. طبق MDN، prefers-reduced-motion ترجیح کاربر برای کاهش Motion غیرضروری را تشخیص می‌دهد؛ «reduce» لزوماً به معنی حذف همه تغییرهای بصری نیست، اما حرکت فضایی غیرضروری باید حذف یا با جایگزین امن‌تر عوض شود.

Reduced Motion تنها الزام دسترس‌پذیری نیست

WCAG ۲.۲ چند مرز متفاوت دارد:

Scroll-triggered motion می‌تواند در هر دو حوزه مشکل بسازد. Scroll خودِ حرکت ضروری Viewport است؛ Parallax، Zoom یا ورودهای جانبی اضافه ضروری نیستند. گزینهٔ سیستم را رعایت کنید و برای تجربهٔ طولانی/خودکار کنترل قابل‌دسترسی Pause/Stop/Hide بدهید. برای تست کامل Keyboard، Screen reader، Zoom، Flash و Motion sensitivity به راهنمای ممیزی دسترس‌پذیری وب رجوع کنید.

Scroll را به پخش‌کنندهٔ اجباری تبدیل نکنید

در Scroll-linked typography، کاربر باید بتواند با سرعت خودش بخواند. Scroll-jacking، Pin طولانی، تغییر ناگهانی جهت یا جمله‌ای که فقط در یک بازهٔ باریک کامل می‌شود، خواندن و Navigation را دشوار می‌کند.

• متن کامل را در DOM نگه دارید و Progress را Enhancement بدانید.
• با Page Up/Down، Keyboard، Touch، Trackpad و Scroll سریع تست کنید.
• Back/Forward و Deep link باید State قابل‌فهم بسازند.
• Resize/Rotation/Zoom نباید کلمه‌ها را خارج Viewport قفل کند.
• در Reduced Motion، Pin/Parallax را حذف و ترتیب Static را نمایش دهید.

CSS، WAAPI، Library، Lottie یا Video؟

ابزار «بهترین» عمومی وجود ندارد. از کم‌هزینه‌ترین لایه‌ای شروع کنید که State، Interrupt، Reduced variant و Acceptance test را پوشش می‌دهد. Web Animations API به DOM animation، Timeline و کنترل‌های Play/Pause/Reverse دسترسی می‌دهد؛ همین قابلیت زمانی ارزش دارد که واقعاً به کنترل پویا نیاز باشد.

Font Pipeline بخشی از Motion است

ریتم بر Metricهای فونت تکیه دارد. اگر فونت فارسی پس از شروع Animation Swap شود، عرض کلمه، Line break، Baseline و مسیر حرکت تغییر می‌کنند. راهکار:

1. فونت و Weightهای واقعاً لازم را Inventory کنید.
2. Fallback metric-compatible و رفتار font-display را انتخاب کنید.
3. شروع Motion را به وضعیت قابل‌تعریف Font وابسته کنید، نه Timeout حدسی.
4. FOIT/FOUT، Cache سرد/گرم و شکست CDN را تست کنید.
5. CLS و Screenshot را روی عرض‌های فارسی واقعی اندازه بگیرید.

راهنمای بهینه‌سازی فونت وب مالک Subsetting، WOFF2، Preload، Metric override، CLS و Rollback است.

Performance Budget را پیش از انتخاب افکت تعیین کنید

راهنمای web.dev توصیه می‌کند برای Animationهای پرکارایی تا حد امکان به transform و opacity محدود بمانید؛ Propertyهای دیگر را براساس اثرشان بر Rendering pipeline بررسی کنید. اما Compositor-friendly بودن به‌تنهایی کافی نیست: Split هر حرف می‌تواند DOM را بزرگ کند، Library و Font شبکه را سنگین کنند و Callbackهای Scroll/Resize روی Main thread کار بسازند.

Animation loop خارج Viewport را با Visibility/Intersection evidence متوقف کنید. will-change را فقط نزدیک اجرای Motion و فقط برای Property لازم فعال و سپس حذف کنید. روش Field/Lab و RUM در راهنمای Core Web Vitals آمده است.

Loading Typography نباید انتظار را پنهان کند

متن متحرک Loading فقط وقتی مفید است که State واقعی را صادقانه منتقل کند. Loop «در حال پردازش» بدون Timeout، Progress، Cancel یا Recovery، تأخیر را بهتر نمی‌کند.

request started
→ pending with immediate static label
→ optional short motion
→ success / recoverable error / timeout
→ next action

Never:
animation finished = server succeeded

در پرداخت ایرانی، پایان انیمیشن نباید سفارش را موفق اعلام کند؛ فقط پاسخ معتبر سرور/PSP منبع حقیقت است. Motion باید با State واقعی همگام و در Retry/Back/Refresh قابل بازیابی باشد.

آزمایش را با نسخهٔ ایستا مقایسه کنید

تعداد Play یا مدت حضور روی Hero نشان نمی‌دهد پیام بهتر فهمیده شده است. یک Control ایستا و یک Variant متحرک بسازید و این لایه‌ها را بسنجید:

Novelty effect، Campaign، قیمت و رسانهٔ ورودی را ثبت کنید. Segment Reduced Motion، Device، Browser، Network و زبان را فقط با رعایت حریم خصوصی و حجم نمونه کافی تحلیل کنید. طراحی UX داده‌آگاه مرز Observation، فرضیه و آزمایش را تکمیل می‌کند.

ماتریس QA تایپوگرافی کینتیک

سناریوی ایران: کمپین فروش با فونت فارسی

فرض کنید Marketplace در Hero می‌خواهد سه Beat «قیمت واقعی / ضمانت معتبر / ارسال امروز» را نشان دهد. اجرای قابل‌اعتماد:

1. هر سه ادعا در HTML کامل و قیدهایشان کنار آن‌هاست.
2. نسخهٔ Static روی Android میان‌رده و WebView معیار پایه است.
3. فونت فارسی Self-host یا Fallback آزموده دارد؛ شکست CDN خارجی پیام را نمی‌شکند.
4. حرکت روی عبارت کامل/کلمه است، نه Split خامِ حروف پیوسته.
5. Reduced Motion همان ترتیب و تأکید را بدون Translation فضایی نشان می‌دهد.
6. Cache سرد روی اینترنت موبایل چند اپراتور و ISP آزمایش می‌شود.
7. قیمت، موجودی و زمان ارسال از Source واقعی می‌آیند، نه از Timeline ثابت.
8. Static و Motion با Comprehension، CTA، kept order و شکایت مقایسه می‌شوند.

Workflow مشترک Content، Design و Engineering

اشتباه‌های رایج و اصلاح آن‌ها

• «حرکت همیشه توجه را بهتر می‌کند»: توجه به معنی فهم یا تبدیل نیست؛ Control ایستا بسازید.
• Split حرف‌به‌حرف فارسی: Word/phrase را ترجیح دهید و Grapheme/AT را واقعاً تست کنید.
• متن فقط در Video/Canvas: HTML Semantic و جایگزین کامل نگه دارید.
• مخفی‌کردن پیش‌فرض تا اجرای JS: Static visible را Baseline کنید.
• فقط یک Rule سراسری Reduced: Reduced variant هر Component را تعریف کنید.
• Loop بی‌پایان: Stop/Pause و offscreen/background lifecycle بسازید.
• استفاده از Library برای یک Fade: هزینهٔ Bundle/Runtime را با نیاز مقایسه کنید.
• تست فقط روی Mac طراح: Android/WebView/فونت/شبکه/RTL/AT را وارد Matrix کنید.
• سنجش با CTR تنها: فهم، Task، Guardrail و نتیجهٔ نگه‌داشته‌شده را بسنجید.

برنامهٔ ۳۰ روزهٔ پیاده‌سازی

سؤال‌های متداول

تفاوت تایپوگرافی کینتیک و انیمیشن متن چیست؟

هر تایپوگرافی کینتیک نوعی انیمیشن متن است، اما حرکت آن با معنا، ریتم و ترتیب خواندن قرارداد دارد. Fade تزئینی یک Label ممکن است انیمیشن متن باشد، ولی لزوماً Kinetic Typography هدفمند نیست.

آیا تایپوگرافی کینتیک به سئو آسیب می‌زند؟

خود Motion حکم مثبت یا منفی عمومی ندارد. ریسک وقتی ایجاد می‌شود که متن در HTML واقعی نباشد، بدون JavaScript دیده نشود، محتوای اصلی دیر برسد، Font/Layout جابه‌جا شود یا Performance و تجربه کاربر افت کند. Semantic HTML، Static-first و اندازه‌گیری لازم‌اند.

برای متن متحرک CSS بهتر است یا JavaScript؟

برای Transition و Sequence ساده معمولاً CSS کم‌هزینه‌تر است. وقتی Playback، Timeline پویا، Interrupt یا هماهنگی پیچیده لازم است WAAPI یا یک Library می‌تواند مناسب باشد. انتخاب را با State contract، Bundle، Performance، Reduced Motion و نگه‌داری انجام دهید.

آیا prefers-reduced-motion برای دسترس‌پذیری کافی است؟

خیر. این ترجیح مهم است، اما Semantic و ترتیب خواندن، Focus، کنترل Pause/Stop/Hide برای حرکت مشمول، Flash، کنتراست، Zoom، Screen reader و معنای هم‌ارز نسخهٔ Static نیز باید آزموده شوند.

چرا نباید حروف فارسی را با JavaScript ساده جدا کنیم؟

نمایش فارسی به اتصال حروف، نیم‌فاصله، اعراب، Bidi و Grapheme وابسته است. Split خام ممکن است شکل بصری، ترتیب یا خروجی فناوری کمکی را خراب کند. عبارت/کلمه را ترجیح دهید و اگر تقسیم ریز لازم است، Segmentation locale-aware و آزمون واقعی انجام دهید.

جمع‌بندی

تایپوگرافی کینتیک موفق از افکت شروع نمی‌شود؛ از پیام، مخاطب و نسخهٔ ایستا شروع می‌شود. واحد حرکت را با زبان انتخاب کنید، فارسی و Bidi را در Content contract بیاورید، HTML Semantic را منبع حقیقت نگه دارید، Reduced Motion و کنترل را از ابتدا طراحی کنید و Font/Rendering/Main thread را بودجه‌بندی کنید. سپس فقط با مقایسهٔ Motion و Static دربارهٔ Scale تصمیم بگیرید.

منابع رسمی منتخب

• W3C WAI — Understanding SC 2.3.3 Animation from Interactions
• W3C WAI — Understanding SC 2.2.2 Pause, Stop, Hide
• W3C WAI — Understanding SC 2.3.1 Three Flashes
• MDN — prefers-reduced-motion
• web.dev — High-performance CSS animations
• MDN — Web Animations API
• MDN — Intersection Observer API
• MDN — Intl.Segmenter