{"id":1042,"date":"2025-08-21T06:29:11","date_gmt":"2025-08-21T06:29:11","guid":{"rendered":"https:\/\/sinkplybcn.com\/?page_id=1042"},"modified":"2025-09-09T04:46:05","modified_gmt":"2025-09-09T04:46:05","slug":"fonts","status":"publish","type":"page","link":"https:\/\/sinkplybcn.com\/en\/fonts\/","title":{"rendered":"Tipografias"},"content":{"rendered":"<style>\n  .nota{ margin-bottom: 12px; text-align:center; }\n\n  \/* Contenedor general sin desplazamiento horizontal *\/\n  .font-tester{ overflow-x:hidden; }\n\n  \/* Contenedor centrado *\/\n  .typos-wrapper{\n    max-width:650px;\n    margin:0 auto;\n    padding:0 16px; \/* peque\u00f1o colch\u00f3n lateral en m\u00f3viles *\/\n  }\n\n  .section-title{\n    font-size:16px;   \/* un poco m\u00e1s grande *\/\n    letter-spacing:.12em;\n    text-transform:uppercase;\n    color:#555;\n    margin:28px 0 12px;\n    text-align:center;\n  }\n\n  \/* L\u00ednea separadora *\/\n  .typos-divider{\n    border-top:2px solid #000;\n    margin:32px 0;\n  }\n\n  .line{\n    display:grid; grid-template-columns:26px 1fr; column-gap:8px; align-items:center;\n    padding:10px 0 14px; border-bottom:1px dashed #eae6e0;\n    transition:background .15s ease;\n  }\n  .line:hover{ background:rgba(0,0,0,.035); }\n  .line.selected{ background:rgba(200,170,120,.12); }\n\n  .num{ font-size:12px; font-weight:600; color:#666; text-align:left; }\n\n  \/* ===== FIX DEFINITIVO: permitir 3+ l\u00edneas, sin cortes y SIN scale() ===== *\/\n  .sample{\n    display:block;                \/* permitir saltos *\/\n    white-space:normal;           \/* quitar nowrap *\/\n    line-height:1.45;             \/* aire vertical *\/\n    transform-origin:left center;\n    --dy:0px;\n    transform:translateY(var(--dy));   \/* quitamos scale() para no falsear el ancho *\/\n    max-width:100%;\n    padding-right:1px;            \/* evita recorte por redondeo al final de l\u00ednea *\/\n\n    \/* no recortar ni \u201c\u2026\u201d; permitir bajar palabra completa y romper SOLO si es largu\u00edsima *\/\n    overflow:visible;\n    text-overflow:clip;\n    word-break:normal;\n    overflow-wrap:break-word;     \/* si hay una palabra gigant\u00edsima, pasa abajo *\/\n    hyphens:manual;               \/* sin guiones autom\u00e1ticos *\/\n  }\n  \/* ================================================================ *\/\n\n  \/* Las clases de desplazamiento vertical siguen funcionando *\/\n  .up-2{--dy:-2px;} .up-4{--dy:-4px;} .up-6{--dy:-6px;}\n  .down-2{--dy:2px;} .down-4{--dy:4px;} .down-6{--dy:6px;}\n\n  \/* (Opcional) si a\u00fan tienes clases s-75, s-80, etc. las neutralizamos\n     para que no reintroduzcan scale() por herencias anteriores *\/\n  .s-75,.s-80,.s-85,.s-90,.s-95,.s-100,.s-105,.s-110,.s-115,.s-120,.s-125,.s-130,.s-140,.s-150{\n    \/* sin cambios visuales: el tama\u00f1o ya lo controlas con los botones (font-size) *\/\n  }\n\n  .copied-tip{\n    position: fixed;\n    left: 50%;\n    bottom: 18px;\n    transform: translate(-50%, 12px) scale(.98);\n    background: #111;\n    color: #fff;\n    padding: 10px 14px;\n    border-radius: 12px;\n    font-size: 13px;\n    line-height: 1;\n    box-shadow: 0 10px 30px rgba(0,0,0,.25);\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity .22s ease, transform .22s ease;\n    display: flex; align-items: center; gap: 8px;\n  }\n  .copied-tip::before{\n    content: \"\u2713\";\n    display:inline-block;\n    width: 18px; height: 18px;\n    border-radius: 999px;\n    background: #25D366;\n    color:#111;\n    font-weight: 800;\n    text-align:center;\n    line-height: 18px;\n    font-size: 12px;\n  }\n  .copied-tip.show{ opacity: 1; transform: translate(-50%, 0) scale(1); }\n\n  \/* Botones S\/M\/L 50% m\u00e1s peque\u00f1os *\/\n  .size-presets{\n    text-align:center;\n    margin:10px 0 0;\n  }\n  .size-presets .sz{\n    font-size:12px;\n    padding:4px 8px;\n    line-height:1;\n  }\n<\/style>\n\n<div class=\"font-tester\" id=\"fontTester\">\n  <div class=\"tester-head\" style=\"text-align:center;\">\n    <input id=\"testerText\" class=\"tester-input\" type=\"text\"\n           placeholder=\"Escribe aqu\u00ed lo que te quieres tatuar\"\n           style=\"max-width:100%; text-align:center;\">\n  <\/div>\n\n  <p class=\"nota\">\n    Tap a line to copy <b>Column<\/b> + <b>Number<\/b>.<br>\n    Give me that detail when you book your appointment\n  <\/p>\n\n  <!-- 1) MOVIDO AQU\u00cd: Tama\u00f1os r\u00e1pidos debajo de la nota -->\n  <div class=\"size-presets\">\n    Quick size\n    <button class=\"sz\" data-sz=\"32\">S<\/button>\n    <button class=\"sz\" data-sz=\"42\">M<\/button>\n    <button class=\"sz\" data-sz=\"52\">L<\/button>\n  <\/div>\n\n  <div class=\"typos-wrapper\">\n    <!-- ===== NORMALES ===== -->\n    <h3 class=\"section-title\">Normales<\/h3>\n    <div class=\"line\"><span class=\"num\">1<\/span><span class=\"sample s-120\" style=\"font-family:'Amatic', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">2<\/span><span class=\"sample s-110\" style=\"font-family:'Childlike', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">3<\/span><span class=\"sample s-130\" style=\"font-family:'Annie', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">4<\/span><span class=\"sample s-60\" style=\"font-family:'Courier', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">5<\/span><span class=\"sample s-75\" style=\"font-family:'Reenie', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">6<\/span><span class=\"sample s-120\" style=\"font-family:'Walkway', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">7<\/span><span class=\"sample s-85\" style=\"font-family:'Chopin', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">8<\/span><span class=\"sample s-150\" style=\"font-family:'Shadows', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">9<\/span><span class=\"sample s-100\" style=\"font-family:'Realife-Moment', serif;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">10<\/span><span class=\"sample s-85\" style=\"font-family:'BDMegalona', serif;\">Sinkply<\/span><\/div>\n\n    <div class=\"typos-divider\"><\/div>\n\n    <!-- ===== CURSIVAS ===== -->\n    <h3 class=\"section-title\">Cursivas<\/h3>\n    <div class=\"line\"><span class=\"num\">1<\/span><span class=\"sample s-75\" style=\"font-family:'Gwendolyn', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">2<\/span><span class=\"sample s-120\" style=\"font-family:'Cherolina-1', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">3<\/span><span class=\"sample s-150\" style=\"font-family:'RetroSignature', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">4<\/span><span class=\"sample s-130\" style=\"font-family:'Miami-Sunday-1', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">5<\/span><span class=\"sample s-125\" style=\"font-family:'High-Empathy-1', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">6<\/span><span class=\"sample s-150\" style=\"font-family:'Magenta', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">7<\/span><span class=\"sample s-80\" style=\"font-family:'OoohBaby', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">8<\/span><span class=\"sample s-150\" style=\"font-family:'Parisienne', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">9<\/span><span class=\"sample s-125\" style=\"font-family:'exmouth', cursive;\">Sinkply<\/span><\/div>\n    <div class=\"line\"><span class=\"num\">10<\/span><span class=\"sample s-80\" style=\"font-family:'Thank-you', cursive;\">Sinkply<\/span><\/div>\n  <\/div>\n\n  <div class=\"copied-tip\" id=\"copiedTip\">Copiado<\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const buttons = document.querySelectorAll(\".size-presets .sz\");\n  const samples = document.querySelectorAll(\".sample\");\n  const input   = document.getElementById(\"testerText\");\n  const tip     = document.getElementById(\"copiedTip\");\n\n  const DEFAULT_SIZE = 32;\n  let tipTimer;\n\n  function applyText() {\n    const t = input.value || \"Sinkply\";  \/\/ si est\u00e1 vac\u00edo, muestras siguen con \"Sinkply\"\n    samples.forEach(s => s.textContent = t);\n  }\n  function applySize(px) {\n    samples.forEach(s => s.style.fontSize = px + \"px\");\n  }\n\n  \/\/ Inicial: input vac\u00edo (placeholder) y muestras con \"Sinkply\"\n  applyText();\n  applySize(DEFAULT_SIZE);\n\n  \/\/ Botones S\/M\/L\n  buttons.forEach(btn => {\n    btn.addEventListener(\"click\", function() {\n      const px = parseInt(this.getAttribute(\"data-sz\"), 10);\n      applySize(px);\n      buttons.forEach(b => b.classList.remove(\"active\"));\n      this.classList.add(\"active\");\n    });\n  });\n\n  \/\/ Texto en vivo\n  input.addEventListener(\"input\", applyText);\n\n  \/\/ Copiar al tocar una l\u00ednea (detecta t\u00edtulo m\u00e1s cercano)\n  const lines = document.querySelectorAll(\".line\");\n  lines.forEach(line => {\n    line.addEventListener(\"click\", () => {\n      document.querySelectorAll(\".line.selected\").forEach(l => l.classList.remove(\"selected\"));\n      line.classList.add(\"selected\");\n\n      const num = (line.querySelector(\".num\")?.textContent || \"\").trim();\n      const section = line.closest(\".typos-wrapper\").querySelectorAll(\".section-title\");\n      let sectionName = \"Fuente\";\n\n      for (let i = section.length - 1; i >= 0; i--) {\n        const title = section[i];\n        if (title.compareDocumentPosition(line) & Node.DOCUMENT_POSITION_FOLLOWING) {\n          sectionName = title.textContent.trim();\n          break;\n        }\n      }\n\n      const toCopy = `${sectionName} #${num} \u2014 ${input.value || \"Texto\"}`;\n      navigator.clipboard?.writeText(toCopy).catch(()=>{});\n      if (tip){\n        tip.textContent = `Copiado: ${sectionName} #${num}`;\n        clearTimeout(tipTimer);\n        tip.classList.add(\"show\");\n        tipTimer = setTimeout(()=> tip.classList.remove(\"show\"), 1100);\n      }\n    });\n  });\n});\n<\/script>\n\n\n\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>Toca una l\u00ednea para copiar columna + n\u00famero. Dime ese dato cuando pidas tu cita Tama\u00f1o r\u00e1pido: S M L Normales 1Sinkply 2Sinkply 3Sinkply 4Sinkply 5Sinkply 6Sinkply 7Sinkply 8Sinkply 9Sinkply 10Sinkply Cursivas 1Sinkply 2Sinkply 3Sinkply 4Sinkply 5Sinkply 6Sinkply 7Sinkply 8Sinkply 9Sinkply 10Sinkply Copiado<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1042","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona<\/title>\n<meta name=\"description\" content=\"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sinkplybcn.com\/en\/fonts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona\" \/>\n<meta property=\"og:description\" content=\"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sinkplybcn.com\/en\/fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Sinkply Barcelona\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-09T04:46:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sinkplybcn.com\\\/fonts\\\/\",\"url\":\"https:\\\/\\\/sinkplybcn.com\\\/fonts\\\/\",\"name\":\"Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sinkplybcn.com\\\/#website\"},\"datePublished\":\"2025-08-21T06:29:11+00:00\",\"dateModified\":\"2025-09-09T04:46:05+00:00\",\"description\":\"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sinkplybcn.com\\\/fonts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sinkplybcn.com\\\/fonts\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sinkplybcn.com\\\/fonts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/sinkplybcn.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tipografias\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sinkplybcn.com\\\/#website\",\"url\":\"https:\\\/\\\/sinkplybcn.com\\\/\",\"name\":\"Sinkply Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sinkplybcn.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona","description":"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sinkplybcn.com\/en\/fonts\/","og_locale":"en_US","og_type":"article","og_title":"Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona","og_description":"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.","og_url":"https:\/\/sinkplybcn.com\/en\/fonts\/","og_site_name":"Sinkply Barcelona","article_modified_time":"2025-09-09T04:46:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sinkplybcn.com\/fonts\/","url":"https:\/\/sinkplybcn.com\/fonts\/","name":"Elije tu tipografia ideal para el tatuaje que imaginas - Sinkply Barcelona","isPartOf":{"@id":"https:\/\/sinkplybcn.com\/#website"},"datePublished":"2025-08-21T06:29:11+00:00","dateModified":"2025-09-09T04:46:05+00:00","description":"Te ayudamos a elegir tu tipograf\u00eda ideal para el tatuaje que buscas, asegurando que cada detalle sea significativo.","breadcrumb":{"@id":"https:\/\/sinkplybcn.com\/fonts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sinkplybcn.com\/fonts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sinkplybcn.com\/fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/sinkplybcn.com\/"},{"@type":"ListItem","position":2,"name":"Tipografias"}]},{"@type":"WebSite","@id":"https:\/\/sinkplybcn.com\/#website","url":"https:\/\/sinkplybcn.com\/","name":"Sinkply Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sinkplybcn.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/pages\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/comments?post=1042"}],"version-history":[{"count":95,"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/pages\/1042\/revisions"}],"predecessor-version":[{"id":2014,"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/pages\/1042\/revisions\/2014"}],"wp:attachment":[{"href":"https:\/\/sinkplybcn.com\/en\/wp-json\/wp\/v2\/media?parent=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}