→ كل الأعمال
تصميم / واجهة أمامية

Tidal

عيّنة خط طباعي لخط مُتخيَّل محوره الأساسي العمق لا السماكة. اسحب المؤشّر، أو مرّر الصفحة فحسب، فتغوص الحروف تحت الماء.

شاهد العرض المباشر ←
المنصة
v0
التقنيات
v0, variable font, CSS variable-font axes
Tidal screenshot

ما هي

Tidal عرض لخط طباعي مُتخيَّل تحكّمه الأساسي ليس السماكة بل العمق. اسحب المؤشّر من «السطح» إلى «القاع» فتتغيّر الحروف كأنها تغوص: حادّة وعالية التباين قرب الأعلى، وأثخن وألين كلما نزلت، مع خلفية تزداد عتمة أثناء النزول وأضواء متموّجة تنساب عليها كما ينكسر الضوء عبر سطح الماء.

وللمؤشّر ثِقَل. إن تركته في منتصف السحب واصل حركته واستقرّ بدل أن يتوقف فجأة، فيصير التنقّل عبر المدى أشبه بتحريك شيء في الماء لا بتحريك أداة تحكّم. وإن كنت تفضّل ألا تسحب، فتمرير الصفحة ينزل بك بدلًا من ذلك.

ويمكنك كتابة كلماتك أنت ومشاهدتها تغوص. وتحت ذلك، يمرّ شلّال بالعيّنة عبر كل المقاسات في عمود واحد، ويمكن فتح أي حرف بمفرده لرؤية كيف رُسم وما الذي يفعله به العمق. ولكل موضع تنتهي إليه عنوانه الخاص، فكلمة بعينها عند عمق بعينه شيء تستطيع أن ترسله إلى أحد.

لماذا صنعتها

كل ما عدا هذا العمل في الموقع يتصدّره الجانب الهندسي، وأردت قطعة واحدة يتصدّرها الشكل. وأردت أيضًا أن أصنع شيئًا فيه فكرة واحدة تخصّني، لا نسخة متقنة من تخطيط سبق أن رأيته. ومحور العمق هو تلك الفكرة: الشيء الذي تعبث به وفكرة الخط الطباعي حركة واحدة، فلم يبقَ شيء يحتاج إلى شرح في تعليق جانبي.

الحرفية

مؤشّر العمق هو الموضع الوحيد الذي يفعل فيه التصميم شيئًا لافتًا، وكل ما حوله هادئ عن قصد ليكون واضحًا أنه الشيء الذي يُنظر إليه. والألوان مستمدة من فكرة الغوص في الماء لا من إعداد افتراضي. والخطّان مقترنان عن عمد، والمقاسات تتدرّج على سلّم مقصود لا أرقام اعتباطية، والسحب سلس، والصفحة كلها تستقر على نسخة ساكنة لمن يطلب نظامه تقليل الحركة. والنصوص المكتوبة في الصفحة بصوت الخط الطباعي نفسه بدل نص بديل، لأن عيّنة مملوءة بـ lorem ipsum لا تخبرك شيئًا عن سلوك الحروف داخل جملة حقيقية.

ملاحظة بصراحة: Tidal ليس خطًا طباعيًا حقيقيًا. استخدمت Fraunces، وهو خط متغيّر (variable font) فعلي، ليقوم مقامه. هذا عمل تصميم وواجهة أمامية، وليس ادّعاءً بأنني صممت خطًا طباعيًا.